How to setup source map on Sentry

Question

I'm using Sentry for error reporting on the React app that I created.

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'm using Laravel mix for compiling. The webpack.mix.js looks like this:

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .version();

I tried using sourceMaps() like so:

const productionSourceMaps = true;

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .react("resources/js/checkout/DonationRoot.js", "public/js")
  .version()
  .sourceMaps(productionSourceMaps, "source-map")

But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:

//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600

But when I pretty print it still results in the same gibberish:

I'm expecting to see it point out to the component file I'm working on locally. Is that possible?

Update

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

And it pretty much did the same thing:

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

Moreira

Hey, wern are you uploading the source map on Sentry ? – Doi

@YashJoshi yes. via sentry-cli. You can see what I did above – Moreira

Answer 1

I've run into this before.

IIRC the trick was finding the correct devtool WebPack option.

I can't remember exactly, but I think I used eval-cheap-module-source-map or eval-source-map.

Jorgejorgensen

Answer 2

i also have this same issue i was spended two days on it but finally i fixed this issue is with my source map path give the path like this sentry-cli sourcemaps upload --release=release-name -o projectname./build/static and after this command you need run another command also sentry-cli sourcemaps upload --release=release -o org orgname-p projectname ./build/static --url-prefix '~/static' keep in mind whenever you running build command you need to remove the source maps from sentry and reupload the source maps again hope you got it,please feel free to ask anydoubts

Radicel