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.

1. Generate Source Map Files Using Your Build Tool

1. To configure webpack to generate source maps, open webpack.config.js add the following line inside of module.exports:

   JavaScript

   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.

2. Save the file.

3. 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:

   Bash

   Copied

   npm run build
   

   You should see a new build folder in your project. Inside, there should be a main.js file and a main.js.map file. main.js is your minified JavaScript. main.js.map is the source map file.

2. Upload Your Source Maps to Sentry

1. Install the Sentry webpack plugin

   Bash

   Copied

   npm install @sentry/webpack-plugin --save-dev
   

2. To generate a Sentry auth token & store it so it can be used, paste the following into your terminal:

   Bash

   .env

   Copied

   export SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE
   

3. Open webpack.config.js and add the following lines to add the plugin configuration to webpack.

   JavaScript

   webpack.config.js

   Copied

   const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
   
   ...
   
   module.exports = {
      ...
     plugins: [
         sentryWebpackPlugin({
            org: "example-org",
            project: "example-project",
            authToken: process.env.SENTRY_AUTH_TOKEN,
         }),
      ],
      ...
   }
   

4. You can find your org as part of your Sentry URL (for example, https://<organization_slug>.sentry.io/), or in the Organization Settings page.

3. Trigger Another Error

1. Create a fresh production build with your changes from the previous step:

   Bash

   Copied

   npm run build
   

2. 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:

   Bash

   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
   

3. Run your production build:

   Bash

   Copied

   npx serve build
   

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

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

   

6. Generate the error again by adding products to your cart and clicking "Checkout".

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

8. Click on the new issue to open its Issue Details page.

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

Next

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.