javascriptnext.jssentrysource-mapsvercel

Next.js in Vercel with Sentry - ignore source maps in production


I'm deploying a Next.js app in Vercel with Sentry configuration provided by @sentry/next.js module. Here is the example repo - https://github.com/voronianski/test-next-sentry-app

It uses the official example from Next.js (e.g. https://github.com/vercel/next.js/tree/canary/examples/with-sentry).

Integration with Sentry works perfectly. However I noticed one thing that kind of bothers me. Source maps for each file are publicly available.

Here is the link to the app - https://test-next-sentry-app.vercel.app/ and here is the map file of _app.js https://test-next-sentry-app.vercel.app/_next/static/chunks/pages/_app-b2c4ce59f737104d4ac1.js.map

This leads to the completely visible project structure and source codes in the browser dev tools - dev tools screenshot

I tried to use .vercelignore file but it didn't help - https://github.com/voronianski/test-next-sentry-app/blob/main/.vercelignore

Is there a way to not deploy source map files to public in Vercel? Thanks!


Solution

  • As suggested by Vercel support - you can use rewrites option in next.config.js to achieve this -

    const nextConfig = {
      // ...
      rewrites: async () => {
        // do not leak source-maps in Vercel production deployments
        // but keep them in Vercel preview deployments with generated urls 
        // for better dev experience
        const isVercelProdDeploy = process.env.VERCEL_ENV === 'production';
    
        if (isVercelProdDeploy) {
          return {
            beforeFiles: [
              {
                source: '/:path*.map',
                destination: '/404'
              }
            ]
          };
        }
    
        return [];
      },
      // ...
    };
    
    module.exports = nextConfig;
    

    https://nextjs.org/docs/api-reference/next.config.js/rewrites