with-sentry-simple source maps not showing on sentry

[a14m]

Bug report

Following the with-sentry-simple example
I couldn't get the source-maps/source code errors to report correctly to sentry (without Enable JavaScript Source Fetching enabled)

The output doesn't include the source maps or non-minified source code (as shown in the following screenshot)

Error: Sentry Integration Test
  at Q(/_next/static/n0pMAb7sGd6y3KHnKw893/pages/demo.js:1:13269)
  at Object.o(/_next/static/chunks/framework.98c1b221acb34aa9927b.js:1:11780)
  at p(/_next/static/chunks/framework.98c1b221acb34aa9927b.js:1:11923)

I have to enable the feature to get the sentry error as shown below in expected behavior)
I've tried uploading the source may using multiple different approaches but didn't manage to get anything workable

The example mentions this in the README, but doesn't include any example of how to make this work...

To Reproduce

Clone the repo
apply the following changes to 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;
  },
});

add 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 script used to upload the source-maps during build time

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" 
sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT
sentry-cli releases finalize $SENTRY_RELEASE

Configure Sentry project (with the Enable JavaScript Source Fetching disabled)

adding an example demo page that trigger an error

import * as React from "react";

function myErrorFunction() {
  console.log("Error");
  throw new Error("Sentry Integration Test");
}

const Demo = () => {
  return (
    <>
      <h1 onClick={myErrorFunction}>Hello Sentry/Next.js 👋</h1>
    </>
  );
};

export default Demo;

Expected behavior

Having an error report similar to

Error: Sentry Integration Test
  at myErrorFunction(./src/pages/demo.tsx:23:9)
  at apply(./node_modules/react-dom/cjs/react-dom.production.min.js:14:82)
  at ja(./node_modules/react-dom/cjs/react-dom.production.min.js:14:235)
  at ka(./node_modules/react-dom/cjs/react-dom.production.min.js:14:289)

System information

• OS: MacOS 10.14
• Node version: 12.6.X
• Version of Next.js: 9.3.4

Additional context

• Sentry doesn't have access to source maps in production UnlyEd/next-right-now#28
• https://stackoverflow.com/questions/61011281/next-js-source-maps-with-typescript-on-sentry
• https://leerob.io/blog/configuring-sentry-for-nextjs-apps
• https://spectrum.chat/next-js/general/with-sentry-example-manual-capturing~23515976-9ace-4f81-a7c9-91bfeac956e8

[pjaws]

I've had the same issue with Rollbar for months; however, the with-sentry-simple example worked perfectly for me.

[a14m]

I've managed to fix the issue and get the source maps working on both the server/client using the sentry webpack plugin and the following patch code (applied to the with-sentry-simple example)

index 04e6ec22..0d4da863 100644
--- a/examples/with-sentry-simple/next.config.js
+++ b/examples/with-sentry-simple/next.config.js
@@ -1,5 +1,11 @@
+// Use the hidden-source-map option when you don't want the source maps to be
+// publicly available on the servers, only to the error reporting
 const withSourceMaps = require('@zeit/next-source-maps')()
 
+// Use the SentryWebpack plugin to upload the source maps during build step
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+const { SENTRY_DNS, SENTRY_ORG, SENTRY_PROJECT } = process.env
+
 module.exports = withSourceMaps({
   webpack: (config, options) => {
     // In `pages/_app.js`, Sentry is imported from @sentry/node. While
@@ -20,6 +26,20 @@ module.exports = withSourceMaps({
       config.resolve.alias['@sentry/node'] = '@sentry/browser'
     }
 
+    // When all the Sentry configuration env variables are available/configured
+    // The Sentry webpack plugin gets pushed to the webpack plugins to build
+    // and upload the source maps to sentry.
+    // This is an alternative to manually uploading the source maps
+    if (SENTRY_DNS && SENTRY_ORG && SENTRY_PROJECT) {
+      config.plugins.push(
+        new SentryWebpackPlugin({
+          include: '.next',
+          ignore: ['node_modules'],
+          urlPrefix: '~/_next',
+        }),
+      )
+    }
+
     return config
   },
 })

I'll be working on adding these as a PR to repo

[a14m]

The issue could be much deeper using the webpack plugin, there are more files uploaded to Sentry than using the CLI

for example, the webpack plugin artifacts generated (working correctly) looks like the following

while the CLI (using sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ".next" --url-prefix "~/_next" --verbose which doesn't work correctly) look like the following

so as you can see there are some missing files in the serverless directory for example...
I think this might be a sentry CLI error

[amorriscode]

@a14m Thanks for updating the solution. I get the following error when using a Docker container: Sentry CLI Plugin: Unabled to determine version. Make sure to include release option... have you ever come across this?

[a14m]

not really but when does that happen? during build?
per the documentation

(release: optional string) unique name of a release, must be a string, should uniquely identify your release, defaults to sentry-cli releases propose-version command which should always return the correct version

maybe adding the sentry-cli to the docker file (install as a dependency would solve the issue)...
although I'm deploying through CircleCI (which doesn't have Sentry-CLI installed and I didn't run into the issue)

[amorriscode]

Got it working, was using the incorrect variable in the webpack plugin. I guess I shouldn't code at 5 am. 🤦

[williscool]

In my case it was becasue SentryWebpackPlugin was never being invoke because I didn't set all of the env variables from the example i.e. SENTRY_AUTH_TOKEN and etc.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.