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);