CODEWITHSUNDEEP
next.jsstack-tracesource-maps
Matt Cowley
Matt Cowley

Reputation: 2373

Next.js: Use source maps for errors during build/pre-render

Is it possible to get full stack traces for errors that are emitted from pre-rendering during build, using source maps for the generated code?

Currently, if pre-rendering a page fails during next build, the error stack trace output is from the minified code rather than the actual source of the project, making it very hard to trace errors.

Even with productionBrowserSourceMaps enabled in next.config.js, it seems that the pre-rendering still emits errors with minified stack traces which make finding the source very hard.

Upvotes: 1

Views: 2021

Answers (1)

Matt Cowley
Matt Cowley

Reputation: 2373

After a lot of digging and experimenting, yes, it seems you can!

I got proper source mapped errors logging from pre-render build errors by forcibly enabling source maps in the Webpack config being used by Next.js (only in the server context, we don't want to leak the source to the client):

// next.config.js
module.exports = {
  webpack(config, options) {
    if (options.isServer) config.devtool = 'source-map';
    return config;
  },
};

This will ensure Next.js generates the source maps for all the JS files used for the pre-render during build. To get the error stack traces to then use these, Node.js' source map support needs to be enabled when Next.js builds, which can be done by passing NODE_OPTIONS=--enable-source-maps next build.

Upvotes: 6

Related Questions