---
title: "Enable Readable Stack Traces in Your Errors"
description: "Learn how to upload source maps to enable readable stack traces in your errors."
url: https://docs.sentry.io/product/sentry-basics/integrate-frontend/upload-source-maps/
---

# 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](https://docs.sentry.io/platforms/javascript/sourcemaps.md#uploading-source-maps) to configure your source maps and skip to step 3.

## [1. Generate Source Map Files Using Your Build Tool](https://docs.sentry.io/product/sentry-basics/integrate-frontend/upload-source-maps.md#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`:

   `webpack.config.js`

   ```javascript
   ...
   module.exports = {
      entry: "./src/index.js",
      output: {
         filename: "main.js",
         path: path.resolve(__dirname, "build"),
      },
      devtool: "hidden-source-map", // Source map generation must be turned on ("hidden-source-map", "source-map", etc.)
      ...
   }
   ...
   ```

   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
   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](https://docs.sentry.io/product/sentry-basics/integrate-frontend/upload-source-maps.md#2-upload-your-source-maps-to-sentry)

1. Install the Sentry webpack plugin

   ```bash
   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`

   ```bash
   export SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
   ```

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

   `webpack.config.js`

   ```javascript
   const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

   ...

   module.exports = {
      ...
     plugins: [
         sentryWebpackPlugin({
            org: "___ORG_SLUG___",
            project: "___PROJECT_SLUG___",
            authToken: process.env.SENTRY_AUTH_TOKEN,

            sourcemaps: {
              // As you're enabling client source maps, you probably want to delete them after they're uploaded to Sentry.
              // Set the appropriate glob pattern for your output folder - some glob examples below:
              filesToDeleteAfterUpload: ["./**/*.map", ".*/**/public/**/*.map", "./dist/**/client/**/*.map"]
            }
         }),
      ],
      ...
   }
   ```

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](https://docs.sentry.io/product/sentry-basics/integrate-frontend/upload-source-maps.md#3-trigger-another-error)

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

   ```bash
   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
   > 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
   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](https://docs.sentry.io/product/sentry-basics/integrate-frontend/upload-source-maps.md#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](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md) so you can go directly to the code and assign the right developer to handle the issue.