Having some trouble with sourcemaps with Next.js

[philwolstenholme]

Hi,

I'm having some trouble with sourcemaps using @sentry/nextjs": "^7.64.0".

I can see that release bundles are being created using the correct version numbers:

But sourcemaps do not show for issues:

Release tracking also does not seem to be working:

---

It feels like releases are being picked up on by the Webpack plugin but not associated with issues/events? The Sentry CLI suggests a similar cause:

❯ sentry-cli sourcemaps explain ██████████████ --org █████ --project █████
✔ Fetched data for event: ██████████████
✖ Event is missing a release name
ℹ Configure 'release' option in the SDK.
  https://docs.sentry.io/platforms/javascript/configuration/options/#release
  https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-a-release-is-configured-in-your-sdk

This used to work, but I'm not sure what changed.

Here's our next.config.js:

`next.config.js`

const cspHeaders = require('./src/utils/csp.js');

const { env: clientEnv } = require('./src/utils/public/configuration.js');

const { withSentryConfig } = require('@sentry/nextjs');
const nextBuildId = require('next-build-id');

const bundleAnalyzer = require('@next/bundle-analyzer')({
  // eslint-disable-next-line n/no-process-env
  enabled: !!process.env.BUNDLE_ANALYSE
});

//This import allows for build time checking of the public environment variables
clientEnv;

const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'no-referrer-when-downgrade'
  }
];

const allPathsHeaders = [
  {
    key: 'X-Robots-Tag',
    value: 'noindex'
  },
  {
    key: 'Content-Security-Policy',
    value: cspHeaders
  }
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  // We want prod sourcemaps for Rollbar/Sentry etc.
  productionBrowserSourceMaps: true,
  // Imperva's CDN will give us Brotli or Gzip compression, so this can take the load off the Next server:
  // @TODO: set this back to false when https://github.com/vercel/next.js/issues/48713 resolved
  compress: true,
  experimental: {
    // Disabled for now as experimental and https://github.com/vercel/next.js/issues/51286
    serverActions: false
  },
  images: {
    // Set a minimum cache TTL for images as the Azure blob storage product
    // image responses do not include a cache-control header
    minimumCacheTTL: 86400,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.ctfassets.net'
      },
      {
        protocol: 'https',
        hostname: 'rt-1-pr-euw-retailapis-end-01.azureedge.net'
      },
      {
        protocol: 'https',
        hostname: 'rt-1-dv-euw-retailapis-end-01.azureedge.net'
      },
      {
        protocol: 'https',
        hostname: 'sspayinaisledevsst02.blob.core.windows.net'
      }
    ]
  },
  headers: async () => {
    const headers = [
      {
        source: '/:path*',
        headers: [...allPathsHeaders, ...securityHeaders]
      }
    ];

    return headers;
  },
  modularizeImports: {
    lodash: {
      transform: 'lodash/{{member}}'
    }
  },
  // https://github.com/nexdrew/next-build-id
  // Base Next's build ID on Git info rather than a random string
  generateBuildId: () => nextBuildId({ dir: __dirname, describe: true }),
  webpack: (config, { webpack, buildId }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
        __SENTRY_DEBUG__: false
        // __SENTRY_TRACING__: false
      }),
      new webpack.DefinePlugin({
        'process.env.NEXT_PUBLIC_BUILD_ID': JSON.stringify(buildId),
        // eslint-disable-next-line n/no-process-env
        'process.env.NEXT_PUBLIC_NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    );

    return config;
  },
  // Remove the x-powered-by header as some pentesters/scanners consider it an
  // information disclosure.
  poweredByHeader: false,
  eslint: {
    ignoreDuringBuilds: true
  },
  transpilePackages: [
    '@sindresorhus/slugify',
    'escape-string-regexp',
    '@sindresorhus/transliterate'
  ]
};

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

    // Suppresses source map uploading logs during build
    silent: true,

    org: 'XXXXXXX',
    project: 'XXXXXXXX'
  },
  {
    // 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: false,
    // Hides source maps from generated client bundles
    hideSourceMaps: true,
    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true
  }
);

I can also copy/paste the Sentry config files if necessary.

I recently re-ran npx @sentry/wizard@latest -i sourcemaps and adapted the suggested changes to fit our existing config.

I've checked our CI settings and SENTRY_AUTH_TOKEN is set.

