Sourcemaps "missing context line" in Next.js app

[dxu]

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

7.105.0

Framework Version

14.0.3

Link to Sentry event

https://accend-sp.sentry.io/issues/5046269118/events/d6ad0707f740416b803fe1510cdee8af/?project=4506250741678080

SDK Setup

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

module.exports = withSentryConfig(
  module.exports,
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true
    org: "accend-sp",
    project: "javascript-nextjs",
  },
  {
    // 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,

    // Transpiles SDK to be compatible with IE11 (increases bundle size)
    transpileClientSDK: true,

    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
    tunnelRoute: "/monitoring",

    // 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.
    // See the following for more information:
    // https://docs.sentry.io/product/crons/
    // https://vercel.com/docs/cron-jobs
    automaticVercelMonitors: true,
  },
);

sentry.client:

// 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({
  dsn: ...,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

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

  replaysOnErrorSampleRate: 1.0,

  // 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,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    Sentry.replayIntegration({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

// sentry.server

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

Sentry.init({
  dsn: ...,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

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

Steps to Reproduce

Some of the events have correct sourcemaps, while a few do not, and I'm struggling to figure out why.

The codebase is a next.js app. It contains both client side and server side rendered components, with react. I also use typescript, with these configs:

{
  "compilerOptions": {
    // source maps for sentry
    "sourceMap": true,
    "inlineSources": true,
    // Set `sourceRoot` to  "/" to strip the build path prefix from
    // generated source code references. This will improve issue grouping in Sentry.
    "sourceRoot": "/",

...

Expected Result

I would expect there to be sourcemaps.

Actual Result

using sourcemaps explain gives me the following:

⚠ DEPRECATION: `sourcemaps explain` has drifted from how sourcemap processing actually operates and its output may not be accurate. It will be removed in a future version of `sentry-cli`.
✔ Fetched data for event: d6ad0707f740416b803fe1510cdee8af
✔ Event has release name: 5258f0317c226c522166c6fb0be87df5ca7d1822
✔ Event has a valid exception present
✔ Event has a valid stacktrace present
⚠ Exception is already source mapped and first resolved frame points to:

> [missing context line]

[Lms24]

Hey @dxu if you use the "Unminify Code" button on the stack frame, you can debug why there are no resolved sources within the Sentry UI:

If I do this for your case, I find that the file name within the stack frames doesn't match your uploaded source maps files. Can you check if there was a source map generated for this file? Some frameworks are unfortunately a bit inconsistent with emitting source maps.

Edit: Also worth noting, an upcoming change in v8 (#10978) should increase the likelihood of source maps being correctly matched to the stack traces. However, the core requirement still is that the source map is actually emitted by the bundler.

[dxu]

Thanks for the reply @Lms24! Sorry if this is a basic question, but how do I know whether or not the source map was "emitted"?

After building locally, I can see the source map generated for that specific file (see screenshot):

Is the issue here that somehow this is not being uploaded? I am trying to look through the "Artifact Bundles", but I don't seem to see it anywhere in any of the artifact bundles associated with the "release value"

[Lms24]

how do I know whether or not the source map was "emitted"?

Exactly as you suspected - if you can see the file in your file system, it was "emitted" by the bundler.

Hmm yes, I think this file is not being uploaded. If you add debug: true to your withSentryConfig, do you get any warnings or errors in your log output?

// next.config.js
module.exports = withSentryConfig(yourNextConfig, {
  // your sentry webpack plugin options,
  debug: true,
});