Vercel 504 on all API routes

[saiichihashimoto]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.33.0-8.54.0

Framework Version

8.33.0-8.54.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

No matter what I do, my endpoints are all hanging with a vercel 504 error. Sometimes they come through, but rarely. It's only on /api/* routes as all my pages load, though I'm not doing any get* methods on them. When I completely remove Sentry from my codebase, everything is extremely fast and there are no errors whatsoever. It works running next dev locally, but only fails like this when deployed to vercel. All my environment variables are fine.

Steps to Reproduce

No matter what I do, my endpoints are all hanging with a vercel 504 error. Sometimes they come through, but rarely. It's only on /api/* routes as all my pages load, though I'm not doing any get* methods on them.

Expected Result

Every API shouldn't be returning a 504 error.

Actual Result

Every API shouldn't be returning a 504 error.

[s1gr1d]

Hello, thanks for writing in. Can you please provide a minimal reproduction example?

[saiichihashimoto]

Sorry, I had to rip out my Sentry integration to have a working site, so a repro would be a lift. I just followed the docs for integration Sentry/Next/Sentry with the tunneling and then had a /api/health-error that all it would do is throw an error. Instead of being a 500, it would hang for 10s+ and give a 504. All my other api routes were hanging with a 504 (including some successful ones). Even a /api/health endpoint that just returned a json blob would take a very long time. Once I took out Sentry, all these problems vanished.

[chargome]

@saiichihashimoto could you maybe share your next config file in the state that caused the issue?

[saiichihashimoto]

const { withSentryConfig: withSentryConfigRaw } = require("@sentry/nextjs");

const { flow } = require("lodash/fp");

const withBundleAnalyzer = require("@next/bundle-analyzer");

const withSentryConfig =
  (
    /** @type {import("@sentry/nextjs").SentryBuildOptions | undefined} */ sentryBuildOptions
  ) =>
  (/** @type {import('next').NextConfig} */ config) =>
    withSentryConfigRaw(config, sentryBuildOptions);

/**
 * @type {import('next').NextConfig}
 */
const config = {
  transpilePackages: ["@REDACT/*"],
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
  productionBrowserSourceMaps: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  experimental: {
    instrumentationHook: true,
    swcPlugins: [
      [
        "next-superjson-plugin",
        {
          excluded: [],
        },
      ],
    ],
  },
  headers: async () => [
    {
      source: "/assets/:asset*",
      headers: [
        {
          key: "cache-control",
          value: "public, immutable, max-age=31536000",
        },
      ],
    },
  ],
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
        port: "",
      },
    ],
  },
};

/**
 * @type {import('next').NextConfig}
 */
module.exports = flow(
  withSentryConfig({
    automaticVercelMonitors: true,
    debug: Boolean(process.env.CI),
    disableLogger: true,
    hideSourceMaps: true,
    org: REDACT,
    project: REDACT,
    silent: !process.env.CI,
    tunnelRoute: "/monitoring",
    widenClientFileUpload: true,
    reactComponentAnnotation: {
      enabled: true,
    },
  }),
  withBundleAnalyzer({
    enabled: process.env.ANALYZE === "true",
  })
)(config);

[chargome]

Not familiar with const { flow } = require("lodash/fp"); and how this is called but I would assume this might have unwanted side effects

Generally I would recommend to not alter the default export of withSentryConfig(nextConfig, sentryConfig)

[saiichihashimoto]

withSentry({...})(with bundle({....}))(config)

It's just functional programming, it effectively just calls the functions. There's no side effects.

[s1gr1d]

I am just wondering if the flow call is correct here.

It should resemble this, am I right?

withSentryConfig(
   withBundleAnalyzer({ /* Next.js config */}), 
   { /* Sentry options */ }
)

I think this would be the correct way of doing this:

module.exports = flow(
  withBundleAnalyzer({
    enabled: process.env.ANALYZE === "true",
  }),
  config => withSentryConfig(config, {
    /* Sentry options */
  })
)(config);

Maybe try to create the config without currying it. withSentryConfig is not an unary function and needs the Next.js config and the Sentry options, while withBundleAnalyzer is a unary function. But in your code snippet, you were adding them to flow in a similar way.

[chargome]

Another thing: found an old issue with next-superjson-plugin – this might also be the culprit.