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.

@YashJoshi yes. via sentry-cli. You can see what I did above — Wern Ancheta
– Wern Ancheta, Commented May 3, 2021 at 1:01

Dan Levy · Accepted Answer · 2021-05-05 22:32:34Z

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.

answered May 5, 2021 at 22:32

Dan Levy

1,27311 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Rishad · Accepted Answer · 2023-09-08 04:45:57Z

0

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

answered Sep 8, 2023 at 4:45

Mohammed Rishad

1

Collectives™ on Stack Overflow

How to setup source map on Sentry

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related