---
title: "Enable Suspect Commits & Stack Trace Linking"
description: "Learn how to integrate your source code with Sentry, so that Sentry can track commits and surface suspect commits and suggested assignees to help you resolve issues faster."
url: https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms/
---

# Enable Suspect Commits & Stack Trace Linking

This feature is only applicable for [error issues](https://docs.sentry.io/product/issues/issue-details/error-issues.md). Other categories of issues (such as [performance issues](https://docs.sentry.io/product/issues/issue-details/performance-issues.md) or [replay issues](https://docs.sentry.io/product/issues/issue-details/replay-issues.md)) do not support this feature.

Sentry uses commit metadata from your source code repositories to help you resolve your issues faster. This is done by suggesting *suspect commits* that might have introduced an error right in your **Issue Details** page. It also allows Sentry to display *suggested assignees* — the list of the authors of those commits — and suggest their assignment to resolve the issue.

Now that you've created a release, you can tell Sentry which commits are associated with this latest version of your code; this is called *commit tracking*.

## [1. Integrate Your GitHub Account and Repository](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#1-integrate-your-github-account-and-repository)

Use Sentry's GitHub integration to link your source code repository to your Sentry project. This enables Sentry to use commit metadata to help you streamline issue triaging.

1. To integrate GitHub with your Sentry org, follow the [GitHub Integration Install instructions](https://docs.sentry.io/organization/integrations/source-code-mgmt/github.md#install). Be sure to give the integration access to the appropriate repository — in this case, the `frontend-tutorial` repo you forked.

   After you've added the integration, you should be redirected to a page showing your GitHub repositories in Sentry. Verify that the right repos have been added.

2. Go to the "Code Mappings" tab.

3. Click "Add Code Mapping".

4. Fill out the information requested to add a code mapping between your Sentry project and the `frontend-tutorial` repository's `main` or `master` branch. Tell Sentry that your components live in the `src/` directory:

### [UI Walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#ui-walkthrough)

Follow along with the interactive demo below to see how to integrate your GitHub account and repository.

## [2. Set Up Commit Tracking](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#2-set-up-commit-tracking)

A *release* is a version of your code deployed to an environment. See the [Releases](https://docs.sentry.io/product/releases.md) documentation to learn more. Sentry uses releases to match up your source maps and source code. Releases can also be used to enable Sentry's [Suspect Commits](https://docs.sentry.io/product/issues/suspect-commits.md) feature.

The Sentry webpack plugin can automatically configure release information and send it to Sentry when you create a new build of your project. Let's enable this feature.

1. Go back to your `frontend-tutorial` project and stop it with `Ctrl + C`.

2. Create a Sentry auth token:

   `.env`

   ```bash
   SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
   ```

   You'll need to pass your auth token to your build command later on. We recommend storing it inside an environment variable. Auth tokens should always stay secret, so avoid storing yours inside your version control.

3. To start associating commits and releases, add the following lines of code to `webpack.config.js` in your Sentry webpack plugin config:

   `webpack.config.js`

   ```javascript
      sentryWebpackPlugin({
         org: "___ORG_SLUG___",
         project: "___PROJECT_SLUG___",
         authToken: process.env.SENTRY_AUTH_TOKEN,

         // Enable automatically creating releases and associating commits
         release: {
           create: true,
           setCommits: {
              auto: true,
           },
         },
      }),
   ```

4. Save the file.

## [3. Create a New Error and Commit](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#3-create-a-new-error-and-commit)

Now that releases are set up to track commits, tweak the error and create a new commit to verify that this works.

1. In `src/components/App.js`, edit line 97. This will make sure Sentry recognizes a new error that it can associate with the release you will create.

   `src/components/App.js`

   ```javascript
   this.myCodeIsMorePerfect();
   ```

2. Save the file.

3. Add all your changes to git with:

   ```bash
   git commit -am 'Added a new error and some other stuff'
   git push
   ```

4. Create another production build. During this process, the webpack plugin will create a new release and associate your commit to that release.

   ```bash
   npm run build
   ```

5. Run your production build:

   ```bash
   npx serve build
   ```

6. Create a new issue for Sentry by generating another error in your app. Open the URL your app is running in, add products to your cart, and click "Checkout". You should soon see a new issue in Sentry.

## [4. Verify Suspect Commits and Suggested Assignees](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#4-verify-suspect-commits-and-suggested-assignees)

Now suspect commits and suggested assignees should start appearing on the **Issue Details** page. Sentry determines these using files observed in the stack trace, authors of those files, and ownership rules.

1. Check your email for the alert about the new error. Notice that a new "Suspect Commits" section has been added to the email.

2. Click "View on Sentry" to open the **Issue Details** page.

3. Verify that the "Suspect Commits" section now points to the suspected commit that likely introduced the error. You can click on the commit link to see the actual commit details on GitHub.

4. In the right side panel, click under "Assigned To" to open the dropdown to see suggested assignees. You'll see that the author of the suspect commit is listed as a suggested assignee for this issue.

   You can assign the issue to the suggested assignee by clicking on their email. Alternatively, you can choose to assign the issue to other users or teams associated with the project.

### [UI Walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#ui-walkthrough-1)

The interactive demo below shows how to view suspect commits and suggested assignees for an issue.

## [5. Verify Release Configuration](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#5-verify-release-configuration)

Verify that releases have been configured correctly.

1. In the main panel's "Tags" section, find the `release` tag and hover over the release ID link. You should see in the popup that the release now contains commit data.

2. Click on the release ID link to open the **Release Details** page.

3. Select the "Commits" tab. Notice that release now contains the associated list of commits.

### [UI Walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#ui-walkthrough-2)

The interactive demo below shows how to view commits associated with the release.

## [6. Use Stack Trace Links](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#6-use-stack-trace-links)

Stack trace links allows you to jump from a stack trace in [sentry.io](https://sentry.io) to the corresponding file in your source code provider. This is done by matching the file path in the stack trace to the file path in your source code provider.

1. Go to the **Issue Details** page for the error you generated in the previous step.

2. Click "Tell us where your source code is" so Sentry can verify your code mapping.

3. In the popup, verify or enter the file path and the correct GitHub URL.

4. Click "Save". You should now see that the stack trace is linked to the code file in GitHub.

5. Click "Open this line in GitHub" to go directly to the line of code causing the error.

### [UI Walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#ui-walkthrough-3)

The interactive demo below walks through how to set up and view stack trace links in the UI.

## [More Information](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#more-information)

With GitHub integrated and your releases linked to your sources and commits, you can use Sentry's suspect commits, suggested assignees, and stack trace links to help you triage and resolve issues faster. To learn more about how to get the most value out of releases and integrations, check out these resources:

* [Create Release and Associate Commits](https://docs.sentry.io/product/releases/setup.md)
* [Global Integrations](https://docs.sentry.io/organization/integrations.md)

## [Next Steps](https://docs.sentry.io/product/sentry-basics/integrate-frontend/configure-scms.md#next-steps)

You should now have Sentry's error monitoring set up with source maps and suspect commits working.

On top of error monitoring, Sentry offers other features to help you detect and fix problems with your apps, like:

* [Session Replay](https://docs.sentry.io/product/explore/session-replay.md) to view a a video-like reproduction of your user sessions when errors occur.
* [Insights](https://docs.sentry.io/product/insights.md) to track application performance and errors across services.
* [Profiling](https://docs.sentry.io/product/explore/profiling.md) to get deeper level of visibility on top of traditional tracing.

As well as [Codecov](https://docs.codecov.com/docs) to give you automated code coverage reports as part of your CI/CD.