[Next@12.0.0] API route 500'ing in production, works locally

[wadehammes]

What version of Next.js are you using?

12.0.0

What version of Node.js are you using?

14.18.0

What browser are you using?

Firefox

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

I have a few api routes, and one of them is failing in production builds, but works fine locally. They work fine in previous stable version of next, 11.1.x.

Uncaught (in promise) Error: An error has occured: 500
    e useReviews.ts:32
    l runtime.js:63
    _invoke runtime.js:293
    S runtime.js:118
    Babel 6
    w useReviews.ts:21
    c useReviews.ts:59
    Ii React
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    D scheduler.production.min.js:16
    onmessage scheduler.production.min.js:12
    60053 scheduler.production.min.js:12
    Webpack 16

Expected Behavior

The API route should not 500 since it works locally.

To Reproduce

I am not exactly sure how to reproduce, but I am using an API route to fetch from a third-party API and return some json.

[ijjk]

Hi, if you can share a repo where you are seeing this error that would work for an initial reproduction

[wadehammes]

It's a private repo unfortunately, Ill see if I can extract these things in a vanilla next build

[wadehammes]

@ijjk would the API route file maybe help shed some light?

import { NextApiRequest, NextApiResponse } from "next";
import { withSentry } from "@sentry/nextjs";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const { secret, feedId, type } = req.query;

  // This secret key just allows us to make sure no one externally can hit this endpoint
  if (secret !== process.env.API_SECRET) {
    return res.status(401).json({ message: "Invalid token." });
  }

  if (!type) {
    return res.status(401).json({
      message: 'No type of either "reviews" or "feed" supplied as a parameter.',
    });
  }

  if (!feedId && type === "reviews") {
    return res
      .status(401)
      .json({ message: "No feed id supplied as a parameter." });
  }

  // API endpoint for all reviews
  let apiUrl = `https://embedsocial.com/admin/v2/api/reviews/reviews-filtered?feed_id=${feedId}&sort=created_on&per_page=200`;

  // API endpoint for all feeds, which contains average_rating and review_count
  // so we don't have to worry about pagination
  if (type === "feed") {
    apiUrl = "https://embedsocial.com/admin/v2/api/reviews/feeds";
  }

  const fetchReviews = await fetch(apiUrl, {
    method: "GET",
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${process.env.EMBED_SOCIAL_API_KEY}`,
      "Content-Type": "application/json; charset=utf-8",
    },
  });

  if (fetchReviews.ok) {
    const reviewsJson = await fetchReviews.json();

    if (reviewsJson) {
      res.status(200).json(reviewsJson);
    } else {
      res.status(404).json({ message: "Not able to fetch reviews." });
    }
  } else {
    const message = `An error has occured while fetching reviews: ${fetchReviews.status}`;

    res.status(400).json({ message: "Failed to fetch reviews." });

    throw new Error(message);
  }

  // Optimistically return
  res.end();
};

export default withSentry(handler);

[ijjk]

Ah yes there seems to be an issue with sentry importing next and trying to wrap the server. Related comment here #30137 (reply in thread)

[wadehammes]

@ijjk ah! Good catch. I don't think we are getting much use from Sentry on these low-level API routes so I think I'll just remove it.

[GauravRajSharma]

Hi @ijjk,

I am facing this similar issue, while testing out the new NextJS 12 middleware feature

Reproduction Repo Link

Deployed at Vercel Link

[wadehammes]

@ijjk I am seeing this now without withSentry for an API route that is utilizing Preview Mode for Contentful pages:

// https://nextjs.org/docs/advanced-features/preview-mode
import { NextApiRequest, NextApiResponse } from "next";
import { getPageById } from "src/client";

// eslint-disable-next-line import/no-default-export
export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { secret, id } = req.query;

  if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET || !id) {
    return res
      .status(401)
      .json({ message: "Invalid token or missing page id." });
  }

  const page = await getPageById({ id, preview: true });

  if (!page) {
    return res
      .status(401)
      .json({ message: "Invalid id or page doesn't exist" });
  }

  // Enable Preview Mode by setting the cookies
  res.setPreviewData({ id: page.id });

  // Redirect to the path from the fetched post
  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
  // res.writeHead(307, { Location: `/posts/${post.slug}` })
  //
  // https://github.com/vercel/next.js/blob/canary/examples/cms-contentful/pages/api/preview.js
  const url = `/page-preview?slug=${page.previewSlug}&id=${page.id}`;

  res.redirect(url);
  res.end();
};

[ijjk]

Hi, this has been updated in v12.0.2-canary.11 of Next.js, please update and give it a try!

Note: this still isn't compatible with @sentry/nextjs so if that needs to be used outputFileTracing: false can be set in your next.config.js

[balazsorban44]

@wadehammes did that update work/can this be closed?

[wadehammes]

It did, sorry for late reply!