Skip to content

Commit 9a1bff2

Browse files
committed
merge with error monitoring and fine-tune
1 parent e2b8d69 commit 9a1bff2

File tree

1 file changed

+2
-40
lines changed
  • docs/platforms/javascript/guides/react

1 file changed

+2
-40
lines changed

docs/platforms/javascript/guides/react/index.mdx

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: React
33
description: "Learn how to manually set up Sentry in your React app and capture your first errors."
4-
description: "Learn how to manually set up Sentry in your React app and capture your first errors."
54
sdk: sentry.javascript.react
65
categories:
76
- javascript
@@ -14,10 +13,6 @@ categories:
1413

1514
Choose the features you want to configure, and this guide will show you how:
1615

17-
## Step 1: Install
18-
19-
Choose the features you want to configure, and this guide will show you how:
20-
2116
<OnboardingOptionButtons
2217
options={["error-monitoring", "performance", "session-replay"]}
2318
/>
@@ -41,25 +36,6 @@ Choose the features you want to configure, and this guide will show you how:
4136

4237
Run the command for your preferred package manager to add the Sentry SDK to your application:
4338

44-
<Expandable title="Want to learn more about these features?">
45-
46-
- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors,
47-
uncaught exceptions, and unhandled rejections. If you have something that
48-
looks like an exception, Sentry can capture it.
49-
- [**Tracing**](/product/tracing): Track software performance while seeing the
50-
impact of errors across multiple systems. For example, distributed tracing
51-
allows you to follow a request from the frontend to the backend and back.
52-
- [**Session Replay**](/product/explore/session-replay/web):
53-
Get to the root cause of an issue faster by viewing a video-like reproduction
54-
of what was happening in the user's browser before, during, and after the
55-
problem.
56-
57-
</Expandable>
58-
59-
### Install the Sentry SDK
60-
61-
Run the command for your preferred package manager to add the Sentry SDK to your application:
62-
6339
```bash {tabTitle:npm}
6440
npm install @sentry/react --save
6541
```
@@ -74,13 +50,11 @@ pnpm add @sentry/react
7450

7551
## Step 2: Configure
7652

77-
## Step 2: Configure
78-
7953
### Initialize the Sentry SDK
8054

8155
To import and initialize Sentry, create a file in your project's root directory, for example, `instrument.js`, and add the following code:
8256

83-
```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "1, 6-9, 12-20", "session-replay": "10, 21-27"}}
57+
```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "6-9, 12-20", "session-replay": "10, 21-27"}}
8458
import * as Sentry from "@sentry/react";
8559

8660
Sentry.init({
@@ -115,10 +89,6 @@ Sentry.init({
11589

11690
Initialize Sentry as early as possible in your application. We recommend putting the import of your initialization code as the first import in your app's entry point:
11791

118-
### Apply Instrumentation to Your App
119-
120-
Initialize Sentry as early as possible in your application. We recommend putting the import of your initialization code as the first import in your app's entry point:
121-
12292
```javascript
12393
// Sentry initialization should be imported first!
12494
import "./instrument";
@@ -134,16 +104,8 @@ root.render(<App />);
134104

135105
To make sure Sentry captures all your app's errors, configure error handling based on your React version.
136106

137-
## Step 3: Capture React Errors
138-
139-
To make sure Sentry captures all your app's errors, configure error handling based on your React version.
140-
141107
### Configure Error Hooks (React 19+)
142108

143-
### Configure Error Hooks (React 19+)
144-
145-
The `createRoot` and `hydrateRoot` methods provide error hooks to capture errors automatically. These hooks apply to all React components mounted to the root container.
146-
Integrate Sentry with these hooks and customize error handling:
147109
The `createRoot` and `hydrateRoot` methods provide error hooks to capture errors automatically. These hooks apply to all React components mounted to the root container.
148110
Integrate Sentry with these hooks and customize error handling:
149111

@@ -248,7 +210,7 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
248210
<OnboardingOption optionId="performance">
249211
### Tracing
250212

251-
To test your tracing configuration, update the previous code snippet by starting a performance trace to measure the time it takes for the execution of your code:
213+
To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for the execution of your code:
252214

253215
```javascript
254216
<button

0 commit comments

Comments
 (0)