with-sentry-simple source maps not showing on sentry

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

• https://github.com/UnlyEd/next-right-now/issues/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

[amorriscode]

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

[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.