Missing debug IDs in source files for self-hosted Next.js

[kylemh]

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

10.5.0

Framework Version

15.5.0

Link to Sentry event

https://capsule-corporation.sentry.io/issues/6806409879/events/e9f416df41f6410192304f5a8e74db78/

Reproduction Example/SDK Setup

https://docs.sentry.io/platforms/javascript/guides/nextjs/

I just followed this guide. Trigger errors from /sentry-example-page during dev server (with enabled: true) shows everything perfectly in Sentry, but once I deploy a self-hosted Next.js app in a Docker container with that page, the error's source code doesn't tie to the artifacts that were uploaded.

This isn't related to any new version bump. It's been like this for me since ~v9, so I imagine it's something to do with the fact that the Next.js app is self-hosted?

Steps to Reproduce

1. https://docs.sentry.io/platforms/javascript/guides/nextjs/
2. deploy self-hosted Next.js application in a Docker container
3. errors show up as unminified/uglified

Expected Result

1. https://docs.sentry.io/platforms/javascript/guides/nextjs/
2. deploy self-hosted Next.js application in a Docker container
3. errors show up with full sourcemap tracing

Actual Result

[linear]

JS-873 Missing debug IDs in source files for self-hosted Next.js

[kylemh]

For what it's worth:

next.config.ts:

import { withSentryConfig } from '@sentry/nextjs';
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'standalone',
  poweredByHeader: false,

  experimental: {
    browserDebugInfoInTerminal: true,
    clientSegmentCache: true,
    devtoolSegmentExplorer: true,
    globalNotFound: true,
  },
};

/**
 * @see https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 *
 * For all config options, see:
 * @see https://www.npmjs.com/package/@sentry/webpack-plugin#options
 */
export default withSentryConfig(nextConfig, {
  org: 'capsule-corporation',
  project: 'io-ui',

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

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

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

  /**
   * Disabled by default, unless a value is set for this option. When enabled, your app's DOM
   * will automatically be annotated during build-time with their respective component names.
   * This will unlock the capability to search for Replays in Sentry by component name, as well
   * as see component names in breadcrumbs and performance monitoring.
   */
  reactComponentAnnotation: {
    enabled: true,
  },
});

instrumentation-client.ts:

// This file configures the initialization of Sentry on the client.
// The added config 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({
  // dont run in dev server or in tests
  enabled: process.env.NODE_ENV === 'production',

  dsn: 'https://9d286a23d5942de93605ad7c77b5f857@o104208.ingest.us.sentry.io/4509377468694529',

  environment: process.env.NEXT_PUBLIC_CAPSULE_ENV || 'development',

  // Add optional integrations for additional features
  integrations: [
    /**
     * If you want an element to be masked or ignored, read the below link:
     * @see https://docs.sentry.io/platforms/javascript/session-replay/privacy/#ignoring
     */
    Sentry.replayIntegration({ maskAllInputs: false, maskAllText: false, blockAllMedia: false }),
  ],

  // 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: !!process.env.CI,
});

export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

sentry.server.config.ts (and edge):

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

Sentry.init({
  // dont run in dev server or in tests
  enabled: process.env.NODE_ENV === 'production',

  dsn: 'https://9d286a23d5942de93605ad7c77b5f857@o104208.ingest.us.sentry.io/4509377468694529',

  environment: process.env.NEXT_PUBLIC_CAPSULE_ENV || 'development',

  // Define how likely traces are sampled. 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,
});

[Lms24]

Hey @kylemh thanks for reporting! We'll take a look next week.

[kylemh]

skill issue mb