diff --git a/src/docs/product/sentry-basics/integrate-frontend/FE-tutorial-demo-app.png b/src/docs/product/sentry-basics/integrate-frontend/FE-tutorial-demo-app.png
new file mode 100644
index 0000000000000..e4896b8b0dc0f
Binary files /dev/null and b/src/docs/product/sentry-basics/integrate-frontend/FE-tutorial-demo-app.png differ
diff --git a/src/docs/product/sentry-basics/integrate-frontend/FE_tutorial_dev_console.png b/src/docs/product/sentry-basics/integrate-frontend/FE_tutorial_dev_console.png
new file mode 100644
index 0000000000000..d5564432ad197
Binary files /dev/null and b/src/docs/product/sentry-basics/integrate-frontend/FE_tutorial_dev_console.png differ
diff --git a/src/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx b/src/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx
index d2f14bf16ae65..6634c55933bb6 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx
@@ -4,7 +4,7 @@ sidebar_order: 5
redirect_from:
- /guides/integrate-frontend/configure-scms/
- /product/sentry-basics/guides/integrate-frontend/configure-scms/
-description: "Learn more about how Sentry uses commit metadata from your source code repositories to help you resolve your issues faster."
+description: "Learn how Sentry uses commit metadata from your source code repositories to help you resolve your issues faster."
---
@@ -13,110 +13,212 @@ Sentry uses commit metadata from your source code repositories to help you resol
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_.
-## Step 1: Integrate your GitHub account and repositories
+## 1. Integrate Your GitHub Account and Repository
-1. To integrate GitHub with your Sentry org, follow the instructions in [our GitHub documentation](/product/integrations/source-code-mgmt/github/).
+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.
-2. Add the `frontend-monitoring` repository from your GitHub account.
+1. To integrate GitHub with your Sentry org, follow the [GitHub Integration Install instructions](/product/integrations/source-code-mgmt/github/#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.
-3. Click the "Code Mappings" tab
+1. Go to the "Code Mappings" tab.
-4. Add a code mapping between the `frontend-monitoring` repository and your Sentry project and the `main` or `master` branch depending on your repository. Tell Sentry that your components live in the `src/` directory:
+1. Click "Add Code Mapping".
+
+1. 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:
-## Step 2: Set commit tracking
+### UI Walkthrough
-Now that you've set up releases in Sentry as part of your CI/CD process and integrated your source code repositories, you can associate commits from your linked repository to your releases.
+Follow along with the animated gif below to see how to integrate your GitHub account and repository.
-
+
+
+
-In the demo project, we use a `Makefile` to handle our build-related tasks. If you are not using the provided React demo code and do not have a `Makefile`, you can run the `sentry-cli` commands used in this tutorial directly from the `command line` or integrate the commands into the relevant build script.
+## 2. Set Up Commit Tracking
-
+A _release_ is a version of your code deployed to an environment. See the [Releases](/product/releases/) 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](/product/issues/suspect-commits/) feature.
-1. Open the `Makefile` in your project.
+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.
-2. Add the following target at the bottom of the file:
+1. Go back to your `frontend-tutorial` project and stop it with `Ctrl + C`.
- ```bash
- associate_commits:
- sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) set-commits --auto $(REACT_APP_RELEASE_VERSION)
+1. To start associating commits and releases, add the following lines of code to `webpack.config.js` in your Sentry Webpack plugin config:
+
+ ```javascript {filename:webpack.config.js}
+ sentryWebpackPlugin({
+ org: "",
+ project: "",
+
+ // Auth tokens can be obtained by creating an internal integration
+ // at https://.sentry.io/settings/developer-settings/
+ // and need "Release: Admin" and "Organization: Read & Write" permissions
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+
+ // Enable automatically creating releases and associating commits
+ release: {
+ create: true,
+ setCommits: {
+ auto: true,
+ },
+ },
+ }),
```
- > The command associates commits with the release. The _auto_ flag automatically determines the repository name, and associates commits between the previous release’s commit and the current head commit with the release.
+1. Save the file.
-3. The new target, `associate_commits`, will be invoked as part of the `setup_release` target. Add it at the end:
+## 3. Create a New Error and Commit
- ```bash
- setup_release: create_release upload_sourcemaps associate_commits
+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.
+
+ ```javascript {filename:src/components/App.js}
+ this.myCodeIsMorePerfect();
```
- Your `Makefile` should look like this:
+1. Save the file.
- 
+1. Add all your changes to git with:
-4. If your terminal is still serving the demo app on localhost, press `^C` to shut it down.
+ ```bash
+ git commit -am 'Added a new error and some other stuff'
+ git push
+ ```
-5. Build, serve, and restart the project on your localhost by running:
+1. 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 deploy
+ npm run build
```
-> In the terminal log, notice that the `sentry-cli` identified the GitHub repository.
+1. Run your production build:
+
+ ```bash
+ npx serve build
+ ```
-
+1. Create a new issue for Sentry by generating another error in your app. Open the URL your app is running is, add products to your cart, and click "Checkout". You should soon see a new issue in Sentry.
-## Step 3: Suspect commits and suggested assignees
+## 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. Refresh the browser and generate an error by adding products to your cart and clicking "Checkout".
+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. Check your email for the alert about the new error. Notice that a new "Suspect Commits" section has been added to the email.
+ 
- 
+1. Click "View on Sentry" to open the **Issue Details** page.
-3. Click "View on Sentry" to open the **Issue Details** page.
+1. 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 main area of the page, notice the "SUSPECT COMMITS" section now points to a commit that most likely introduced the error. You can click on the commit button to see the actual commit details on GitHub.
+1. 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.
-5. In the right side panel, under "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.
- You can assign the suggested assignee to the issue by clicking on the icon. However, in this case, the commit originates in the repository upstream, and the suggested assignee is not part of your organization. Alternatively, you can manually assign the issue to other users or teams assigned to the project.
+### UI Walkthrough
-6. Click on the "ASSIGNEE" dropdown and select one of the project users or teams.
+The gif below shows how to view suspect commits and suggested assignees for an issue.
- 
+
+
+
-7. In the main area of the page, under "TAGS", find the `release` tag and **hover over** the "i" icon.
+## 5. Verify Release Configuration
-8. In the popup that appears, notice the release now contains the commit data.
+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.
-9. Click on the release "i" icon to open the **Release Details** page.
+1. Click on the release ID link to open the **Release Details** page.
-10. Select the "Commits" tab. Notice that release now contains the associated list of commits.
+1. Select the "Commits" tab. Notice that release now contains the associated list of commits.
- 
+### UI Walkthrough
-## Step 4: Using Stack Trace Links
+The gif below shows how to view commits associated with the release.
+
+
+
+
+
+## 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. If the code mapping is set up correctly, in the stack trace you should see a link with "Open this line in GitHub":
+1. Click "Tell us where your source code is" so Sentry can verify your code mapping.
+
+1. In the popup, verify or enter the file path and the correct GitHub URL.
+
+1. Click "Save". You should now see that the stack trace is linked to the code file in GitHub.
+
+1. Click "Open this line in GitHub" to go directly to the line of code causing the error.
+
+### UI Walkthrough
+
+The gif below walks through how to set up and view stack trace links in the UI.
- 
+
+
+
## 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](/product/releases/setup/)
- [Global Integrations](/product/integrations/)
+
+## 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](/product/session-replay/) to view a a video-like reproduction of your user sessions when errors occur.
+- [Performance Monitoring](/product/performance/) to track application performance and errors across services.
+- [Profiling](/product/profiling/) 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.
diff --git a/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx b/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx
index 757d43a3564f6..3d4b8791f00c8 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx
@@ -4,78 +4,56 @@ sidebar_order: 1
redirect_from:
- /guides/integrate-frontend/create-new-project/
- /product/sentry-basics/guides/integrate-frontend/create-new-project/
-description: "Learn more about creating a Sentry project and how it allows you to scope events to a distinct application in your organization and assign responsibility and ownership to specific users and teams within your organization."
+description: "Learn how to create a Sentry project and how it allows you to scope events to a distinct application in your organization and assign responsibility and ownership to specific users and teams within your organization."
---
-In this tutorial, you create a new _project_ in your Sentry account. Projects allow you to scope events to a distinct application in your organization and assign responsibility and ownership to specific users and teams within your organization. You can create a project for a particular language or framework used in your application. For example, you might have separate projects for your API server and frontend client. For more information see [best practices for creating projects](/product/accounts/getting-started/#4-create-projects)
+This section walks you through how to create a new project in your Sentry account. You need to have a project set up in Sentry in order to capture errors and other events.
-## Step 1: Create the project
+_Projects_ allow you to scope events to a distinct application in your organization and assign responsibility to specific users and teams. You can create a project for a particular language or framework used in your application. For example, you might have separate projects for your API server and frontend client. For more information, see [best practices for creating projects](/product/accounts/getting-started/#4-create-projects).
-1. Log in to your [Sentry organization](https://sentry.io).
-
-1. Select **Projects** from the left side navigation menu to display the list of all your projects.
-
-1. Click on the "+ Create Project" button.
-
- 
-
- > If there are no projects in your account, you might be redirected to the onboarding wizard to create your first project.
-
- - Select the language or framework for your project based on the code you wish to monitor — in this case, "React".
-
- - Under "Set your default alert settings", select "I'll create my own alerts later".
-
- - Give the project a name in the "Project name" field.
-
- - Assign a team to the project by selecting one in the "Team" dropdown.
+## Create a Project
- 
+Follow the steps below to create a new Sentry project for a sample React application:
- > If you haven't defined any teams, you can either select the default org team (the team that has the same name as your Sentry org) or click on the "+" button to create a new team.
-
- 
-
- - Click "Create Project". This takes you to the configuration page. Read through the quick Getting Started guide.
-
-1. Copy the "DSN" key and keep it handy as you will be copying the key into the source code. You can also find this information any time in **[Project] > Settings > Client Keys (DSN)**.
-
- 
-
- > The DSN (or Data Source Name) tells the SDK where to send the events, associating them with the project you just created.
-
-1. Click on the "Got it!" button at the bottom to create the project.
-
-## Step 2: Create an alert rule
+1. Log in to your [Sentry organization](https://sentry.io).
-You can create various [alert rules](/product/alerts-notifications/alerts/) for each project and let Sentry know when, how, and whom you want to notify when errors occur in your application. _Alert rules_ consist of _conditions_ and _actions_, which are performed when the associated conditions are met. When creating a new project, you can choose to create it with an alert rule that notifies all project team members (by email) the first time a new _issue_ appears. This means that the next time a **similar error** occurs, the notification is not triggered since the error is not "new".
+1. Select **Projects** from the left side navigation menu to display the list of all your projects.
-In this step, you create a new alert rule that notifies **every time** an event occurs, even if it's associated with an already existing issue. In a real-life scenario you'd probably add additional conditions, as you wouldn't want to be notified every time an event happens in your frontend code on your end user's browsers.
+1. Click "Create Project" and configure it as appropriate for your application:
-1. Select **Alerts** in the left side menu.
+- **Choose your platform**: Select the language or framework for your project based on the code you wish to monitor. In this case, choose **React**.
-1. Click "Create Alert".
+- **Set your alert frequency**: For the purpose of this tutorial, select **Alert me on every new issue**.
- 
+ > If you're wary of alert fatigue, learn more about how to set up your alerts in [Alerts Best Practices](/product/alerts/best-practices/).
- > If your project isn't already selected, you'll be prompted to do that before you start rule setup.
+- **Name your project and assign it a team**: Name your project in the **Project name** field and assign a team by selecting one in the **Team** dropdown (or click **+** to create a new team).
-1. Select "Issues" as the alert type and click "Set Conditions".
+- Click **Create Project**. This takes you to the quick Configure React SDK guide, which provides an overview of how to configure the SDK. This tutorial covers the SDK setup in more detail.
- 
+1. Copy the DSN key and keep it handy. Each project has a unique DSN (Data Source Name). The DSN tells the SDK where to send events, so events are associated with the right project. You'll need to paste the DSN key into your source code later so the errors generated in this tutorial go to your new project.
-1. Enter the following values:
+ > You can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**.
- - In the "Environment" field, select "All Environments"
- - Enter "Alerts on All Events" in the "Alert name" field
- - Under "THEN" conditions, select "Send notification to Suggested Assignees, Team, or Member", and then "Team" in the dropdown list that's displayed; select your team
- - Set the action interval to five minutes
+1. Click **Take me to Issues** to go to your new project's **Issues** page.
- 
+### UI Walkthrough
- > The new alert rule notifies the selected team members every time _an event is captured_ in _All Environments_. By default, the notification will be sent by email, but you can change your team notification settings in the "Notifications" tab of **Settings > Teams > [Team]**.
+The animated gif below walks through how to create a new project in the UI.
-1. Click "Save Rule" to create the new rule.
+
+
+
## Next
-[Introduce Sentry SDK to Your Frontend Code](/guides/integrate-frontend/initialize-sentry-sdk/)
+Now that you have a Sentry project set up, you can [Add the Sentry SDK to Your Project](/product/sentry-basics/integrate-frontend/initialize-sentry-sdk/).
diff --git a/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx b/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx
index 3606a71ca7be4..d0573547a8743 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx
@@ -4,58 +4,92 @@ sidebar_order: 3
redirect_from:
- /guides/integrate-frontend/generate-first-error/
- /product/sentry-basics/guides/integrate-frontend/generate-first-error/
-description: "Learn more about capturing your first error."
+description: "Learn how to capture your first error."
---
-Now that the demo app is up and running on your local environment integrated with the Sentry SDK, you're ready to generate the first error.
+Now that the sample app is up and running on your local environment integrated with the Sentry SDK, you're ready to generate the first error.
-
+## 1. Trigger an Error
-If you're not using the provided React demo code, follow [the Verification step](/platforms/javascript/#verify) to introduce an error to your source code and then continue with [Step 2](#step-2-handle-the-error) here.
+To start using Sentry's error monitoring feature, you need some errors first. Let's add in an obvious error that will be easy to see in Sentry.
-
+If you're using your own source code, skip this step. Instead, select your [platform](/platforms/) and follow its **Verify** step inside the **Getting Started** guide to introduce an error.
-## Step 1: Capture your first event
+1. Open `src/components/App.js` and uncomment line 97.
-1. Launch the demo app by opening the [localhost link](http://localhost:5000) in your browser.
+ ```javascript {filename:src/components/App.js}
+ this.myCodeIsPerfect();
+ ```
-2. Open the browser's "Console" to verify that an error has occurred.
+ The function `myCodeIsPerfect()` isn't defined, so this will throw an error.
- 
+1. Save the file.
-3. Click on any of the "Buy!" buttons to add products to your shopping cart.
+1. Refresh your browser and open the browser developer console.
-4. Click the "Checkout" button on the right panel to generate an error.
+ The app is running in develop mode, so the change to your app should work after a refresh. You shouldn't see any errors in the console yet.
- 
+1. Click on any of the "Buy!"" buttons to add products to your shopping cart.
+
+1. Click the "Checkout" button on the right panel to generate an error.
+
+
+
+
Notice that:
- - An error message "Something went wrong" displays in the app
- - The error appears in the browser console
- - An alert is sent to your email address configured on Sentry notifying you about an error that occurred in your app
+ - An error message "Something went wrong" displays in the app.
+ - The error appears in the browser console.
+
+ 
+
+ - An alert is sent to your email address configured on Sentry notifying you about an error that occurred in your app.
+
+ 
+
+## 2. View the Error in Sentry
- 
+Now that you've triggered an error, let's see what it looks like in Sentry.
-## Step 2: Handle the error
+1. Open the **Issues** page in [Sentry.io](https://sentry.io/). Make sure your project is selected in the projects dropdown.
-1. Go to your email and open the notification from Sentry.
+2. Select the error from the issues list to to view the full details and context of this error.
- 
+ Note that Sentry aggregates similar errors (events) into one [Issue](/product/issues/). If you trigger this error multiple times, you won't see more issues appear. Instead, you'll see the number of events for that issue increase.
-2. Click "View on Sentry" to view the full details and context of this error in your Sentry account.
+3. On the [Issue Details](/product/issues/issue-details/) page, scroll down to the stack trace.
- 
+ Notice that the stack trace is _minified_. JavaScript is typically minified to reduce to the size of the source code. This means you can't see the actual lines of code from your app in the stack trace.
- > Note that Sentry aggregates similar errors (events) into one _issue_.
+ With a little configuration, Sentry can unminify your code back to its readable form and display your source code in each stack frame. You'll set this up in the next section.
-3. In your account, scroll down to the "Exception" stack trace.
+### UI Walkthrough
- 
+The animated gif below walks through how to view error details in Sentry.
- - Notice that the stack trace is _minified_. JavaScript is typically minified to reduce to the size of the source code.
- - Sentry can unminify the code back to its readable form and display source (code) context lines in each stack frame, which is covered in the next section.
+
+
+
## Next
-[Enable Readable Stack Traces in Your Errors](/guides/integrate-frontend/upload-source-maps/)
+At this point, you've verified that Sentry is monitoring errors for your app. So you know there's an issue, but where do you go to fix it? In the next section, you'll learn how to [Enable Readable Stack Traces in Your Errors](/product/sentry-basics/integrate-frontend/upload-source-maps/) so Sentry can show you exactly which line in which file is causing the issue.
diff --git a/src/docs/product/sentry-basics/integrate-frontend/index.mdx b/src/docs/product/sentry-basics/integrate-frontend/index.mdx
index 57996a517516b..04e81a5f61d0c 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/index.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/index.mdx
@@ -4,28 +4,25 @@ sidebar_order: 30
redirect_from:
- /guides/integrate-frontend/
- /product/sentry-basics/guides/integrate-frontend/
-description: This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. You can follow this tutorial as a reference and apply the relevant changes directly to your source code.
+description: This step-by-step tutorial walks you through the flow of setting up Sentry for a frontend application. You can follow this tutorial as a reference and apply the relevant changes directly to your source code.
---
-This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. After completing this tutorial, you can:
+This step-by-step tutorial walks you through setting up Sentry in a React project to monitor errors in a frontend application. After completing this tutorial you'll be able to:
- Receive alerts when errors occur in your code
-- Receive a readable stack trace with source code context
-- View suspect commits and suggested assignees based on commit information and stack trace
+- View a readable stack trace with source code context
+- View suspect commits and suggested assignees based on commit information and stack traces
+- View user [Session Replays](/product/session-replay/)
+- Explore basic [Performance Monitoring](/product/performance/) data for your app
-
-
-We provided the source code for a sample React application to use along with this guide. This allows us to streamline the steps required to getting the maximum value out of integrating Sentry into your development workflow.
-
-
-
-Alternatively, you can follow this tutorial as a reference and apply the relevant changes directly to your source code.
+This tutorial uses a [sample React application](https://github.com/getsentry/frontend-tutorial). You can follow along with the provided sample code or apply the same steps to your own project.
## Prerequisites
- A [Sentry](https://sentry.io) account, or [sign up](https://sentry.io/signup/) for one
- A [GitHub](https://github.com/) account, or [sign up](https://github.com/join) for one
+- [Node 18+](https://nodejs.dev/en/learn/how-to-install-nodejs/)
## Next
-[Create a Sentry Project](/guides/integrate-frontend/create-new-project/)
+[Create a Sentry Project](/product/sentry-basics/integrate-frontend/create-new-project/)
diff --git a/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx b/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx
index 849618a065a8a..45a22e4db2d6b 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx
@@ -1,96 +1,119 @@
---
-title: Introduce Sentry SDK to Your Frontend Code
+title: Add the Sentry SDK to Your Project
sidebar_order: 2
redirect_from:
- /guides/integrate-frontend/initialize-sentry-sdk/
- /product/sentry-basics/guides/integrate-frontend/initialize-sentry-sdk/
-description: "Learn more about integrating the Sentry SDK with your frontend codebase."
+description: "Learn how to ads the Sentry SDK to your frontend codebase."
---
-In this tutorial, you import the React demo code into your local development environment, add the Sentry SDK, and initialize it.
+This section walks you through how to import the sample application into your local development environment, add the Sentry SDK, and initialize it.
-
+If you're using your own source code, you can skip this section. Instead:
-If you're using your own source code, you can skip this section and either:
+- Select your [platform](/platforms/) and follow its **Getting Started** guide to add the Sentry SDK to your code.
+- Then, skip to the [next step](/guides/integrate-frontend/generate-first-error/).
-- Follow the instructions on [Getting Started](/platforms/) for your platform. You can select the desired platform.
-- Go directly to the [next step](/guides/integrate-frontend/generate-first-error/).
+## 1. Clone the Sample Application
-
+The sample application is a basic frontend-only application using React and Webpack.
-## Prerequisites
+1. Fork the [sample application's repository](https://github.com/getsentry/frontend-tutorial) on GitHub.
-The demo app source code requires a NodeJS development environment to install and run the application. Make sure that you have the following in place:
+1. Clone the forked repository to your local environment:
-- [Node and NPM](https://nodejs.org/en/)
-- [NVM](https://github.com/nvm-sh/nvm)
-
-## Step 1: Get the code
-
-1. Open the "frontend-monitoring" sample [code repository](https://github.com/sentry-tutorials/frontend-monitoring) on GitHub.
+ ```bash
+ git clone git@github.com:/frontend-tutorial.git
+ ```
-2. Click "Fork" and select the target GitHub account you wish this repository to be forked in to.
+1. Open the `frontend-tutorial` project in your preferred code editor.
- 
+## 2. Add the Sentry React SDK
-3. Once the fork is complete, click "Clone or download", and copy the repository HTTPS URL.
+Sentry captures data by using a platform-specific SDK that you add to your application's runtime. To use the SDK, import and configure it in your source code. This demo project uses [Sentry's React SDK](https://github.com/getsentry/sentry-javascript/tree/develop/packages/react).
- 
+1. Install the Sentry React SDK using NPM.
-4. Clone the forked repository to your local environment.
+ Make sure you're in the `frontend-tutorial` project folder.
```bash
- > git clone
+ npm install --save @sentry/react
```
-5. Now that the sample code is available locally, open the "frontend-monitoring" project in your preferred code editor.
+1. Import and initialize the SDK.
-## Step 2: Install the SDK
+ Open `src/index.js` and add the following lines of code below the last import statement:
-Sentry captures data by using a platform-specific SDK within your application runtime. To use the SDK, import and configure it in your source code. The demo project uses React and Browser JS. The quickest way to get started is by using the CDN hosted version of the JavaScript browser SDK, however, you can NPM install the [browser SDK](/platforms/javascript/install/npm/) as well.
+ ```javascript {filename:src/index.js}
+ import * as Sentry from "@sentry/react";
-1. Open the `index.html` file (located under `_./frontend-monitoring/public/_`).
+ Sentry.init({
+ dsn: "",
+ integrations: [new Sentry.BrowserTracing({}), new Sentry.Replay()],
- 
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for performance monitoring.
+ tracesSampleRate: 1.0,
- > Notice that we import and initialize the SDK as early as possible in our code. When initializing the SDK, we provide the desired configuration. The only mandatory configuration option is the **DSN** key, however, the SDK supports multiple other configuration options. Learn more in our [Configuration documentation](/platforms/javascript/configuration/).
+ // Capture Replay for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ });
+ ```
-2. In the Sentry SDK configuration, enter the `DSN` key value you copied from the project created in the [previous steps](#step-1-get-the-code).
+ It's important to import and initialize the SDK as early as possible in your application's lifecycle so Sentry can capture errors throughout the lifecycle.
- ```javascript
+1. Add your DSN key to the Sentry SDK configuration.
+
+ Paste in the DSN key value you copied from the project created in the [previous section](/product/sentry-basics/integrate-frontend/create-new-project/).
+
+ ```javascript {filename:src/index.js}
Sentry.init({
- dsn: "",
+ dsn: "",
+ // ...
});
```
-## Step 3: Install and run the demo app
+1. Save the file.
+
+The options set in `Sentry.init()` are called the SDK's configuration. The only required configuration option is the DSN. However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs.
-To build and run the demo application on your localhost:
+The configuration above enables Sentry's error monitoring feature, as well as its [Performance](/platforms/javascript/guides/react/performance) (tracing) and [Session Replay](/platforms/javascript/guides/react/session-replay) features.
-1. Open a shell terminal and change directory to the `frontend-monitoring` project folder.
+## 3. Build and Run the Sample Application
-2. Use the `.nvmrc` file to set the Node version compatible with this project. Run:
+In the `frontend-tutorial` project folder:
+
+1. Install project dependencies.
```bash
- > nvm use
+ npm install
```
-3. Install project dependencies by running:
+1. Start the application in develop mode.
```bash
- > npm install
+ npm start
```
-4. Build, deploy, and run the project on your localhost by running:
+ Once the application starts, you'll see a confirmation message similar to this one in your terminal:
```bash
- > npm run deploy
+ [webpack-dev-server] Project is running at:
+ [webpack-dev-server] Loopback: http://localhost:3000/
+ ...
+ webpack 5.87.0 compiled successfully in 1306 ms
```
- 
+ > **Troubleshooting tip**: If the application fails to start due to syntax errors or errors for missing dependencies/modules, make sure you're using Node 18+ and install dependencies again. Run `nvm use 18` and then `npm install`.
+
+1. Open the sample application in your browser.
+
+ The sample app should be running at [http://localhost:3000/](http://localhost:3000/) or the URL output in your terminal in the last step.
- > Once the deploy finishes successfully, you'll see the confirmation in your terminal.
+ 
## Next
-[Capture Your First Error](/guides/integrate-frontend/generate-first-error/)
+At this point, you have a sample React app running with the Sentry SDK initialized. Next, [Capture Your First Error](/product/sentry-basics/integrate-frontend/generate-first-error/) to start using Sentry's error monitoring feature.
diff --git a/src/docs/product/sentry-basics/integrate-frontend/issue_email_suspect_commits.png b/src/docs/product/sentry-basics/integrate-frontend/issue_email_suspect_commits.png
new file mode 100644
index 0000000000000..598359f1dffb0
Binary files /dev/null and b/src/docs/product/sentry-basics/integrate-frontend/issue_email_suspect_commits.png differ
diff --git a/src/docs/product/sentry-basics/integrate-frontend/new_issue_email.png b/src/docs/product/sentry-basics/integrate-frontend/new_issue_email.png
new file mode 100644
index 0000000000000..8868525d5d6ad
Binary files /dev/null and b/src/docs/product/sentry-basics/integrate-frontend/new_issue_email.png differ
diff --git a/src/docs/product/sentry-basics/integrate-frontend/suggested_assignees.png b/src/docs/product/sentry-basics/integrate-frontend/suggested_assignees.png
new file mode 100644
index 0000000000000..b8b9a4ebba501
Binary files /dev/null and b/src/docs/product/sentry-basics/integrate-frontend/suggested_assignees.png differ
diff --git a/src/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx b/src/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx
index 19a9aebd09957..bcd094989ae96 100644
--- a/src/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx
+++ b/src/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx
@@ -4,169 +4,178 @@ sidebar_order: 4
redirect_from:
- /guides/integrate-frontend/upload-source-maps/
- /product/sentry-basics/guides/integrate-frontend/upload-source-maps/
-description: "Learn more about enabling readable stack traces in your errors."
+description: "Learn how to enable readable stack traces in your errors."
---
-A _release version_ is a dynamic identifier that changes whenever you ship a new version of your code. When you give Sentry information about your releases, you unlock several features, including source mapping of minified JavaScript stack traces upon ingestion. Learn more in our [Releases documentation](/product/releases/).
-In this section, you will:
+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.
-1. Use the Sentry CLI **during the build process** to update your Sentry account by:
+The sample project uses Webpack as its build tool. We'll configure it to generate source maps and check that they are output.
- - Creating a new release version
- - Uploading the project's latest source maps (and associate them with the new release version)
+If your project has a different configuration, use the [Sentry Wizard](/platforms/javascript/sourcemaps/#uploading-source-maps) to configure your source maps and skip to step 3.
-2. Add the release version to the Sentry SDK configuration. This will associate any error captured by the SDK in our app to this specific release. Sentry will use the release's uploaded source maps to unminify the error's stack trace.
+## 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`:
-As part of the CI/CD workflow for this app demo, we're using a `Makefile` to handle the `sentry-cli` related tasks through `make` targets. If you're using a different code base, you can still apply the settings and commands described below to your specific setup or run them directly in a command-line shell as part of your build process. Learn more in our [Command Line Interface documentation](/product/cli/).
-
-
-
-## Step 1: Prepare the build environment
+ ```javascript {filename:webpack.config.js}
+ ...
+ module.exports = {
+ entry: "./src/index.js",
+ output: {
+ filename: "main.js",
+ path: path.resolve(__dirname, "build"),
+ },
+ devtool: "source-map",
+ ...
+ }
+ ...
+ ```
-We use the `Makefile` in the `frontend-monitoring` project to handle Sentry related tasks using the `sentry-cli`. The CLI is already available through the project dependencies (see `package.json`) and requires several parameters to be available to run.
+ If you're using the sample project, you can uncomment line 11.
-1. Open the `Makefile`.
+1. Save the file.
-2. Uncomment the commented environment variables `SENTRY_AUTH_TOKEN` , `SENTRY_ORG`, and `SENTRY_PROJECT` (remove the leading `#`).
+1. 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
+ ```
-3. To find the `SENTRY_ORG` and `SENTRY_PROJECT` values:
+ 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.
- - Open your Sentry account and click **Settings > Projects**.
- - Your organization ID, or the `SENTRY_ORG` value is part of the browser URL (for example, https://sentry.io/settings/**SENTRY_ORG**/projects/).
- - The `SENTRY_PROJECT` value is the name that appears in the project tile.
+## 2. Upload Your Source Maps to Sentry
- 
+1. Install the Sentry Webpack plugin
- - Copy the values and paste them in the `Makefile`.
+ ```bash
+ npm install @sentry/webpack-plugin --save-dev
+ ```
-4. To create a `SENTRY_AUTH_TOKEN`:
+1. Open `webpack.config.js` and add the following lines to add the plugin configuration to Webpack.
- - Click "Developer Settings" in the left side panel to create a new integration and org-level auth token.
- - Click on "New Internal Integration".
+ ```javascript {filename:webpack.config.js}
+ const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
- 
+ ...
- - Enter a name.
- - Under "Permissions" select "Admin" in the "Release" dropdown, and "Read & Write" in the "Organization" dropdown.
+ module.exports = {
+ ...
+ plugins: [
+ sentryWebpackPlugin({
+ org: "",
+ project: "",
- 
+ // Auth tokens can be obtained by creating an internal integration
+ // at https://.sentry.io/settings/developer-settings/
+ // and need "Release: Admin" and "Organization: Read & Write" permissions
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ }),
+ ],
+ ...
+ }
+ ```
- - Click "Save Changes".
- - Once the save is confirmed, scroll down to the bottom of the page and copy the allocated token under "TOKENS".
+ If you're using the sample project, you can uncomment lines 3 and lines 16-24.
- 
+1. Replace `` with your Sentry organization slug. This is part of your Sentry URL (for example, https://.sentry.io/projects/) and can also be found in the **Organization Settings** page.
- - Paste the token in the `Makefile`.
+1. Replace `` with your project's name.
-5. The `Makefile` should look like this:
+1. Save the file.
- 
+1. Create a Sentry authentication token:
-## Step 2: Create a release and upload source maps
+ 1. Go to **Organization Settings**.
+ 1. In the left side panel, under "Developer Settings", click "Custom Integrations".
+ 1. Click "Create New Integration".
+ 1. Select "Internal Integration".
+ 1. Click "Next".
+ 1. Name your integration.
+ 1. Under "Permissions", for "Release", select "Admin" from the dropdown.
+ 1. Under "Permissions", for "Organization", select "Read & Write" from the dropdown.
+ 1. Click "Save Changes". This will create a new internal Sentry integration and org-level auth token.
+ 1. Once the save is confirmed, scroll down to the bottom of the page and copy the token under "TOKENS".
-Now we can invoke the `sentry-cli` to let Sentry know we have a new release, and then upload the project's source maps to it.
+ The gif below walks through how to create an authentication token in the UI:
-- You can set a custom release version to suit your naming conventions or let the Sentry CLI propose a version.
-- To build the `frontend-monitoring` project, we use the `react-scripts` package that also generates source maps under `./build/static/js/`.
+
+
+
-1. In the `Makefile`, add a new environment variable for the release version, using Sentry CLI to propose the version value:
+1. Paste the following into your terminal, replacing `` with the authentication token you copied from Sentry.
- ```bash
- REACT_APP_RELEASE_VERSION=`sentry-cli releases propose-version`
+ ```bash {filename:.env}
+ export SENTRY_AUTH_TOKEN=
```
-2. At the bottom of the `Makefile`, paste the following targets using the Sentry CLI to:
+## 3. Trigger Another Error
- - Create a new release entity in your Sentry account
- - Upload the project's source maps to the new release
+1. Create a fresh production build with your changes from the previous step:
```bash
- create_release:
- sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(REACT_APP_RELEASE_VERSION)
-
- upload_sourcemaps:
- sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files $(REACT_APP_RELEASE_VERSION) \
- upload-sourcemaps --url-prefix "~/static/js" --validate build/static/js
- ```
-
- The Makefile contains a `setup_release` target that is invoked from the `package.json` file when you run `$ npm run deploy` to build and run the project. We'll use this target to invoke all the release related tasks.
-
-3. Replace the existing `setup_release` with:
-
- ```shell
- setup_release: create_release upload_sourcemaps
+ npm run build
```
- Your `Makefile` should look like this:
-
- 
-
- Now that you've created a release version, you can associate any errors captured in your app to that release through the SDK.
-
-4. Open the `index.html` file and add a new configuration option to the SDK. Assign the release version environment variable to the `release` key.
+1. 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:
- ```javascript
- Sentry.init({
- dsn: "",
- release: "%REACT_APP_RELEASE_VERSION%",
- });
+ ```bash
+ > Organization:
+ > 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
```
- > Note that the release version environment variable is set in the `project.json` during build time and is injected into the generated markup.
-
-## Step 3: Try your changes — generate another error {#step-3-try-your-changes-----generate-another-error}
-
-1. If your terminal is still serving the demo app on localhost, click `^C` to shut down the local server.
-
-2. Build, deploy, and rerun the project by running:
+1. Run your production build:
- ```
- > npm run deploy
+ ```bash
+ npx serve build
```
- > A `Makefile` is generally unforgiving when it comes to indentation. If you're getting unexpected errors while running the above command, make sure the `sentry-cli` commands are properly prefixed with a tab.
+1. Open the production build of the sample application in your browser.
-3. Look at the terminal log. Notice that the minified scripts and source maps were uploaded to the release version.
+ The sample app should be running at [http://localhost:3000/](http://localhost:3000/) or the URL output in your terminal in the last step.
- 
-
-4. 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.
+1. 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.
-5. Generate the error again by adding products to your cart and clicking "Checkout".
-
-6. Check your Email for the alert about the new error and click "View on Sentry" to open the **Issue Details** page.
+1. Generate the error again by adding products to your cart and clicking "Checkout".
-7. Notice that:
+1. 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.
- - The event is now tagged with the `Release ID`.
- - The error stack trace is now un-minified and includes the file name, method name, line and column number, and source code context in every stack frame.
+1. Click on the new issue to open its **Issue Details** page.
- 
+1. 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.
-## Step 4: Explore the release
-
-Creating a release version and uploading the source maps through the Sentry CLI, creates a `Release` entity in your Sentry account.
-
-1. In [sentry.io](https://sentry.io), click "Releases" in the left side panel. Notice that a new release version was created:
-
- 
-
-2. Click on the release and you'll see that the error in your app has been associated with this release and is listed as a "New Issue".
-
- 
-
-3. Click on the "Artifacts" tab, and notice the minified resources and source maps are available for this release and are used to source map stack traces.
-
- 
+
+
+
## Next
-Now that we have all the information we need about the error and a clear stack trace, the next thing is to assign the right developer to handle it.
-
-[Enable Suspect Commits](/guides/integrate-frontend/configure-scms/)
+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](/product/sentry-basics/integrate-frontend/configure-scms/) so you can go directly to the code and assign the right developer to handle the issue.
diff --git a/src/gatsby/plugins/gatsby-remark-terms/index.js b/src/gatsby/plugins/gatsby-remark-terms/index.js
index d25180bfba675..26e5f585c01e5 100644
--- a/src/gatsby/plugins/gatsby-remark-terms/index.js
+++ b/src/gatsby/plugins/gatsby-remark-terms/index.js
@@ -17,6 +17,9 @@ const TERMS = {
'In search, a key-value pair or raw search term. Also, a value used for authorization.',
tracing:
'The process of logging the events that took place during a request, often across multiple services.',
+ project:
+ 'Represents your service in Sentry and allows you to scope events to a distinct application.',
+ DSN: 'The Data Source Name (DSN) key tells the Sentry SDK where to send events, ensuring they go to the right project.',
};
function escapeRegExp(str) {