-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
76d3164
Adjust Next.js manual setup docs to be in line with wizard
lforst 17f3d49
Merge remote-tracking branch 'origin/master' into lforst-revert
lforst ed0d9a1
Update docs/platforms/javascript/guides/nextjs/manual-setup.mdx
lforst 9266f5c
Update docs/platforms/javascript/guides/nextjs/manual-setup.mdx
lforst 7f2373a
feedback
lforst File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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 /> | ||||||
|
||||||
|
@@ -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). | ||||||
You can set this file up by adding a `instrumentation.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: | ||||||
lforst marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
// ... | ||||||
```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. | ||||||
|
@@ -596,9 +610,9 @@ module.exports = withSentryConfig(nextConfig, { | |||||
|
||||||
### Opt Out of Sentry SDK bundling in Client or Server side | ||||||
lforst marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
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)`. | ||||||
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 emptying `sentry.server.config.js`. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
You cannot delete the client config file because the SDK requires you to have it. | ||||||
You cannot delete the respective config files because the SDK requires you to have it. | ||||||
|
||||||
## Disable the Sentry SDK Debug Logger to Save Bundle Size | ||||||
|
||||||
|
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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 frominstrumentation.ts
, you may run into problems because Node.js apis are not available in edge and instrumentation.ts is ran for both. Having thesentry.*.config.ts
files mitigates that issue.