NextJS Partial Absolute Path Match for Sourcemap

[ramsaysewell]

Context:
Next: 12.2.2
Deployment: Bitbucket Pipeline upload to EC2 Instance
@sentry/nextjs: 7.50.0

next.config.js

const nextConfig = {
  experimental: {
    outputStandalone: true,
  },
  productionBrowserSourceMaps: true,
  sentry: {
    widenClientFileUpload: true,
  },
  compress: false,
  future: { webpack5: true },
  swcMinify: true,
  ...
}

module.exports = withSentryConfig(
  nextConfig,
  {
    // Suppresses source map uploading logs during build
    silent: false,

    org: "-------",
    project: "--------",
  },
  {
    // 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,


    // Hides source maps from generated client bundles
    hideSourceMaps: false, // defaults to true

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

sentry.client.config.js

Sentry.init({
  release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
  tracesSampleRate: 0.2,
  ignoreTransactions: ['/api/health-check'],
})

Issue

Exception stack trace

"raw_stacktrace": {
 "frames": [
  {
   "function": "u",
   "filename": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "abs_path": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "lineno": 67,
   "colno": 3568,
   "in_app": true
  },
  {
   "function": "r",
   "filename": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "abs_path": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "lineno": 67,
   "colno": 3335,
   "in_app": true
  },
  {
   "function": "Object.throw",
   "filename": "app:///_next/static/chunks/main-d062dfcca8bd8549.js",
   "abs_path": "app:///_next/static/chunks/main-d062dfcca8bd8549.js",
   "lineno": 1,
   "colno": 11685,
   "in_app": false
  },
  {
   "filename": "app:///_next/static/chunks/main-d062dfcca8bd8549.js",
   "abs_path": "app:///_next/static/chunks/main-d062dfcca8bd8549.js",
   "lineno": 1,
   "colno": 11580,
   "in_app": false
  },
  {
   "filename": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "abs_path": "app:///_next/static/chunks/pages/_app-1c5a266f68273eb9.js",
   "lineno": 29,
   "colno": 55822,
   "in_app": true
  }
 ]
},

I have verified and the sourcemaps live and are accessible at https://{domain}/_next/static/chunks/... so I wonder if it's an issue with the rewriting of the filename and/or abs_path but I'm unsure. I would really appreciate some guidance on what the stacktrace should look like and how to get it into that correct form.

I'll add any additional information if requested or if I come across anything that could be of use.

Edit

Here's a copy/paste of what happens when I use sentry-cli sourcemaps explain <id>

✔ Fetched data for event: e830e1230aad48c4a805b80c1aec91ea
✔ Event has release name: 2.0.1
✔ 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]

Edit 2

Here's a copy/paste of what happens having just ran sentry-cli sourcemaps explain --force <id>

Fetched data for event: e830e1230aad48c4a805b80c1aec91ea
✔ Event has release name: 2.0.1
✔ Event has a valid exception present
✔ Event has a valid stacktrace present
⚠ Exception is already source mapped, however 'force' flag was used. Moving along.
✔ Artifact ~/_next/static/chunks/pages/_app-313defd3d4284af1.js found.
✔ Release artifact distribution matched. Event: [none], Artifact: [none]
✔ Successfully fetched ~/_next/static/chunks/pages/_app-313defd3d4284af1.js file metadata from the server.
✔ Found source map location: _app-313defd3d4284af1.js.map
✔ Resolved source map url: ~/_next/static/chunks/pages/_app-313defd3d4284af1.js.map
✔ Artifact ~/_next/static/chunks/pages/_app-313defd3d4284af1.js.map found.
✔ Release artifact distribution matched. Event: [none], Artifact: [none]
✔ Successfully fetched ~/_next/static/chunks/pages/_app-313defd3d4284af1.js.map file from the server.
✔ Sourcemap position resolves to:
      if (n === "Map" || n === "Set") return Array.from(n);
      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
        return _arrayLikeToArray(o, minLen);
    }

✔ Source Maps should be working fine. Have you tried turning it off and on again?

To confirm, I'm still not seeing any difference in sentry's event UI and it's still showing the "Partial Absolute Path Match" error.

[lforst]

Do you have a link to the event that is not properly source mapped?

[ramsaysewell]

Have sent you the link privately.

[lforst]

Ok the issue seems to be that you have 900+ artifacts stored in your release. This is quite a bit and to protect our own infrastructure we limit how many artifacts we process.

You probably have release: "2.0.1" somewhere in your next.config.js or the SENTRY_RELEASE environment variable set. I recommend you switch this value up now and then (or completely unset it - we will automatically detect one for you) because right now you're bombarding this one release with source maps.

An alternative solution would be to set cleanArtifacts: true in the webpack plugin options (the second argument of withSentryConfig). Keep in mind that this will delete previously uploaded artifacts from the release.

[ramsaysewell]

Thanks @lforst I've given this a try and it's now showing an error for Absolute Path Match. Should I be transforming the abs_path to somehow fix this?

[lforst]

You shouldn't have to do anything in particular to get sourcemaps working - it should just work™️. :)

I think you might still have an old app deployed somewhere that still has the old file names. I really recommend you vary your release name for each build instead of using cleanArtifacts - this can easily be achieved by just not setting a release value.