Sentry starts sourcemap uploads before NextJS build is finished

[jrandeniya]

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.27.0

Framework Version

Next 14.2.7, React 18.3.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

The @sentry/nextjs plugin seems to be upload the sourcemaps before the build finishes, therefore sourcemaps are missing:

[18:08:00.159] 
[18:08:01.168]   ▲ Next.js 14.2.7
[18:08:01.168]   - Experiments (use with caution):
[18:08:01.168]     · instrumentationHook
[18:08:01.168] 
[18:08:01.248]    Creating an optimized production build ...
[18:08:01.908] [@sentry/nextjs - Node.js] Debug: Release injection disabled via `release.inject` option. Will not inject release.
[18:08:01.968] [@sentry/nextjs - Node.js] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[18:08:38.834] [@sentry/nextjs - Node.js] Debug: Could not determine source map path for bundle: /vercel/path0/.next/server/chunks/4518.js - Did you turn on source map generation in your bundler?
[18:08:39.015] [@sentry/nextjs - Node.js] Debug: Could not determine source map path for bundle: /vercel/path0/.next/server/chunks/569.js - Did you turn on source map generation in your bundler?
[18:08:39.517] [@sentry/nextjs - Node.js] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: /vercel/path0/.next/server/server-reference-manifest.js
[18:08:45.354] > Found 130 files
[18:08:45.404] > Analyzing 130 sources
[18:08:45.665] > Adding source map references
[18:08:52.111] > Bundled 130 files for upload
[18:08:52.111] > Bundle ID: 6a256cf8-196d-5e92-8edd-28d51ae661d3
[18:08:54.985] > Uploaded files to Sentry
[18:08:55.194] > File upload complete (processing pending on server)
[18:08:55.194] > Organization: XXX
[18:08:55.194] > Project: XXX
[18:08:55.194] > Release: 835964adfc06c9df63c3bb8f5aa2793f7161c652
[18:08:55.194] > Dist: None
[18:08:55.195] > Upload type: artifact bundle
[18:08:55.197] 
[18:08:55.197] Source Map Upload Report
[18:08:55.197]   Scripts
... (removed sourcemaps)
[18:08:55.198]     ~/386a00e4-d930-440f-932e-c4745618f3d3-54.js (sourcemap at 7603.js.map, debug id 386a00e4-d930-440f-932e-c4745618f3d3)
[18:08:55.198]     ~/388eb39e-5ace-444b-bad9-d862c4741100-47.js (no sourcemap ref, debug id 388eb39e-5ace-444b-bad9-d862c4741100)
[18:08:55.198]       **- warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/388eb39e-5ace-444b-bad9-d862c4741100-47.js)**
[18:08:55.215] [@sentry/nextjs - Node.js] Info: Successfully uploaded source maps to Sentry
[18:09:03.953] [@sentry/nextjs - Edge] Debug: Release injection disabled via `release.inject` option. Will not inject release.
[18:09:03.992] [@sentry/nextjs - Edge] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[18:09:07.999] [@sentry/nextjs - Edge] Debug: Could not determine source map path for bundle: /vercel/path0/.next/server/chunks/4518.js - Did you turn on source map generation in your bundler?
[18:09:08.063] [@sentry/nextjs - Edge] Debug: Could not determine source map path for bundle: /vercel/path0/.next/server/chunks/569.js - Did you turn on source map generation in your bundler?
[18:09:08.609] [@sentry/nextjs - Edge] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: /vercel/path0/.next/server/interception-route-rewrite-manifest.js
[18:09:08.749] [@sentry/nextjs - Edge] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: /vercel/path0/.next/server/server-reference-manifest.js

Then after heaps of upload logs as above (see timestamps) then Vercel prints:

[18:09:53.722]    Collecting page data ...
[18:10:00.048]    Generating static pages (0/21) ...
[18:10:06.422]    Generating static pages (5/21) 
[18:10:08.922]    Generating static pages (10/21) 
[18:10:12.882]    Generating static pages (15/21) 
[18:10:13.539]  ✓ Generating static pages (21/21)

Steps to Reproduce

Ran the npx @sentry/wizard@latest -i nextjs with the recommended configuration for each step and updated some basic config:

sentry.client.config.ts

// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  enabled: process.env.NODE_ENV !== "development",

  dsn: "https://....",

  // Add optional integrations for additional features
  integrations: [
    Sentry.replayIntegration(),
    Sentry.replayCanvasIntegration(),
  ],

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Define how likely Replay events are sampled.
  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // Define how likely Replay events are sampled when an error occurs.
  replaysOnErrorSampleRate: 1.0,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});

Expected Result

