copyedit tutorial and update screenshots

src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx

@@ -56,4 +56,4 @@ The animated gif below walks through how to create a new project in the UI.
 
 ## Next
 
-[Introduce Sentry SDK to Your Frontend Code](/product/sentry-basics/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/).

src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx

@@ -9,61 +9,65 @@ description: "Learn how to capture your 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.
 
-If you're using your own source code, you can skip this section. Instead:
-
-- Select your [platform](/platforms/) and follow its **Verify** step inside the **Getting Started** guide to introduce an error.
-- Then continue with [2. View the Error in Sentry](#2-view-the-error-in-sentry) here.
-
 ## 1. Trigger an Error
 
-Let's add in an obvious error that will be easy to see in Sentry.
+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.
 
-1. Open `src/components/App.js` and uncomment line 97
+1. Open `src/components/App.js` and uncomment line 97.
 
    ```javascript {filename:src/components/App.js}
    this.myCodeIsPerfect();
    ```
 
-   The function `myCodeIsPerfect()` isn't defined, so this will throw error.
+   The function `myCodeIsPerfect()` isn't defined, so this will throw an error.
 
-   Save the file.
+1. Save the file.
 
-1. Refresh your browser and open the browser developer console
+1. Refresh your browser and open the browser developer console.
 
    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 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.
 
-   ![Import and Configure SDK](generate-first-error-01.png)
+   <div style="position: relative; padding-bottom: calc(36.37860082304527% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/fEC5K0E8owyg5R45ePEo?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="FE Tutorial -> Checkout Demo"></iframe></div>
 
    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.
+
+      ![Import and Configure SDK](generate-first-error-01.png)
+
+   - An alert is sent to your email address configured on Sentry notifying you about an error that occurred in your app.
 
-     ![Import and Configure SDK](generate-first-error-03.png)
+      ![Alert Email](new_issue_email.png)
 
 ## 2. View the Error in Sentry
 
-1. Open up your project in [Sentry.io](https://sentry.io/).
+Now that you've triggered an error, let's see what it looks like in Sentry.
 
-2. Select the error from the Issues list to to view the full details and context of this error.
+1. Open the **Issues** page in [Sentry.io](https://sentry.io/). Make sure your project is selected in the projects dropdown.
 
-   ![Import and Configure SDK](generate-first-error-05.png)
+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/), so if you trigger this error multiple times you won't see more Issues appear in the list.
+   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.
 
 3. On the [Issue Details](/product/issues/issue-details/) page, scroll down to the stack trace.
 
-   ![Error Stack-trace](generate-first-error-06.png)
-
    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.
 
    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.
 
+### UI Walkthrough
+
+The animated gif below walks through how to view error details in Sentry.
+
+<div style="position: relative; padding-bottom: calc(52.1021021021021% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/nTTSJdR4TyqHATbVMOzA?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="FE Tutorial - View First Error"></iframe></div>
+
 ## Next
 
-[Enable Readable Stack Traces in Your Errors](/product/sentry-basics/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.

src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx

@@ -26,7 +26,7 @@ The sample application is a basic frontend-only application using React and Webp
    git clone git@github.com:<your_username>/frontend-tutorial.git
    ```
 
-1. Open the "frontend-tutorial" project in your preferred code editor.
+1. Open the `frontend-tutorial` project in your preferred code editor.
 
 ## 2. Add the Sentry React SDK
 
@@ -75,9 +75,11 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
    });
    ```
 
-   The options set in `Sentry.init()` are called the SDK's configuration. The only mandatory configuration option is the DSN. However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs.
+1. Save the file.
 
-   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.
+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.
+
+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.
 
 ## 3. Build and Run the Sample Application
 
@@ -104,12 +106,14 @@ In the `frontend-tutorial` project folder:
    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.
 
-   ![Sample app UX showing an online hardware store](generate-first-error-02.png)
+   ![Sample app UX showing an online hardware store](FE-tutorial-demo-app.png)
 
 ## Next
 
-[Capture Your First Error](/product/sentry-basics/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.

src/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx

@@ -7,35 +7,37 @@ redirect_from:
 description: "Learn how to 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 maps files can be generated by your JavaScript build tool.
+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.
 
-## Step 1: Generate Source Map Files Using Your Build Tool
+## 1. Generate Source Map Files Using Your 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.
+The sample project uses Webpack as its build tool. We'll configure it to generate source maps and check that they are output.
 
-1. To configure webpack to generate source maps, open `webpack.config.js` and uncomment line 11:
+1. To configure Webpack to generate source maps, open `webpack.config.js` and uncomment line 11:
 
    ```javascript {filename:webpack.config.js}
    devtool: "source-map",
    ```
 
-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 typing:
+1. Save the file.
+
+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
    ```
 
-   You should see a new folder in your project called "build". 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.
+   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.
 
-## Step 2: Upload Your Source Maps to Sentry
+## 2. Upload Your Source Maps to Sentry
 
-1. Install the Sentry webpack plugin
+1. Install the Sentry Webpack plugin
 
    ```bash
    npm install @sentry/webpack-plugin --save-dev
    ```
 
-1. Open `webpack.config.js` and uncomment lines 3 and lines 16-23 to add the plugin configuration to webpack.
+1. Open `webpack.config.js` and uncomment lines 3 and lines 16-24 to add the plugin configuration to Webpack.
 
    ```javascript {filename:webpack.config.js}
    const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
@@ -59,81 +61,85 @@ The sample project uses webpack as its build tool. We'll configure it to generat
    }
    ```
 
-1. Replace `<your_org>` and `<your_project>` with your Sentry organization ID and your project name.
-
-   To find your organization ID and project name values:
+1. Replace `<your_org>` with your Sentry organization slug. This is part of your Sentry URL (for example, https://<organization_slug>.sentry.io/projects/) and can also be found in the **Organization Settings** page.
 
-   - Open your Sentry account and click **Settings > Projects**.
-   - Your organization ID, is part of the browser URL (for example, https://<organization_id>.sentry.io/projects/).
-   - Your project name is the name that appears in the project tile.
+1. Replace `<your_project>` with your project's name.
 
-     ![Sentry CLI variables](upload-source-maps-011.png)
+1. Save the file.
 
 1. Create a Sentry authentication token:
 
-   - In the Organization Settings menu, click "Custom Integrations" in the left side panel under "Developer Settings".
-   - Press "Create New Integration".
-
-     ![Create Auth Token 1](upload-source-maps-04.png)
-
-   - Leave "Internal Integration" selected and press "Next".
-   - Enter a name.
-   - Under "Permissions" select "Admin" in the "Release" dropdown, and "Read & Write" in the "Organization" dropdown.
+   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".
 
-     ![Token Permissions](upload-source-maps-016.png)
+   The gif below walks through how to create an authentication token in the UI:
 
-   - Click "Save Changes".
-   - This will create a new internal Sentry integration and org-level auth token.
-   - Once the save is confirmed, scroll down to the bottom of the page and copy the token under "TOKENS".
-
-     ![Create Auth Token 2](upload-source-maps-05.png)
+   <div style="position: relative; padding-bottom: calc(51.885474860335194% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/Rw34T3RDwHxtHTKlPfJw?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="FE Tutorial -> Create Auth Token"></iframe></div>
 
 1. Paste the following into your terminal, replacing `<your_authentication_token>` with the authentication token you copied from Sentry.
 
    ```bash {filename:.env}
    export SENTRY_AUTH_TOKEN=<your_authentication_token>
    ```
 
-## Step 3: Trigger Another Error
+## 3. Trigger Another Error
 
 1. Create a fresh production build with your changes from the previous step:
 
    ```bash
    npm run build
    ```
 
-1. Notice that your terminal output provides you a "Source Map Upload Report" to confirm that your source maps were correctly uploaded to Sentry.
+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:
+
+   ```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
+   ```
 
 1. Run your production build:
 
    ```bash
    npx serve build
    ```
 
-1. Look at the build log in the terminal. Notice that the minified scripts and source maps were uploaded to the release version.
-
-   ![Release Created](upload-source-maps-07.png)
-
-1. Open the production build of the sample application in your browser
+1. Open the production build of 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.
 
-   ![Sample app UX showing an online hardware store](generate-first-error-02.png)
-
 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.
 
    ![Release Created](upload-source-maps-08.png)
 
 1. Generate the error again by adding products to your cart and clicking "Checkout".
 
-1. Open the **Issue Details** page.
+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.
 
-1. Notice that 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.
+
+<div style="position: relative; padding-bottom: calc(50.470673425054315% + 41px); height: 0; width: 100%"><iframe src="https://demo.arcade.software/h8HE2fg7lTfWCxuelAoy?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;color-scheme: light;" title="FE Tutorial -> View Readable Stack Trace"></iframe></div>
 
    ![Release Created](upload-source-maps-09.png)
 
 ## 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](/product/sentry-basics/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.