Sourcemaps and events with debug ids are not matching

[oddouu]

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

SDK Version

8.37.1

Framework Version

Nuxt 3.14.159

Link to Sentry event

https://leadsbridge.sentry.io/share/issue/ff633cd9ac384faf9b54fa7832ab5e8b/

Reproduction Example/SDK Setup

// sentry.client.config.ts

import * as Sentry from '@sentry/nuxt'
const config = useRuntimeConfig()

Sentry.init({
  enabled: !import.meta.dev,

  dsn: config.public.sentryDsn,
  environment: config.public.sentryEnvironment,
  tracesSampleRate: 0.2,

  integrations: [
    Sentry.piniaIntegration(usePinia())
  ],

  normalizeDepth: 10,

  trackComponents: true,

  replaysSessionSampleRate: 0,
  replaysOnErrorSampleRate: 0.5
})

// nuxt.config.ts (minimal)

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },

  modules: [
    '@sentry/nuxt/module',
    ...
  ],

  srcDir: 'app',

  runtimeConfig: {
    sentryAuthToken: process.env.SENTRY_AUTH_TOKEN,
    public: {
      sentryDsn: process.env.SENTRY_DSN || '',
      sentryEnvironment: process.env.SENTRY_ENVIRONMENT || ''
    }
  },

  // server side rendering mode
  ssr: false,

  // https://nuxt.com/docs/getting-started/configuration#environment-overrides
  $production: { 
    nitro: {
      sourceMap: true,
      rollupConfig: {
        output: {
          sourcemap: true
        }
      },

      awsAmplify:  { // https://nitro.build/deploy/providers/aws-amplify
        // catchAllStaticFallback: true,
        // imageOptimization: { "/_image", cacheControl: "public, max-age=3600, immutable" },
        // imageSettings: { ... },
      }
    },

    sourcemap: {
      client: true,
      server: true
    },

    /** @type {import('@sentry/nuxt/module').ModuleOptions} */
    sentry: {
      debug: true,
      sourceMapsUploadOptions: {
        enabled: process.env.NODE_ENV === 'production',
        org: 'example-org',
        project: 'example-project',
        authToken: process.env.SENTRY_AUTH_TOKEN,
        sourcemaps: {
          filesToDeleteAfterUpload: ['.*/**/*.map']
        }
      }
    },

    vite: {
      build: {
        sourcemap: true
      },
      esbuild: {
        charset: 'ascii'
      }
    },
  },
})

Steps to Reproduce

We installed the latest version of @sentry/nuxt (version 8.37.1) in our Nuxt project, which is also updated to the latest version (3.14.159). We use nuxt in full SPA mode, as we have the ssr option switched off.

We added the required configuration in the nuxt.config.ts file to enable sourcemap uploads and created the sentry.client.config.ts file.

To deploy our application, we use AWS Amplify - in particular, we use the Nitro preset for this provider: https://nitro.build/deploy/providers/aws-amplify . It works similarly to other platforms, with the particularity that the dist directory is called .amplify-hosting.

Our amplify.yml file is very simple, and it's the same one as described in the official docs. The only difference is that we use Yarn:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18 && node --version
        - corepack enable && npx --yes nypm install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - "**/*"

In the Amplify logs, we can see that the build process was successful and that the source maps were uploaded to Sentry.

In Sentry, under Settings > Organization > Project > Source Maps, the source maps are listed correctly.

Expected Result

When an error occurs, we expect Sentry to display the original, unminified source code with the correct line numbers, leveraging the uploaded source maps.

In Issue #13997 there is a similar problem, which was resolved recently by PR #14020.
Also, Issue #14029 discusses the compatibility of the Sentry Nuxt SDK with various deployment platforms.

Since I saw both an active and recent development on this subject, I thought opening a new issue might be relevant, especially since we use AWS Amplify. Please let me know if I missed anything important, and thanks for the amazing work 🙏

Actual Result

The error is shown in Sentry, but the code remains minified:

When we click on Unminify Code, it appears that a matching Debug ID is found correctly:

[andreiborza]

Hey @oddouu, could you please provide another link to an issue? We're getting 404s on those.

[oddouu]

Apologies @andreiborza , I've updated the issue link in the description with one that's working. Thanks!

[lforst]

There is a good chance that the error was sent before Sentry was able to process the sourcemap from your release. Can you try sending the error again?

This is the critical part of the modal:

[lforst]

Actually, the sourcemap you uploaded appears to be broken. There is nothing in the sources or sourcesContent field. Please make sure all build-tooling you have is generating proper sourcemaps with sources content.