Sentry/webpack-plugin and next-JS sourcemaps

SDKs
1

Hi,
We have a next-js app and are using the official SentryPlugin for webpack to try to process sourcemaps so sentry can correctly map them to Issues, but so far have had no luck with this. More details below.

TLDR; Has anyone had success with Next-JS and SentryPlugn and Source Maps and can point me at a solution?

Thanks,

-Michael

Our next.config.js looks like this:

if (!dev) {
  config.devtool = 'source-map'
  for (const plugin of config.plugins) {
    if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
      plugin.options.sourceMap = true
      break
    }
  }
}

if (!dev && process.env.RELEASE) {
  config.plugins.push(
    new SentryPlugin({
      release: process.env.RELEASE,
      include: './.next',
       // urlPrefix: `~/_next/${buildId}/`,
    })
  )
}

As an example, for one sample file in /pages/featureX/show.js, the sourceMappingURL looks like:

//# sourceMappingURL=show.js.map

and sentry-cli releases files RELEASE list shows:

| Name                                  |              | Source Map  
| ~/bundles/pages/featureX/show.js   |              | show.js.map     
| ~/bundles/pages/featureX/show.js.map           |              |
| ~/dist/bundles/pages/featureX/show.js         |              |                                  
| ~/dist/bundles/pages/featureX/show.js.map . |              |

And a sample stacktrace error on that page looks like:

/_next/893ef4b6-3850-479e-be15-468fc7c1cee7/page/featureX/show.js in g.e at line 1:61518

but the source map is not applied. We’ve tried various things like trying to set the urlPrefix and/or use the SourceMapDevToolPlugin from webpack to set a fileContext, but we can’t figure out the right combination or what Sentry is expecting for this all to magically work.

1 Like
2

Hi. I’ve encountered the very same problem. Have you got any updates? I’ve tried to ask somebody from Zeit on Slack, but unfortunately no one responded yet. :frowning:

3

We split out the SentryPlugin into two separate plugins. One for server and one for static like so

if (isServer && process.env.RELEASE) { config.plugins.push( new SentryPlugin({ release: process.env.RELEASE, include: './.next/server/bundles/pages', urlPrefix:~/_next/${buildId}/page, }) ) config.plugins.push( new SentryPlugin({ release: process.env.RELEASE, include: './.next/static', urlPrefix:~/_next/static, }) ) }

which helps a little. We also had to define the dataCallback function in our Raven initializer to remap the frame filename as they discuss in the SourceMap docs when using multiple files.

This got us farther. The sourcemaps are associated correctly now, but they still are not de-minimized or de-transpiled correctly in the stacktrace.

4

Thanks for the response :). After spending several days on this issue, I’ve come up to the conclusion.

The very first severe problem was, I was throwing the exception from the localhost :expressionless: . So in order to debug the issue I created a small react project composed from one minified .js file with a sourcemaps reference and one generated source map file. Then deployed the project to now.sh, threw an exception a it worked. (No source maps uploaded yet).

Similarly it worked when we generated sourcemaps for our internal nextjs project, deployed and it worked. (Still no source maps uploaded yet).

Yesterday I realised I hadn’t uploaded sourcemaps at all yet. So took the small react project once again, uploaded the sourcemaps, generated a minified .js file without a sourcemaps reference and deployed to now.sh. After throwing an exception everything worked but at this moment the sourcemaps were mapped onto the minified js file…which is not that bad at all because I could see where the exception was thrown but you know…it’s still a minified file :slight_smile:

Regarding the internal nextjs project and uploaded source maps - haven’t given a try yet. But I’m a bit sceptic it won’t work correctly because of the issue you described above. Will give a try tomorrow.

The conclusion - I’d better not to upload the sourcemaps to Sentry for a nextjs project if not necessary and simply use sourcemaps references - //# sourceMappingURL=show.js.map - created during a compilation/transpilation process.

5

Hey all!

For those still lurking looking for a good example of configuring Sentry with Next.js apps (+ source maps):

I’ve been doing a bit of digging to get Sentry configured correctly before shipping some of our apps to production. I wrote down what it takes to get a simple Sentry setup going here.

Hope this helps!

6

@lrobinson Your link is dead :confused:

7

@SOULPWRD - Your message explains exactly what I believe I’m facing in my app. How could I go about adding sourcemaps references instead of uploading the sourcemaps for a nextjs project?