Let me know if there's any other info I can provide, and thanks for your time reading this. The Project ID is 4504922582482944.

[danielkhan]

Thank you for the detailed problem description, @philwolstenholme. I reached out to the team. Expect an update soon.

[lforst]

Hi, it doesn't look like you're using our Next.js SDK in the browser - that is required for everything to work. Please follow the setup guide here or even easier run the setup wizard: npx @sentry/wizard@latest -i nextjs

(I slightly recommend removing your previous Sentry setup code because something went wrong there)

[philwolstenholme]

Ah, I bet it's my attempts at minimising the client bundle size that is causing this issue. Client side errors are being reported but I imagine there's an integration that I am missing.

Does anything in this client config look like the issue to you? I'd rather not remove all my existing config, if possible:

/* eslint-disable n/no-process-env */
// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import { CaptureConsole } from '@sentry/integrations';
import {
  Breadcrumbs,
  BrowserClient,
  BrowserTracing,
  // Dedupe,
  defaultStackParser,
  FunctionToString,
  getCurrentHub,
  GlobalHandlers,
  HttpContext,
  InboundFilters,
  LinkedErrors,
  makeFetchTransport,
  showReportDialog,
  TryCatch
} from '@sentry/nextjs';

import 'requestidlecallback-polyfill';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

getCurrentHub().bindClient(
  new BrowserClient({
    // Note: if you want to override the automatic release value, do not set a
    // `release` value here - use the environment variable `SENTRY_RELEASE`, so
    // that it will also get attached to your source maps
    enabled: process.env.NODE_ENV === 'production',
    dsn:
      SENTRY_DSN ||
      '██████████████████████████████████████████',
    tracesSampleRate: 1.0,
    // Only collect replays when errors happen, otherwise we're getting into
    // Contentsquare's territory.
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 1.0,
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    ignoreErrors: [
      '@sentryIgnore',
      // Ignore a hydration error caused by this techique: https://react.dev/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content
      'https://reactjs.org/docs/error-decoder.html?invariant=418', // Hydration failed because the initial UI does not match what was rendered on the server
      // Ignore a hydration error often caused by browser extensions modifying the DOM.
      'https://reactjs.org/docs/error-decoder.html?invariant=419' // The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.
    ],
    beforeSend(event, hint) {
      // Check if it is an exception, and if so, show the report dialog
      if (event.exception && process.env.NODE_ENV !== 'development') {
        // We call Sentry's captureException in useEffects and sometimes this means multiple modals try and appear.
        // Use a timeout to make sure only the last one appears.
        if (typeof dialogShownTimeout !== 'undefined') {
          clearTimeout(dialogShownTimeout);
        }

        dialogShownTimeout = setTimeout(() => {
          showReportDialog({
            eventId: event.event_id,
            title: `Sorry, something went wrong.`,
            subtitle: `Our fault, not yours! We've logged the technical details of this error, but any information you can provide about what happened would be helpful.`,
            labelComments: `What were you trying to do when this happened?`,
            labelName: `Your name`,
            labelEmail: `Your email (optional)`,
            labelSubmit: `Send error report`
          });
        }, 250);
      }
      return event;
    },
    integrations: [
      new Breadcrumbs(),
      // new Dedupe(),
      new FunctionToString(),
      new GlobalHandlers(),
      new HttpContext(),
      new InboundFilters(),
      new LinkedErrors(),
      new TryCatch(),
      new CaptureConsole({
        levels: ['error', 'warn']
      }),
      new BrowserTracing()
    ]
  })
);

window.requestIdleCallback(async () => {
  const { Replay } = await import('@sentry/browser');

  getCurrentHub()
    .getClient()
    .addIntegration(
      new Replay({
        maskAllText: false,
        blockAllMedia: false,
        // See https://docs.sentry.io/platforms/javascript/session-replay/privacy/#masking to mask PII
        mask: ['input', 'textarea', 'select']
      })
    );
});

[lforst]

Okay, so if you want to use a custom client, setting up source maps for Next.js is gonna be quite a bit more painful:

You will have to turn off the Sentry Webpack plugin that ships with the Next.js SDK (disableClientFileUpload: true in next.config.js) and follow the guide here: https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/webpack/ (You might also need to tweak some plugin settings)

If you want the painless path I recommend ditching the custom client and just going with Sentry.init().