From c77b66eb67ff34dfc07e3c067a030b9e0ba38a9e Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 20 Dec 2024 11:37:42 +0000 Subject: [PATCH 1/2] docs: Fix Next.js migration guide for v8 --- MIGRATION.md | 86 +++++++++++++++++++++------------------------------- 1 file changed, 34 insertions(+), 52 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index b142902cd6d1..70af98093933 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -870,58 +870,40 @@ or look at the TypeScript type definitions of `withSentryConfig`. #### Updated the recommended way of calling `Sentry.init()` -With version 8 of the SDK we will no longer support the use of `sentry.server.config.ts` and `sentry.edge.config.ts` -files. Instead, please initialize the Sentry Next.js SDK for the serverside in a -[Next.js instrumentation hook](https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation). -**`sentry.client.config.ts|js` is still supported and encouraged for initializing the clientside SDK.** - -The following is an example of how to initialize the serverside SDK in a Next.js instrumentation hook: - -1. First, enable the Next.js instrumentation hook by setting the `experimental.instrumentationHook` to `true` in your - `next.config.js`. -2. Next, create a `instrumentation.ts|js` file in the root directory of your project (or in the `src` folder if you have - have one). -3. Now, export a `register` function from the `instrumentation.ts|js` file and call `Sentry.init()` inside of it: - - ```ts - import * as Sentry from '@sentry/nextjs'; - - export function register() { - if (process.env.NEXT_RUNTIME === 'nodejs') { - Sentry.init({ - dsn: 'YOUR_DSN', - // Your Node.js Sentry configuration... - }); - } - - if (process.env.NEXT_RUNTIME === 'edge') { - Sentry.init({ - dsn: 'YOUR_DSN', - // Your Edge Runtime Sentry configuration... - }); - } - } - ``` - - If you need to import a Node.js specific integration (like for example `@sentry/profiling-node`), you will have to - import the package using a dynamic import to prevent Next.js from bundling Node.js APIs into bundles for other - runtime environments (like the Browser or the Edge runtime). You can do so as follows: - - ```ts - import * as Sentry from '@sentry/nextjs'; - - export async function register() { - if (process.env.NEXT_RUNTIME === 'nodejs') { - const { nodeProfilingIntegration } = await import('@sentry/profiling-node'); - Sentry.init({ - dsn: 'YOUR_DSN', - integrations: [nodeProfilingIntegration()], - }); - } - } - ``` - - Note that you can initialize the SDK differently depending on which server runtime is being used. +Version 8 of the Next.js SDK will require an additional `instrumentation.ts` file to execute the `sentry.server.config.js|ts` and `sentry.edge.config.js|ts` modules to initialize the SDK for the server-side. +The `instrumentation.ts` file is a Next.js native API called [instrumentation hook](https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation). + +To start using the Next.js instrumentation hook, follow these steps: + +1. First, enable the Next.js instrumentation hook by setting the [`experimental.instrumentationHook`](https://nextjs.org/docs/app/api-reference/next-config-js/instrumentationHook) to true in your `next.config.js`. (This step is no longer required with Next.js 15) + +```JavaScript {filename:next.config.js} {2-4} +module.exports = { + experimental: { + instrumentationHook: true, // Not required on Next.js 15+ + }, +} +``` + +2. Next, create a `instrumentation.ts|js` file in the root directory of your project (or in the src folder if you have have one). + +3. Now, export a register function from the `instrumentation.ts|js` file and import your `sentry.server.config.js|ts` and `sentry.edge.config.js|ts` modules: + +```JavaScript {filename:instrumentation.js} +import * as Sentry from '@sentry/nextjs'; + +export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('./sentry.server.config'); + } + + if (process.env.NEXT_RUNTIME === 'edge') { + await import('./sentry.edge.config'); + } +} +``` + +Note that you can initialize the SDK differently depending on which server runtime is being used. If you are using a [Next.js custom server](https://nextjs.org/docs/pages/building-your-application/configuring/custom-server), the From 22f0cae745c629aafa933176b36d93933ca9be0c Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 20 Dec 2024 11:45:58 +0000 Subject: [PATCH 2/2] indent --- MIGRATION.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 70af98093933..277bf2e1c44c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -877,33 +877,33 @@ To start using the Next.js instrumentation hook, follow these steps: 1. First, enable the Next.js instrumentation hook by setting the [`experimental.instrumentationHook`](https://nextjs.org/docs/app/api-reference/next-config-js/instrumentationHook) to true in your `next.config.js`. (This step is no longer required with Next.js 15) -```JavaScript {filename:next.config.js} {2-4} -module.exports = { - experimental: { - instrumentationHook: true, // Not required on Next.js 15+ - }, -} -``` + ```JavaScript {filename:next.config.js} {2-4} + module.exports = { + experimental: { + instrumentationHook: true, // Not required on Next.js 15+ + }, + } + ``` 2. Next, create a `instrumentation.ts|js` file in the root directory of your project (or in the src folder if you have have one). 3. Now, export a register function from the `instrumentation.ts|js` file and import your `sentry.server.config.js|ts` and `sentry.edge.config.js|ts` modules: -```JavaScript {filename:instrumentation.js} -import * as Sentry from '@sentry/nextjs'; + ```JavaScript {filename:instrumentation.js} + import * as Sentry from '@sentry/nextjs'; -export async function register() { - if (process.env.NEXT_RUNTIME === 'nodejs') { - await import('./sentry.server.config'); - } + export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('./sentry.server.config'); + } - if (process.env.NEXT_RUNTIME === 'edge') { - await import('./sentry.edge.config'); - } -} -``` + if (process.env.NEXT_RUNTIME === 'edge') { + await import('./sentry.edge.config'); + } + } + ``` -Note that you can initialize the SDK differently depending on which server runtime is being used. + Note that you can initialize the SDK differently depending on which server runtime is being used. If you are using a [Next.js custom server](https://nextjs.org/docs/pages/building-your-application/configuring/custom-server), the