Content updates to tracing walkthrough

Alex Krawiec · Alex Krawiec · commit c9e15aec1a0f · 2024-10-08T15:36:21.000-07:00
diff --git a/docs/product/sentry-basics/distributed-tracing/create-new-project.mdx b/docs/product/sentry-basics/distributed-tracing/create-new-project.mdx
@@ -1,10 +1,10 @@
 ---
-title: Create a Sentry Project
+title: Create Frontend and Backend Sentry Projects
 sidebar_order: 1
-description: "Learn how to create a Sentry project, which scopes events to a distinct piece of your application landscape."
+description: "Learn how to create your Sentry projects, which will scope events to a distinct piece of your application landscape."
 ---
 
-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. In this walkthrough we will be creating a frontend project in React as well as a separate backend project in Express/Node.
+This section walks you through how to create new projects in your Sentry account. You need to have a project set up in Sentry in order to capture errors and other events. In this walkthrough we will be creating a frontend project in React as well as a separate backend project in Express/Node.
 
 _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](/organization/getting-started/#4-create-projects).
 
@@ -20,7 +20,7 @@ Follow the steps below to create a new Sentry project for a sample React applica
 
     - **Choose your platform**: Select the language or framework for your project based on the code you wish to monitor. In this case, choose **React**.
 
-    - **Set your alert frequency**: For the purpose of this tutorial, select **Alert me on every new issue**.
+    - **Set your alert frequency**: For the purpose of this tutorial, select **Alert me on high priority issues**.
 
       > If you're wary of alert fatigue, learn more about how to set up your alerts in [Alerts Best Practices](/product/alerts/best-practices/).
 
@@ -63,24 +63,38 @@ Follow the steps below to create a new Sentry project for a sample Backend appli
 
 1. Click "Create Project" and configure it as appropriate for your application:
 
-    - **Choose your platform**: Select the language or framework for your project based on the code you wish to monitor. In this case, choose **Express**.
+    - **Choose your platform**: In this case, choose **Express**.
 
-    - **Set your alert frequency**: For the purpose of this tutorial, select **Alert me on high priority issues**.
-
-      > If you're wary of alert fatigue, learn more about how to set up your alerts in [Alerts Best Practices](/product/alerts/best-practices/).
+    - **Set your alert frequency**: Once again, select **Alert me on high priority issues**.
 
     - **Name your project and assign it a team**: Make sure to give it a different project name than your frontend application.
 
-    - Click **Create Project**. This takes you to the quick Configure Express SDK guide, which provides an overview of how to configure the SDK. This tutorial covers the SDK setup in more detail.
+    - Click **Create Project**. This takes you to the quick Configure Express SDK guide, which provides an overview of how to configure the SDK.
 
-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. Copy the DSN key and keep it handy.
 
    > You can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**.
 
 1. Click **Take me to Issues** to go to your new project's **Issues** page.
 
+### UI Walkthrough
+
+<div style={{"height":"0px","paddingBottom":"calc(56.88524590163935% + 41px)","position":"relative","width":"100%"}}>
+  <iframe
+    src="https://demo.arcade.software/YXX8LAOHGSP4mWWBMMtM?embed"
+    frameborder="0"
+    loading="lazy"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+    allow="fullscreen;"
+    style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
+    title="Tracing Tutorial -> Create Express Project"
+  ></iframe>
+</div>
+
 
 
 ## Next
 
-Now that you have a Sentry project set up, you can [Add the Sentry SDK to Your Projects](/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 Frontend Projects](/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-frontend/).
diff --git a/docs/product/sentry-basics/distributed-tracing/index.mdx b/docs/product/sentry-basics/distributed-tracing/index.mdx
@@ -10,7 +10,7 @@ This step-by-step tutorial walks you through setting up Sentry in a React projec
 - x
 - x
 
-This tutorial uses a [sample React application](https://github.com/getsentry/frontend-tutorial) on the frontend as well as a sample Node/Express API as the backend. Some familiarity with JavaScript will help you follow along, you can also follow along with the provided sample code or apply the same steps to your own project.
+This tutorial uses a [sample React application](https://github.com/getsentry/frontend-tutorial) on the frontend as well as a sample [Node/Express API](https://github.com/getsentry/frontend-tutorial) as the backend. Some familiarity with JavaScript will help you follow along, you can also follow along with the provided sample code or apply the same steps to your own project.
 
 ## Prerequisites
 
@@ -20,4 +20,4 @@ This tutorial uses a [sample React application](https://github.com/getsentry/fro
 
 ## Next
 
-[Create a Sentry Project](/product/sentry-basics/integrate-frontend/create-new-project/)
+[Create your Sentry Projects](/product/sentry-basics/distributed-tracing/create-new-project/)
diff --git a/docs/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-backend.mdx b/docs/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-backend.mdx
@@ -1,6 +1,6 @@
 ---
 title: Add the Sentry SDK to Your Backend Project
-sidebar_order: 2
+sidebar_order: 3
 description: "Learn how to add the Sentry SDK to your backend codebase."
 ---
 
@@ -10,6 +10,7 @@ If you're using your own source code, you can skip this section. Instead:
 
 - 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/).
+{/* TODO: UPDATE THIS LINK */}
 
 ## 1. Clone the Sample Application
 
@@ -23,16 +24,21 @@ The sample application is a basic backend application using Express and Node.
    ```bash
    git clone git@github.com:<your_username>/frontend-tutorial.git
    ```
+   {/* TODO: UPDATE NAME OF THIS REPO */}
 
 1. Open the `backend-tutorial` project in your preferred code editor.
+   {/* TODO: UPDATE NAME OF THIS REPO */}
 
-## 2. Add the Sentry React SDK
+## 2. Add the Sentry Express SDK
 
-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).
+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 Express SDK](https://github.com/getsentry/sentry-javascript/tree/develop/packages/react).
+{/* TODO: UPDATE THIS LINK */}
 
-1. Install the Sentry React SDK using NPM.
+1. Install the Sentry Express SDK using NPM.
 
    Make sure you're in the `backend-tutorial` project folder.
+      {/* TODO: UPDATE NAME OF THIS REPO */}
+
 
    ```bash {tabTitle:npm}
    npm install --save @sentry/node @sentry/profiling-node
@@ -90,7 +96,7 @@ The configuration above enables Sentry's error monitoring feature, as well as it
 
 Make sure to import `instrument.js` at the top of your `server.js` file, and set up the error handler after all controllers and before any other middleware:
 
- ``` javascript {filename:instrument.js}
+ ``` javascript {filename:server.js}
     // IMPORTANT: Make sure to import `instrument.js` at the top of your file.
     // If you're using ECMAScript Modules (ESM) syntax, use `import "./instrument.js";`
     require("./instrument.js");
@@ -128,14 +134,15 @@ Make sure to import `instrument.js` at the top of your `server.js` file, and set
     const port = 3001;
 
      app.listen(port, () => {
-        console.log(`Server is running on port`);
+        console.log(`Server is running on port 3001`);
     });
 
    ```
 
 ## 3. Build and Run the Sample Application
 
 In the `frontend-tutorial` project folder:
+   {/* TODO: UPDATE NAME OF THIS REPO */}
 
 1. Install project dependencies.
 
@@ -153,7 +160,7 @@ In the `frontend-tutorial` project folder:
 
    ```bash
    <i> [webpack-dev-server] Project is running at:
-   <i> [webpack-dev-server] Loopback: http://localhost:3000/
+   <i> [webpack-dev-server] Loopback: http://localhost:3001/
    ...
    webpack 5.87.0 compiled successfully in 1306 ms
    ```
@@ -162,10 +169,11 @@ In the `frontend-tutorial` project folder:
 
 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.
+   The sample app should be running at [http://localhost:3001/](http://localhost:3001/) or the URL output in your terminal in the last step.
+
 
-   ![Sample app UX showing an online hardware store](./img/FE-tutorial-demo-app.png)
 
 ## Next
 
-At this point, you have a sample React app running with the Sentry SDK initialized. Next, [Add the Sentry SDK to Your Backend Project](/product/sentry-basics/integrate-frontend/generate-first-error/) to start using Sentry's error monitoring feature.
+At this point, you have a sample Express backend app running with the Sentry SDK initialized. Next, [Generate your first cross-project error](/product/sentry-basics/integrate-frontend/generate-first-error/) to start using Sentry's Distributed Tracing feature.
+   {/* TODO: UPDATE THIS LINK */}
diff --git a/docs/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-frontend.mdx b/docs/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-frontend.mdx
@@ -117,8 +117,7 @@ In the `frontend-tutorial` project folder:
 
    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](./img/FE-tutorial-demo-app.png)
 
 ## Next
 
-At this point, you have a sample React app running with the Sentry SDK initialized. Next, [Add the Sentry SDK to Your Backend Project](/product/sentry-basics/integrate-frontend/generate-first-error/) to start using Sentry's error monitoring feature.
+At this point, you have a sample React app running with the Sentry SDK initialized. Next, [Add the Sentry SDK to Your Backend Project](/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-backend/) to start using Sentry's error monitoring feature.