Sourcemaps to be uploaded after the NextJS build is complete.

Actual Result

Sourcemaps are uploaded while the build is still in progress and in Sentry, errors do not have sourcemaps:

[lforst]

Hi, something feels off. Sentry does upload your source maps 2-3 times during the build. Once for the server, once for the client, and maybe once for the edge runtime code.

This means that it is perfectly normal to see upload logs in the middle of your build.

Can you share a Sentry event where source mapping didn't work and also your next.config.js thanks!

[jrandeniya]

Hi @lforst , thank you for the quick reply.

How would you like me to share the Sentry event? Is there any particular export/screenshot I can get for you?

This is my next.config.js:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "XXX",
        port: "",
      },
    ],
  },
};

// Injected content via Sentry wizard below
const config = withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: "XXX",
  project: "XXX",

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,
  debug: !!process.env.CI,

  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true,
  },

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,
});

module.exports = {
  ...config,
  experimental: {
    ...config.experimental,
    instrumentationHook: true,
  },
};

This is the other tab in tracking the sourcemaps on Sentry:

[lforst]

@jrandeniya Simply sharing a link to the event here would be fine!

Side-note: I recommend not mutating the config in any meaningful way after wrapping it in withSentryConfig.

[lforst]

Oh nevermind, I just spotted somthing that is very much critical. Can you try throwing a different error than a Syntax Error?

[jrandeniya]

Hi @lforst ,

This was a type-error that happened somewhere in the code (sendDisplayChangedCallback is not part of my codebase, so I'd say its a library/package I am using) but I'd expect the stack trace to still be there (Event ID: ff392ddd677842ab998121568ae7632d):

When I explicitly throw an error, then it works well (Event ID: ba049c2284274c1d95e3f5a7f75663f2):

[jrandeniya]

This is also only for client-side errors. API errors are annotated properly and I get the stack trace:

[jrandeniya]

I have also updated my next.config.js as per your suggestion:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "XXX",
        port: "",
      },
    ],
  },
};

// Injected content via Sentry wizard below
module.exports = withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: "XXX",
  project: "XXX",

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,
  debug: !!process.env.CI,

  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true,
  },

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,
});

[jrandeniya]

@lforst I'm not sure what's changed... I haven't changed anything actually but looks like its coming through now. It was the same config as before when I got the sendDisplayChangedCallback error but this one has the correct trace error:

[lforst]

Cool! It sometimes takes us a while to process your sourcemaps before we can use them to unminify your errors. We might have run into that.

[jrandeniya]

Thanks @lforst I'll keep an eye on it. So after each deployment, it might take some for errors to get the stack trace?

[lforst]

@jrandeniya no, once an error has been ingested by Sentry, it either has one or it doesn't. There is no retroactive sourcemapping. It just may take a while (max few minutes) after you do a release that Sentry has processed your sourcemaps to apply those sourcemaps to your incoming errors.

[markoleavy]

Hi @jrandeniya. Do you still get debug messages like 'Could not determine source map path for bundle:' or ' Could not determine debug ID from bundle..' at build time? I'm experiencing the same issue on Vercel.

[ReDev1L]

I have exactly same issue on Vercel @lforst

import withBundleAnalyzer from "@next/bundle-analyzer"
import {withSentryConfig} from "@sentry/nextjs"
import createJiti from "jiti"
import {fileURLToPath} from "node:url"

const jiti = createJiti(fileURLToPath(import.meta.url))
const withVercelToolbar = (
  await import("@vercel/toolbar/plugins/next")
).default()
jiti("./lib/env")

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    ppr: "incremental",
    // reactCompiler: true,
    staleTimes: {
      dynamic: 30,
    },
    serverActions: {
      bodySizeLimit: "512mb",
    },
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  skipTrailingSlashRedirect: true,

}

const bundleAnalyzerConfig = {
  enabled: process.env.ANALYZE === "true",
}

const sentryConfig = {
  automaticVercelMonitors: true,
  disableLogger: true,
  hideSourceMaps: true,
  org: "",
  project: "",
  reactComponentAnnotation: {
    enabled: true,
  },
  silent: !process.env.CI,
  tunnelRoute: "/monitoring",
  widenClientFileUpload: true,
}

const headers = async () => [
  {
    headers: [
      {
        key: "Document-Policy",
        value: "js-profiling",
      },
    ],
    source: "/:path*",
  },
]


const composedConfig = withBundleAnalyzer(bundleAnalyzerConfig)(
  withSentryConfig(withVercelToolbar(nextConfig), {
    ...sentryConfig,
    telemetry: false,
    headers,
  }),
)
export default composedConfig

sentry.io/issues/5979306185/?project=4507742455398400