Next.js source maps with typescript on Sentry

[a14m]

I have a simple setup for a project that imitates the Next JS sentry (simple) example

The problem is without sentry Enable JavaScript source fetching feature on, I cannot get the source maps to report correctly to sentry
example:

with the Enable JavaScript source fetching it shows correctly
example (of the same error):

Here is the configuration files used:

// next.config.js
const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

// Package.json => "@zeit/next-source-maps": "^0.0.4-canary.1",
const withSourceMaps = require("@zeit/next-source-maps")({ devtool: "source-map" });

module.exports = withSourceMaps({
  target: "serverless",
  env: {
    // Will be available on both server and client
    // Sentry DNS configurations
    SENTRY_DNS: process.env.SENTRY_DNS,
  },
  poweredByHeader: false,

  webpack(config, options) {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
    config.resolve.plugins.push(new TsconfigPathsPlugin());
    config.node = {
      // Fixes node packages that depend on `fs` module
      fs: "empty",
    };

    if (!options.isServer) {
      config.resolve.alias["@sentry/node"] = "@sentry/browser";
    }

    return config;
  },
});

The src/pages/_app.tsx and src/pages/_error.tsx follow the example mentioned in the repo.

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "paths": {
      "@src/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@services/*": ["./src/services/*"],
      "@utils/*": ["./src/utils/*"]
    },
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "sourceRoot": "/",
    "strict": true,
    "target": "es6",
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules",
    "cypress",
    "test",
    "public",
    "out"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "compileOnSave": false
}

The source maps are uploaded to sentry during CI build process
Using this script (after next build and next export)

configure-sentry-release.sh
#!/bin/bash
set -eo pipefail

# Install Sentry-CLI
curl -sL https://sentry.io/get-cli/ | bash

export SENTRY_ENVIRONMENT="production"
export SENTRY_RELEASE=$(sentry-cli releases propose-version)

# Configure the release and upload source maps
echo "=> Configure Release: $SENTRY_RELEASE :: $SENTRY_ENVIRONMENT"
sentry-cli releases new $SENTRY_RELEASE --project $SENTRY_PROJECT
sentry-cli releases set-commits --auto $SENTRY_RELEASE
sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ".next" --url-prefix "~/_next" --rewrite --verbose --validate
sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT
sentry-cli releases finalize $SENTRY_RELEASE

I can verify that the source maps are uploaded to sentry (for each build -example log below-)

> Uploading release files...
████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  705.36KB/1.94MB (1s)
> Uploaded release files to Sentry
⠉ Processing files...
> File upload complete

Source Map Upload Report
  Scripts
    ~/_next/serverless/init-server.js
    ...

  Minified Scripts
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/_app.js (sourcemap at _app.js.map)
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/_error.js (sourcemap at _error.js.map)
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/demo.js (sourcemap at demo.js.map)
    ~/_next/static/chunks/197995f92d745b3a51d3953ff2ea94e090adaecd.d1e174b5998c49a0d977.js (sourcemap at 197995f92d745b3a51d3953ff2ea94e090adaecd.d1e174b5998c49a0d977.js.map)
    ~/_next/static/chunks/commons.9c904bb4eb4d53773228.js (sourcemap at commons.9c904bb4eb4d53773228.js.map)
    ... 
    
  Source Maps
    ~/_next/serverless/init-server.js.map
    ~/_next/serverless/on-error-server.js.map
    ~/_next/serverless/pages/_error.js.map
    ~/_next/serverless/pages/demo.js.map
    ~/_next/serverless/pages/index.js.map
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/_app.js.map
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/_error.js.map
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/demo.js.map
    ~/_next/static/47Aa7MafJzmEcVJNWA4bF/pages/index.js.map
    ~/_next/static/chunks/197995f92d745b3a51d3953ff2ea94e090adaecd.d1e174b5998c49a0d977.js.map
    ~/_next/static/chunks/commons.9c904bb4eb4d53773228.js.map
    ~/_next/static/chunks/e0ca91372c9e149dc8f34f7036de617325b55cb2.bffb6f5b8a05970a450a.js.map
    ...
Finalized release ad7f6d0e6dfd7412c6443356521c2a7e183e631f.

Is there anyway to get the source maps to work with sentry (without the Enable JavaScript source fetching and without leaving the source map publicly available on the server)?

[toltarisa]

Hi @a14m did you solved the issue ?

[a14m]

yeah check #11701 it fixes the example (to work with sentry for static websites, but doesn't work with nodejs -there is an issue on nodejs and source maps- )

[Oikio]

I do have a problem with nodejs sourcemaps, client works fine. @a14m any luck with this issue?

[a14m]

no, didn't need it so far, but will check it in an upcoming project... please keep me posted if you managed to find a solution

[Oikio]

Some update, I had same problem with Next node debugging in vscode, sourcemaps didn't match. But something has changed in last version.

I've tried https://github.com/microsoft/vscode-js-debug with latest 9.5 version of Next and in most cases it worked, even with setting breakpoints in other monorepo packages, so my project is in /absolute-path/projects/monorepo/packages/project.

Here is my ugly launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "attach:journal:client",
      "port": 9222,
      "webRoot": "${workspaceFolder}/",
      "sourceMaps": true,
      "restart": true,
      "resolveSourceMapLocations": ["**/*"],
      "sourceMapPathOverrides": {
        "webpack://?:*/*": "${workspaceFolder}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:////absolute-path/projects/monorepo/node_modules/@monorepo-projects-namespace/*": "${workspaceFolder}/../*",
        "webpack://_N_E//absolute-path/projects/monorepo/node_modules/@monorepo-projects-namespace/*": "${workspaceFolder}/../*"
      }
    },
    {
      "type": "pwa-node",
      "request": "attach",
      "name": "attach:journal:server",
      "port": 9229,
      "sourceMaps": true,
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "resolveSourceMapLocations": ["**/*"],
      "sourceMapPathOverrides": {
        "webpack://?:*/*": "${workspaceFolder}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:////absolute-path/projects/monorepo/node_modules/@monorepo-projects-namespace/*": "${workspaceFolder}/../*"
      }
    }
  ]
}

I will check Sentry with new version later, maybe these changes might affect production source maps. I haven't looked through changes related to sourcemaps generation in latest version of Next, yet.

UPD: with Chrome's node and client debugger it worked fine since v9.4.
UPD2: Looks like production bundle hasn't changed for node with 9.5, but now I have broken sourcemaps on client...