Skip to content

Commit b136f1a

Browse files
cursoragentcodyde
authored andcommitted
Update Next.js docs with features overview and manual setup instructions
1 parent 1b09574 commit b136f1a

File tree

1 file changed

+140
-1
lines changed
  • docs/platforms/javascript/guides/nextjs

1 file changed

+140
-1
lines changed

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

Lines changed: 140 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,19 @@ categories:
1313

1414
<PlatformContent includePath="getting-started-prerequisites" />
1515

16-
## Step 1: Install
16+
## Features
17+
18+
In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
19+
20+
Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
21+
22+
## Install
23+
24+
<OnboardingOptionButtons
25+
options={["error-monitoring", "performance", "profiling", "session-replay", "user-feedback", "logs-beta"]}
26+
/>
27+
28+
### Option 1: Automatic Setup (Recommended)
1729

1830
To install Sentry using the installation wizard, run the following command within your project:
1931

@@ -38,6 +50,133 @@ This guide assumes that you enable all features and allow the wizard to create a
3850

3951
</Expandable>
4052

53+
### Option 2: Manual Setup
54+
55+
If you prefer to set up Sentry manually, you can install the SDK and configure it yourself:
56+
57+
#### Install the Sentry SDK
58+
59+
```bash {tabTitle:npm}
60+
npm install @sentry/nextjs --save
61+
```
62+
63+
```bash {tabTitle:yarn}
64+
yarn add @sentry/nextjs
65+
```
66+
67+
```bash {tabTitle:pnpm}
68+
pnpm add @sentry/nextjs
69+
```
70+
71+
#### Configure Sentry
72+
73+
Create three configuration files in your application's root directory:
74+
75+
```javascript {tabTitle:Client} {filename:instrumentation-client.js}
76+
import * as Sentry from "@sentry/nextjs";
77+
78+
Sentry.init({
79+
dsn: "___PUBLIC_DSN___",
80+
81+
// Adds request headers and IP for users, for more info visit:
82+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
83+
sendDefaultPii: true,
84+
85+
integrations: [
86+
// ___PRODUCT_OPTION_START___ performance
87+
Sentry.browserTracingIntegration(),
88+
// ___PRODUCT_OPTION_END___ performance
89+
// ___PRODUCT_OPTION_START___ session-replay
90+
// Replay may only be enabled for the client-side
91+
Sentry.replayIntegration(),
92+
// ___PRODUCT_OPTION_END___ session-replay
93+
// ___PRODUCT_OPTION_START___ user-feedback
94+
Sentry.feedbackIntegration({
95+
// Additional SDK configuration goes in here, for example:
96+
colorScheme: "system",
97+
}),
98+
// ___PRODUCT_OPTION_END___ user-feedback
99+
],
100+
// ___PRODUCT_OPTION_START___ logs-beta
101+
102+
// Enable logs to be sent to Sentry
103+
_experiments: { enableLogs: true },
104+
// ___PRODUCT_OPTION_END___ logs-beta
105+
// ___PRODUCT_OPTION_START___ performance
106+
107+
// Set tracesSampleRate to 1.0 to capture 100%
108+
// of transactions for tracing.
109+
// We recommend adjusting this value in production
110+
// Learn more at
111+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
112+
tracesSampleRate: 1.0,
113+
// ___PRODUCT_OPTION_END___ performance
114+
// ___PRODUCT_OPTION_START___ session-replay
115+
116+
// Capture Replay for 10% of all sessions,
117+
// plus for 100% of sessions with an error
118+
// Learn more at
119+
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
120+
replaysSessionSampleRate: 0.1,
121+
replaysOnErrorSampleRate: 1.0,
122+
// ___PRODUCT_OPTION_END___ session-replay
123+
});
124+
```
125+
126+
```javascript {tabTitle:Server} {filename:sentry.server.config.js}
127+
import * as Sentry from "@sentry/nextjs";
128+
129+
Sentry.init({
130+
dsn: "___PUBLIC_DSN___",
131+
132+
// Adds request headers and IP for users, for more info visit:
133+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
134+
sendDefaultPii: true,
135+
// ___PRODUCT_OPTION_START___ logs-beta
136+
137+
// Enable logs to be sent to Sentry
138+
_experiments: { enableLogs: true },
139+
// ___PRODUCT_OPTION_END___ logs-beta
140+
// ___PRODUCT_OPTION_START___ performance
141+
142+
// Set tracesSampleRate to 1.0 to capture 100%
143+
// of transactions for tracing.
144+
// We recommend adjusting this value in production
145+
// Learn more at
146+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
147+
tracesSampleRate: 1.0,
148+
// ___PRODUCT_OPTION_END___ performance
149+
});
150+
```
151+
152+
```javascript {tabTitle:Edge} {filename:sentry.edge.config.js}
153+
import * as Sentry from "@sentry/nextjs";
154+
155+
Sentry.init({
156+
dsn: "___PUBLIC_DSN___",
157+
158+
// Adds request headers and IP for users, for more info visit:
159+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
160+
sendDefaultPii: true,
161+
// ___PRODUCT_OPTION_START___ logs-beta
162+
163+
// Enable logs to be sent to Sentry
164+
_experiments: { enableLogs: true },
165+
// ___PRODUCT_OPTION_END___ logs-beta
166+
// ___PRODUCT_OPTION_START___ performance
167+
168+
// Set tracesSampleRate to 1.0 to capture 100%
169+
// of transactions for tracing.
170+
// We recommend adjusting this value in production
171+
// Learn more at
172+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
173+
tracesSampleRate: 1.0,
174+
// ___PRODUCT_OPTION_END___ performance
175+
});
176+
```
177+
178+
For more detailed setup instructions, see our [complete manual setup guide](/platforms/javascript/guides/nextjs/manual-setup/).
179+
41180
## Step 2: Verify Your Setup
42181

43182
<Include name="nextjs-turbopack-warning-expandable.mdx" />

0 commit comments

Comments
 (0)