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.

[oddouu]

Thank you for bringing this to my attention! We build our app using only the nuxt build command without any special configurations.

I tried to generate the source maps locally by disabling the Sentry module, enabling source map.client in the nuxt.config.ts, building the app, and inspecting the output in the .output/public/_nuxt directory. The generated source maps are empty, and the client-side code in my components and pages isn’t being referenced in the source map files.

Something is failing during the build process when generating the sourcemap files, and I'm not sure what is causing it as no errors are reported in the build logs.

I then enabled the sourcemap.client option in a new Nuxt app using the Nuxt playground. In this scenario, the generated source maps did include the sources and sourcesContent fields.

This issue describes a similar problem. It appears to be an upstream issue with Vite, so I’m not sure if a solution is currently available.

I will investigate further and update this issue if I find any solution 🤔

[andreiborza]

Thanks for the investigation and sharing the findings here @oddouu

[oddouu]

After a deeper investigation, I discovered that upgrading the @nuxtjs/i18n module from v8.5.6 to v.9.0.0 was causing all source maps to be empty.

The strange factor is that the build doesn’t fail - the app works and is deployed correctly - the issue only affects source map files and no particular errors are thrown.

By reverting this update as a temporary workaround, only 6 out of 44 source map files remain broken, which is a significant improvement. I then uploaded new source maps, retriggered the previous error, and the code is now correctly unminified 🎉

Given these findings, I believe this issue can be closed. Hope this helps anyone else facing similar issues!