Enable Readable Stack Traces in Your Errors
When creating web applications, most development workflows involve transforming your JavaScript code via transpilation and minification to make it run more efficiently in the browser. Source map files serve as a guide for tools like Sentry to convert the transformed version of your JavaScript back to the code that you wrote. Source map files can be generated by your JavaScript build tool.
The sample project uses webpack as its build tool. We'll configure it to generate source maps and check that they are output.
If your project has a different configuration, use the Sentry Wizard to configure your source maps and skip to step 3.
To configure webpack to generate source maps, open
webpack.config.js
add the following line inside ofmodule.exports
:webpack.config.js
Copied... module.exports = { entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "build"), }, devtool: "source-map", ... } ...
If you're using the sample project, you can uncomment line 11.
Save the file.
Webpack only generates source maps when you create a production build. To do so, stop your app running in develop mode with
Ctrl + C
and start a production build by running:Copiednpm run build
You should see a new
build
folder in your project. Inside, there should be amain.js
file and amain.js.map
file.main.js
is your minified JavaScript.main.js.map
is the source map file.
Install the Sentry webpack plugin
Copiednpm install @sentry/webpack-plugin --save-dev
To generate a Sentry auth token & store it so it can be used, paste the following into your terminal:
.env
Copiedexport SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE
Open
webpack.config.js
and add the following lines to add the plugin configuration to webpack.webpack.config.js
Copiedconst { sentryWebpackPlugin } = require("@sentry/webpack-plugin"); ... module.exports = { ... plugins: [ sentryWebpackPlugin({ org: "example-org", project: "example-project", authToken: process.env.SENTRY_AUTH_TOKEN, }), ], ... }
You can find your
org
as part of your Sentry URL (for example, https://<organization_slug>.sentry.io/), or in the Organization Settings page.
Create a fresh production build with your changes from the previous step:
Copiednpm run build
Confirm that your source maps were correctly uploaded to Sentry and associated with your project's latest release. Your terminal output should include a
Source Map Upload Report
, which might look like the following:Copied> Organization: <your_org> > Project: <your_project> > Release: 0d40018e21151113e224f208fb934a0d29f10508 > Dist: None > Upload type: artifact bundle Source Map Upload Report Minified Scripts ~/f320b889-aa78-4850-8625-802a2ee9aca3-0.js (sourcemap at main.js.map, debug id f320b889-aa78-4850-8625-802a2ee9aca3) Source Maps ~/f320b889-aa78-4850-8625-802a2ee9aca3-0.js.map (debug id f320b889-aa78-4850-8625-802a2ee9aca3) [sentry-webpack-plugin] Info: Successfully uploaded source maps to Sentry
Run your production build:
Copiednpx serve build
Open the production build of the sample application in your browser.
The sample app should be running at http://localhost:3000/ or the URL output in your terminal in the last step.
In your browser, make sure that the dev console is open and perform an "Empty Cache and Hard Reload" to make sure the updated code is being served.
Generate the error again by adding products to your cart and clicking "Checkout".
Go to the Issues page in Sentry. Since you added a new release, a new issue should be created even though it's the same error as before.
Click on the new issue to open its Issue Details page.
Notice that there's now a release tag for the issue and that the error stack trace is now un-minified. The stack trace now includes the file name, method name, line and column number, and source code context in every stack frame.
Now you have all the information you need about the error and a clear stack trace. To get even more value out of Sentry, Enable Suspect Commits & Stack Trace Linking so you can go directly to the code and assign the right developer to handle the issue.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").