Enable uploading sourcemaps to Sentry without making them public

[msand]

Describe the feature you'd like to request

A simpler way to have sourcemaps in error tracking systems without exposing sourcemaps publicly

Describe the solution you'd like

Generate source maps but disable serving them from deployments, and a more robust / easier way to make artifacts correlate with stackframe filenames

Describe alternatives you've considered

Currently I'm using this kind of hack/solution

in next.config.js

require('dotenv').config();
const withSourceMaps = require('@zeit/next-source-maps');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const {
  APP_ENV,
  SENTRY_AUTH_TOKEN,
  SENTRY_ORG,
  SENTRY_PROJECT,
  VERCEL_GIT_COMMIT_SHA,
} = process.env;

module.exports = withSourceMaps({
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }

    if (SENTRY_AUTH_TOKEN && VERCEL_GIT_COMMIT_SHA) {
      config.plugins = [
        ...(config.plugins || []),
        new SentryWebpackPlugin({
          // sentry-cli configuration
          authToken: SENTRY_AUTH_TOKEN,
          org: SENTRY_ORG,
          project: SENTRY_PROJECT,
          release: VERCEL_GIT_COMMIT_SHA,

          // webpack specific configuration
          include: '.',
          ignore: ['node_modules', 'webpack.config.js', 'e2e'],
          stripPrefix: ['webpack://_N_E/'],
          urlPrefix: `~/_next/static/chunks`,
        }),
      ];
    }

    return config;
  },
  serverRuntimeConfig: {
    rootDir: __dirname,
    APP_ENV,
  },
  env: {
    APP_ENV,
    VERCEL_GIT_COMMIT_SHA,
  },
});

stripPrefix and urlPrefix are important here

_app.js

import getConfig from 'next/config';
if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
  const config = getConfig();
  const distDir = `${config.serverRuntimeConfig.rootDir}/.next`;

  Sentry.init({
    release: process.env.VERCEL_GIT_COMMIT_SHA,
    enabled:
      process.env.APP_ENV === 'production' || process.env.APP_ENV === 'staging',
    environment: process.env.APP_ENV || 'development',
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
    integrations: [
      new RewriteFrames({
        iteratee: (frame) => {
          frame.filename = frame.filename
            .replace(distDir, 'app:///_next')
            .replace(/\-[0-9a-f]+\.js/, '.js'); // remove hash from filenames as uploaded artifacts don't have them

          return frame;
        },
      }),
      new CaptureConsole(),
    ],
  });
}

Rewriting the stack-frame filenames is important here

And a npm script:

    "remove-maps": "rimraf ./.next/**/*.map",

This script needs to run twice after next build for some reason I haven't identified/isolated yet, otherwise sourcemaps are served publicly from vercel.

[timneutkens]

You can add a rewrite/redirect for .map:

module.exports = {
  rewrites() {
    return [
      {
         source: '/:path*.map',
         destination: '/404'
      }
    ]
  }
}

[jklmli]

Update: seems to work fine when deployed, i.e. not on my local machine. 🤷🏼

[Sparragus]

@jklmli Try this:

async rewrites() {
        const isVercel = !!process.env.VERCEL_ENV;
        if (isVercel) {
            return {
                beforeFiles: [
                    {
                        source: "/:path*.map",
                        destination: "/404",
                    },
                ],
            };
        }

        return [];
}

[jklmli]

Oh, clever!

[stegano]

In my case, a memory leak occurred when js and css files were included in the 404 page (I guess it was due to circular calls).

but I solved it by changing it as follows.
Hope this helps someone.

async rewrites() {
       return {
         beforeFiles: [
           {
             source: "/:path*.map",
             destination: "/:path*.map_",
           },
         ],
       };
     }

[thienna]

12.2.x not working :(

@jklmli Try this:

async rewrites() {
        const isVercel = !!process.env.VERCEL_ENV;
        if (isVercel) {
            return {
                beforeFiles: [
                    {
                        source: "/:path*.map",
                        destination: "/404",
                    },
                ],
            };
        }

        return [];
}