Source maps shows up but in transpiled state - @sentry/nextjs

[OmkarK45]

Hi Sentry community!

I am facing an issue with our sentry setup

1. The packages
   a. @sentry/nextjs : 7.101.1 (latest at the time of writing)
   b. next : 12.3.4
   c. react : 17.0.2
   d. sentry server: self hosted sentry server : Sentry 20.11.14468076

2. Steps followed for integrating sentry in nextjs app

• I followed the @sentry/nextjs wizard for the installation

3. What's working

• When I log an exception, it reflects on the dashboard
• The source maps get uploaded during build process
• The source code .js file contains //# sourceMappingURL=something.js.map

Example source code file

The corresponding sourceMap file

4. What's not working

• When I inspect an error on sentry, it shows me in a transpiled state

/* eslint-disable @typescript-eslint/no-var-requires */

// eslint-disable-next-line import/order
const packageJson = require('./package.json');

const { dependencies } = packageJson;
const myCompanyPackages = Object.keys(dependencies).filter((str) =>
  str.startsWith('@mycompany'),
);

const { withSentryConfig } = require('@sentry/nextjs');

// Webpack Plugins
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const withTM = require('next-transpile-modules')(myCompanyPackages);

const {
  getWebpackConstants,
  getSentryReleaseName,
} = require('./webpack.constants');

/**
 * @type {import('next').NextConfig}
 * */
const baseNextConfig = {
  typescript: {
    ignoreBuildErrors: false,
  },
  images: {
    // We already handle static image import through asset modules in webpack.config.js
    disableStaticImages: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },

  outputFileTracing: false,

  webpack(config, { dev, isServer, webpack }) {
    const env = {
      DEV: dev,
    };

    const webpackEntry = config.entry;

    config.entry = async () => {
      const entries = await webpackEntry();
      return entries;
    };

    // These are just some css-loader plugins 
    const commonConfig = require('./webpack.common')(env);

    config.module.rules = config.module.rules.concat(commonConfig.module.rules);

    // We have a setup to inject variables 
    config.plugins.push(new webpack.DefinePlugin(getWebpackConstants(dev)));

    config.plugins.push(...commonConfig.plugins);


    // Is this the correct way? 
    config.devtool = 'source-map';

    // eslint-disable-next-line no-param-reassign
    config.optimization.minimize = true
    // eslint-disable-next-line no-param-reassign
    config.optimization.minimizer = [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
        terserOptions: {
          compress: {
            warnings: false,
            // screw_ie8: true,
            conditionals: true,
            drop_console: true,
            drop_debugger: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
          },
          format: {
            comments: false,
          },
        },
      }),
      new CssMinimizerPlugin(),
    ];


    return config;
  },
};

/**
 * @type {Partial<import('@sentry/nextjs/types/config/index').SentryWebpackPluginOptions>}
 * */
const sentryWebpackPluginOptions = {
  release: getSentryReleaseName(), // returns us a sentry recommended version [email protected]+1fbcbbf
  errorHandler: (err) => {
    console.error('[sentry webpack compilation]: failed with', err.message);
  },
  // We upload all source code
  include: '.next/',
  ignore: [
    '.next/cache',
    'server/ssr-module-cache.js',
    'static/*/_ssgManifest.js',
    'static/*/_buildManifest.js',
  ],
  stripPrefix: ['webpack://_N_E/'],
  urlPrefix: '~/_next',
  debug: true,
};

/**
 * @type {import('@sentry/nextjs/types/config/types').UserSentryOptions}
 * */
const sentryOptions = {
  // 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,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: false,

  hideSourceMaps: false,
};

/**
 * Nicer way to compose "with" plugins
 * Evaluated left to right
 * @param {Array<(nextConfig: import('next').NextConfig) => import('next').NextConfig>} plugins
 * @param {import('next').NextConfig} nextConfig
 * @returns {import('next').NextConfig}
 */
function withPlugins(plugins, nextConfig) {
  return plugins.reduce(
    (previousValue, currentValue) => currentValue(previousValue),
    nextConfig,
  );
}

function withSentry(nextConfig) {
  return withSentryConfig(
    nextConfig,
    sentryWebpackPluginOptions,
    sentryOptions,
  );
}

module.exports = withPlugins(
  [withBundleAnalyzer, withTM, withSentry],
  baseNextConfig,
);

🙏 Thanks in advanced

[OmkarK45]

I believe it happens because of babel-loader
Full reproduction repo: https://stackblitz.com/edit/nextjs-9xljyo

[lforst]

Especially in the terser plugin options: https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions

[OmkarK45]

Thanks for the reply, will check this and come back to you ⚡

[OmkarK45]

Okay I tried putting the sourceMap option inside terser plugin, same output :/

[lforst]

please also check your other plugins for source maps options.

[OmkarK45]

If possible can you provide some direction to debug this? So sorry to nag you but I really cannot pin-point the exact issue here.

I've tried putting sourceMap everywhere, checked the sourcemaps generated here: https://evanw.github.io/source-map-visualization/

Reproduction repo : https://stackblitz.com/edit/nextjs-9xljyo