---
title: "Enable Readable Stack Traces"
description: "Learn how to upload source maps to Sentry so your stack traces show real source code instead of minified output."
url: https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces/
---

# Enable Readable Stack Traces

**Step 5 of 5** (optional)

##### Optional step

You've already set up distributed tracing across your stack in the previous steps. This step is an optional enhancement — worth doing, but not required.

When you ship JavaScript to production, your code is transformed — bundled, minified, and sometimes transpiled — to make it smaller and faster in the browser. That transformation makes stack traces unreadable: instead of the line of code that failed, you see something like `a.b.c at index-J_blQJy.js:1:21834`.

Source maps are the bridge back. They tell Sentry how to map the minified output to your original source. In this step, you'll generate source maps for the frontend app, upload them to Sentry, and trigger another error to see the difference.

The sample frontend app uses [Vite](https://vite.dev/) as its build tool, and the [Sentry Vite plugin](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/vite.md) both generates source maps and uploads them as part of your production build.

> Using a different bundler? Use the [Sentry Wizard](https://docs.sentry.io/platforms/javascript/sourcemaps.md#uploading-source-maps) to configure source maps for webpack, Rollup, esbuild, Next.js, and others, then skip to step 3.

## [1. Install the Sentry Vite Plugin](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces.md#1-install-the-sentry-vite-plugin)

In the `tracing-tutorial-frontend` project folder, install the plugin as a dev dependency:

```bash
npm install @sentry/vite-plugin --save-dev
```

*Other available variations of the above snippet: yarn, pnpm*

## [2. Add an Auth Token](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces.md#2-add-an-auth-token)

To upload source maps, the plugin needs an *auth token* — a secret key that tells Sentry the upload is coming from you. You'll keep this token in a separate file instead of writing it directly into your code, so it stays private.

The Sentry Vite plugin automatically reads your token from a file named exactly `.env.sentry-build-plugin`. Create that file now:

1. In the **root** of the `tracing-tutorial-frontend` folder (the same folder that contains `package.json`), create a new file named exactly `.env.sentry-build-plugin` — including the leading dot.

2. Add your auth token to the file, using the snippet below. Replace the placeholder with the token you generated above:

   ```bash
   SENTRY_AUTH_TOKEN=<your-sentry-auth-token>
   ```

3. Save the file. The sample project's `.gitignore` already lists `.env.sentry-build-plugin`, so your token won't be committed to git — keep it that way. Auth tokens should never be shared or pushed to a repository.

## [3. Configure the Plugin](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces.md#3-configure-the-plugin)

Next, tell the plugin which Sentry **organization** and **project** to upload your source maps to. You'll need two values, both of which are *slugs* — the short, lowercase names Sentry uses in URLs.

Here's how to find each one in Sentry:

* **Organization slug**: look at your Sentry URL — it's the part right before `.sentry.io`. For example, in `https://acme-inc.sentry.io/`, the organization slug is `acme-inc`. You can also find it under **Settings > General Settings**.
* **Project slug**: in the left sidebar, go to **Settings > Projects**, then click the **frontend** project you created earlier (not the backend one). The project slug is shown at the top of that project's settings page and in the page's URL.

Now open `vite.config.js` and add `sentryVitePlugin` as shown below, replacing `<your-org-slug>` and `<your-project-slug>` with the two values you just found:

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [
    react(),
    sentryVitePlugin({
      org: "<your-org-slug>",
      project: "<your-project-slug>",
    }),
  ],
  server: {
    port: 3000,
  },
});
```

Your `org` and `project` here must point to the **same frontend project** as the DSN in `src/main.jsx`. Source maps are matched within a project — if your maps upload to one project but your errors report to another, Sentry won't be able to un-minify them.

By default, the plugin deletes the source map files from your build output after uploading them, so they're not served to your users in production.

## [4. Trigger the Error Again](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces.md#4-trigger-the-error-again)

1. Stop your dev server with `Ctrl + C` and create a production build:

   ```bash
   npm run build
   ```

   *Other available variations of the above snippet: yarn, pnpm*

   Look for the `Source Map Upload Report` in the output — it confirms the maps reached Sentry and lists each file by debug ID:

   ```bash
   > Analyzing 2 sources
   > Adding source map references
   > Bundling files for upload
   > Uploaded files to Sentry
   > Successfully uploaded source maps to Sentry
   ```

2. Serve the production build:

   ```bash
   npm run preview
   ```

   *Other available variations of the above snippet: yarn, pnpm*

3. Open the app (make sure the backend is still running on `http://localhost:3001`), open your browser's dev console, and right-click the reload button, then select 'Empty Cache and Hard Reload' so the new build is served. Then trigger the cross-project error again by clicking the **Nonfat Water** button.

4. Go to the **Issues** page in Sentry and open the new issue.

The stack trace should now include file names, function names, line numbers, and the surrounding source code — the actual code that failed, instead of minified output.

## [What's Next](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces.md#whats-next)

Congrats — you've built a fully instrumented fullstack app with Sentry, with cross-project distributed tracing and readable stack traces with source code context.

For ways to take Sentry further — Seer, Session Replay, alerts, dashboards, and more — see [What's Next](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/generate-first-error.md#next), or head to the [Platforms](https://docs.sentry.io/platforms.md) page to set up Sentry on your own project.