You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/product/sentry-basics/distributed-tracing/create-new-project.mdx
+45-18Lines changed: 45 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ description: "Learn how to create your Sentry projects, which will scope events
6
6
7
7
In order to capture errors and other events, you need to have a project set up in Sentry. In this walkthrough we'll be creating a frontend project in React and a separate backend project in Express.
8
8
9
-
Because you can create a Sentry _Project_ for each language or framework used in your application (for example, you might have separate projects for your API server and frontend client), a single application might have multiple projects associated with it. Once you've set up all the projects that correspond to different parts of your application in Sentry, you'll be able to scope events to a distinct application in your organization and assign responsibility to specific users and teams. For more information, see [best practices for creating projects](/organization/getting-started/#4-create-projects).
9
+
Because you can create a Sentry Project for _each_ language or framework used in your application (for example, you might have separate projects for your API server and frontend client), a single application might have multiple projects associated with it. Once you've set up all the projects that correspond to different parts of your application in Sentry, you'll be able to scope events to a distinct application in your organization and assign responsibility to specific users and teams. For more information, see [best practices for creating projects](/organization/getting-started/#4-create-projects).
10
10
11
11
## Create a Frontend Project
12
12
@@ -18,24 +18,32 @@ Follow the steps below to create a new Sentry project for a sample React applica
18
18
19
19
1. Click "Create Project" and configure it as appropriate for your application:
20
20
21
-
-**Choose your platform**: Select the language or framework for your project based on the code you wish to monitor. In this case, choose **React**.
21
+
-**Choose your platform**: Select the language or framework for your project based on the code you wish to monitor. In this case, choose **React**.
22
22
23
-
-**Set your alert frequency**: For the purpose of this tutorial, select **Alert me on high priority issues**.
23
+
-**Set your alert frequency**: For the purpose of this tutorial, select **Alert me on high priority issues**.
24
24
25
-
> If you're wary of alert fatigue, learn more about how to set up your alerts in [Alerts Best Practices](/product/alerts/best-practices/).
25
+
> If you're wary of alert fatigue, learn more about how to set up your alerts in [Alerts Best Practices](/product/alerts/best-practices/).
26
26
27
-
-**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).
27
+
-**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).
28
+
29
+
- 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.
30
+
31
+
- You'll notice that the Sentry React SDK setup code has come pre-populated with the project's 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 the SDK configuration code later in the tutorial. You can make a note of it now, or you can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**
28
32
29
-
- 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.
30
-
31
-
- You'll notice that the Sentry React SDK setup code has come pre-populated with the project's 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 the SDK configuration code later in the tutorial. You can make a note of it now, or you can also find a project's DSN anytime in **[Project] > Settings > Client Keys (DSN)**
32
33
1. Click **Take me to Issues** to go to your new project's **Issues** page.
33
34
34
35
### UI Walkthrough
35
36
36
37
The interactive demo below walks through how to create a new project in the UI.
Now that you have your Sentry projects set up, you can [Add the Sentry SDK to Your Frontend Project](/product/sentry-basics/distributed-tracing/initialize-sentry-sdk-frontend/).
Copy file name to clipboardExpand all lines: docs/product/sentry-basics/distributed-tracing/generate-first-error.mdx
+24-11Lines changed: 24 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ If you're using your own source code, skip this step. Instead, select your [plat
16
16
17
17
1. In the `tracing-tutorial-frontend` repo, open `src/App.js` and update the `onClick` handler by replacing the string passed to the `getProduct()` function from `nonfat-water` to `debug-sentry`.
@@ -29,28 +29,27 @@ If you're using your own source code, skip this step. Instead, select your [plat
29
29
</button>
30
30
</div>
31
31
```
32
+
32
33
There's a middleware function handling the `/products/debug-sentry` route in the `server.js` file of the `tracing-tutorial-backend` repo that throws a sample error:
33
34
34
35
```javascript {filename:server.js}
35
36
app.get("/products/debug-sentry", (req, res) => {
36
-
console.log('Sentry Error thrown!');
37
-
thrownewError("My first Sentry error!");
38
-
});
37
+
console.log("Sentry Error thrown!");
38
+
thrownewError("My first Sentry error!");
39
+
});
39
40
```
40
41
41
-
42
-
43
42
1. Save the file.
44
43
45
-
1. Go back to the browser window and try clicking on the **Nonfat Water** button again, you will no longer see the expected product information. Instead, you'll see text saying something went wrong. If you look to the bottom of the `App.js` file in the `tracing-tutorial-frontend` repo, you'll see this is what the frontend displays when the call to the backend doesn't return any data.
44
+
1. Go back to the browser window and try clicking on the **Nonfat Water** button again, you will no longer see the expected product information. Instead, you'll see a `500 error` message displayed.
46
45
47
-
1. Open the terminal window that's running the `tracing-tutorial-backend` server. Here, you'll see a log letting you know that an error has occurred.
46
+
1. Open the terminal window that's running the `tracing-tutorial-backend` server. Here, you'll see a log letting you know that an error has occurred:
48
47
49
48
```bash
50
49
Sentry Error thrown!
51
50
```
52
51
53
-
52
+
This confirms that the error we just produced on the frontend has triggered a corresponding error on the backend.
54
53
55
54
## 2. View the Error in Sentry
56
55
@@ -66,7 +65,14 @@ Now that you've triggered an error, let's see what it looks like in Sentry.
66
65
67
66
The interactive demo below walks through how to view a distributed trace in Sentry.
Copy file name to clipboardExpand all lines: docs/product/sentry-basics/distributed-tracing/index.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Distributed Tracing Tutorial
3
3
sidebar_order: 1
4
-
description: "Follow this tutorial to set up Sentry error monitoring and distributed tracing for a sample fullstack JavaScript application. By the end, you'll be able to trigger an error and a trace and see it in Sentry.io"
4
+
description: "Follow this tutorial to set up Sentry error monitoring and distributed tracing for a sample fullstack JavaScript application. By the end, you'll be able to trigger an error and a trace and see it in Sentry.io."
5
5
---
6
6
7
7
This step-by-step tutorial walks you through setting up Sentry in both a frontend (React) and backend (Express) sample application. After completing this tutorial you'll be able to trace the source and impact of your issues across projects and platforms. As part of this tutorial, you will:
1. Open the `tracing-tutorial-backend` project in your preferred code editor.
29
-
{/* TODO: UPDATE NAME OF THIS REPO */}
30
27
31
28
## 2. Add the Sentry Node SDK
32
29
33
30
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 Node SDK](https://github.com/getsentry/sentry-javascript/tree/master/packages/node).
34
31
35
-
1. Navigate to the tracing-tutorial-backend` project folder and install the Sentry Express SDK using NPM.
32
+
1. Navigate to the `tracing-tutorial-backend` project folder and install the Sentry Express SDK using NPM.
36
33
37
34
{/* TODO: UPDATE NAME OF THIS REPO */}
38
35
@@ -50,21 +47,19 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
50
47
51
48
1. Create a file at the root level of your project and call it `instrument.js`. Import and initialize the SDK using the following code:
// Set sampling rate for profiling - this is relative to tracesSampleRate
67
-
profilesSampleRate:1.0,
55
+
dsn:"sample_DSN_key",
56
+
integrations: [nodeProfilingIntegration()],
57
+
// Tracing
58
+
// Capture 100% of the transactions
59
+
tracesSampleRate:1.0,
60
+
61
+
// Set sampling rate for profiling - this is relative to tracesSampleRate
62
+
profilesSampleRate:1.0,
68
63
});
69
64
```
70
65
@@ -85,57 +80,58 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
85
80
86
81
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.
87
82
88
-
The configuration above enables Sentry's error monitoring feature, as well as its [Tracing](will add link later) and [Session Replay](/platforms/javascript/guides/react/session-replay) features.
83
+
The configuration above enables Sentry's error monitoring feature, as well as its **Tracing** and [Session Replay](/platforms/javascript/guides/react/session-replay) features.
84
+
{/* TODO: Add link for tracing here when tracing doc is live */}
res.send('<h1>Hello, Express.js Server here!</h1>');
111
-
});
105
+
app.get('/', (req, res) => {
106
+
res.send('<h1>Hello, Express.js Server here!</h1>');
107
+
});
112
108
113
-
app.get("/products/debug-sentry", (req, res) => {
114
-
console.log("Sentry Error thrown!");
115
-
throw new Error("My first Sentry error!");
116
-
});
109
+
app.get("/products/debug-sentry", (req, res) => {
110
+
console.log("Sentry Error thrown!");
111
+
throw new Error("My first Sentry error!");
112
+
});
117
113
118
-
// The error handler must be registered before any other error middleware and after all controllers
119
-
Sentry.setupExpressErrorHandler(app);
114
+
+ // The error handler must be registered before any other error middleware and after all controllers
115
+
+ Sentry.setupExpressErrorHandler(app);
120
116
121
-
// Optional fallthrough error handler
122
-
app.use(function onError(err, req, res, next) {
123
-
// The error id is attached to `res.sentry` to be returned
124
-
// and optionally displayed to the user for support.
125
-
console.log('500 error thrown!');
126
-
res.statusCode = 500;
127
-
res.end(res.sentry + "\n");
128
-
});
117
+
+ // Optional fallthrough error handler
118
+
+ app.use(function onError(err, req, res, next) {
119
+
+ // The error id is attached to `res.sentry` to be returned
120
+
+ // and optionally displayed to the user for support.
121
+
+ console.log('500 error thrown!');
122
+
+ res.statusCode = 500;
123
+
+ res.end(res.sentry + "\n");
124
+
+ });
129
125
130
-
app.use('/products', productsRoute);
126
+
app.use('/products', productsRoute);
131
127
132
-
const port = 3001;
128
+
const port = 3001;
133
129
134
-
app.listen(port, () => {
135
-
console.log(`Serverisrunningonport 3001`);
136
-
});
130
+
app.listen(port, () => {
131
+
console.log(`Serverisrunningonport 3001`);
132
+
});
137
133
138
-
```
134
+
```
139
135
140
136
## 3. Build and Run the Sample Application
141
137
@@ -147,7 +143,7 @@ In the `tracing-tutorial-backend` project folder:
147
143
npm install
148
144
```
149
145
150
-
1. Start the application in develop mode.
146
+
1. Start the application in develop mode:
151
147
152
148
```bash
153
149
node server.js
@@ -159,14 +155,12 @@ In the `tracing-tutorial-backend` project folder:
159
155
Server is running on port 3001
160
156
```
161
157
162
-
> **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`.
158
+
> **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. If you're using [nvm](https://github.com/nvm-sh/nvm), ensure you are on the right node version with`nvm use 18` and then `npm install`.
163
159
164
160
1. Open the sample application in your browser.
165
161
166
162
The sample app should be running at [http://localhost:3001/](http://localhost:3001/) or the URL output in your terminal in the last step.
167
163
168
-
169
-
170
164
## Next
171
165
172
166
Well done! You now have a sample Express backend app running with the Sentry SDK initialized. Next, [Generate your first cross-project error](/product/sentry-basics/distributed-tracing/generate-first-error/) to start using Sentry's Distributed Tracing feature.
0 commit comments