Skip to content

Adjust Next.js manual setup docs to be in line with wizard #10156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ However, it's important to note that not all integrations are compatible with al

Depending on whether an integration enhances the functionality of a particular runtime, such as the BrowserTracing integration for the browser runtime or the RequestData integration for the Node.js runtime, you can only include these integrations in their respective configuration files:

- For the browser runtime, add integrations to `sentry.client.config.(js|ts)`.
- For Node.js, add integrations to your Sentry setup in `instrumentation.(js|ts)`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just to clarify for me, I thought the instrumentation.js file was now required? Is this not the case? or is this something else?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The instrumentation file is indeed required, but we still suggest people add all the sentry.*.config.ts files for the simple reason that if you want to add a integration that is node specific, and you import it from instrumentation.ts, you may run into problems because Node.js apis are not available in edge and instrumentation.ts is ran for both. Having the sentry.*.config.ts files mitigates that issue.

- For the Edge runtime, add integrations to your Sentry setup in `instrumentation.(js|ts)`.
- For the browser runtime, add integrations to `sentry.client.config.ts`.
- For Node.js, add integrations to `sentry.server.config.ts`.
- For the Edge runtime, add integrations to `sentry.edge.config.ts`.

</PlatformSection>

Expand Down
87 changes: 50 additions & 37 deletions docs/platforms/javascript/guides/nextjs/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,11 @@ export default withSentryConfig(nextConfig, {
});
```

## Create Client Initialization Config File
## Create Initialization Config Files

Create this file in the root directory of your Next.js application: `sentry.client.config.js`. In this file, add your initialization code for the client-side SDK. The setup for browser-side initialization is explained below.
Create three files in the root directory of your Next.js application: `sentry.client.config.js`, `sentry.server.config.js` and `sentry.edge.config.js`. In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. We've included some examples below.

Please note that there are slight differences between these files since they run in different places (browser, server, edge), so copy them carefully!

<SignInNote />

Expand Down Expand Up @@ -100,52 +102,64 @@ Sentry.init({
});
```

We recommend you include your DSN directly in these three files. Alternatively you can pass the DSN via a _public_ environment variable like `NEXT_PUBLIC_SENTRY_DSN`.
```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)}
import * as Sentry from "@sentry/nextjs";

While the client initialization code will be injected into your application's client bundle by `withSentryConfig` which we set up earlier,
the configuration for the server and edge runtime needs to be imported from a [Next.js Instrumentation file](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation).
You can set this file up by adding a `instrumentation.(js|ts)` file to the root directory of your Next.js application (or inside the `src` folder if you are using one) and adding the following content:
Sentry.init({
dsn: "___PUBLIC_DSN___",

```javascript {filename:instrumentation.(js|ts)}
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,

// ...

// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
```

```javascript {tabTitle:Edge} {filename:sentry.edge.config.(js|ts)}
import * as Sentry from "@sentry/nextjs";

export async function register() {
if (process.env.NEXT_RUNTIME === "nodejs") {
Sentry.init({
dsn: "___PUBLIC_DSN___",
Sentry.init({
dsn: "___PUBLIC_DSN___",

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,

// ...
// ...

// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
}
// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
```

if (process.env.NEXT_RUNTIME === "edge") {
Sentry.init({
dsn: "___PUBLIC_DSN___",
We recommend you include your DSN directly in these three files. Alternatively you can pass the DSN via a _public_ environment variable like `NEXT_PUBLIC_SENTRY_DSN`.

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
While the client initialization code will be injected into your application's client bundle by `withSentryConfig` which we set up earlier,
the configuration for the server and edge runtime needs to be imported from a [Next.js Instrumentation file](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation).
To set up this file, add a `instrumentation.ts` file to the root directory of your Next.js application (or inside the `src` folder if you're using one) and add the following content:

// ...
```javascript {filename:instrumentation.(js|ts)}
export async function register() {
if (process.env.NEXT_RUNTIME === "nodejs") {
await import("./sentry.server.config");
}

// Note: if you want to override the automatic release value, do not set a
// `release` value here - use the environment variable `SENTRY_RELEASE`, so
// that it will also get attached to your source maps
});
if (process.env.NEXT_RUNTIME === "edge") {
await import("./sentry.edge.config");
}
}
```

Make sure that the `import` statements point to your newly created `sentry.server.config.(js|ts)` and `sentry.edge.config.(js|ts)` files.

## Report React Component Render Errors

To capture React render errors you need to add Error components for the App Router and the Pages Router respectively.
Expand Down Expand Up @@ -594,11 +608,10 @@ module.exports = withSentryConfig(nextConfig, {
});
```

### Opt Out of Sentry SDK bundling in Client or Server side

If you want the `sentry` to be available in your server side & not in client side, you can make your `sentry.client.config.js` empty. This will prevent webpack from pulling in the Sentry related files when generating the browser bundle. The same goes the opposite for opting out of server side bundle by not initializing Sentry inside `instrumentation.(js|ts)`.
### Opt Out of Sentry SDK bundling in Client- or Server-Side

You cannot delete the client config file because the SDK requires you to have it.
If you want the Sentry SDK to be available in your server-side & not in client-side, you can simply delete `sentry.client.config.js`. This will prevent webpack from pulling in the Sentry related files when generating the browser bundle.
Similarly, to opt out of server-side SDK bundling, you can simply delete the `sentry.server.config.js` and `sentry.edge.config.js` files. Make sure to remove any any imports of these files from `instrumentation.ts`.

## Disable the Sentry SDK Debug Logger to Save Bundle Size

Expand Down
23 changes: 0 additions & 23 deletions platform-includes/metrics/configure/javascript.nextjs.mdx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Set `tracesSampleRate` in `sentry.client.config.js`, as well as in the Sentry setup in `instrumentation.(js|ts)`:
Set `tracesSampleRate` in your config files, `sentry.server.config.js`, `sentry.client.config.js`, and `sentry.edge.config.js`:

<SignInNote />

Expand Down
Loading