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. To configure webpack to generate source maps, open webpack.config.js add the following line inside of module.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.

  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:

    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.

  1. Install the Sentry webpack plugin

    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:

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

    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.

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

    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:

    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:

    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.

    Release Created

  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.

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.

Help improve this content
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").