How to configure source map for Sentry

Hello. I'm using Sentry for error reporting for a React app.

The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:

I tried installing Sentry's webpack plugin:

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

let config = {
  output: {
    publicPath: "/",
    chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
  },
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: "MY_AUTH_TOKEN",
      org: "MY_ORG",
      project: "MY_PROJECT",
      release: "MY_RELEASE",

      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    }),
  ],
};

Used the same release when initializing Sentry on my source file:

Sentry.init({
  dsn: "MY_DSN",
  release: "testing",
});

Put some failing code:

useEffect(() => {
  console.bog("MY_RELEASE");
}, []);

Then compiled like usual:

npm run production

I triggered the error on the browser and I got the expected file in there (MobilePayment.js):

But from Sentry, all I get is this:

I would expect to find MobilePayment.js in there but there's none. When compiling, I got this:

So I assume it uploaded the sources to Sentry.

I even tried the same thing using Sentry-cli:

sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js

Here's the output:

I then triggered the same error. But I still got the same output from Sentry dashboard.