diff --git a/docs/platforms/javascript/common/configuration/integrations/index.mdx b/docs/platforms/javascript/common/configuration/integrations/index.mdx index f26237fe851b6..9d1baea3086f8 100644 --- a/docs/platforms/javascript/common/configuration/integrations/index.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/index.mdx @@ -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.ts`. -- For Node.js, add integrations to `sentry.server.config.ts`. -- For the Edge runtime, add integrations to `sentry.edge.config.ts`. +- 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)`. +- For the Edge runtime, add integrations to your Sentry setup in `instrumentation.(js|ts)`. diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx index bca01ae7a86d4..feb7cbddedb55 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -68,11 +68,9 @@ export default withSentryConfig(nextConfig, { }); ``` -## Create Initialization Config Files +## Create Client Initialization Config File -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! +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. @@ -102,64 +100,52 @@ Sentry.init({ }); ``` -```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)} -import * as Sentry from "@sentry/nextjs"; - -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, - - // ... - - // 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"; - -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, - - // ... - - // 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 -}); -``` - 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`. 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: +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: ```javascript {filename:instrumentation.(js|ts)} +import * as Sentry from "@sentry/nextjs"; + export async function register() { if (process.env.NEXT_RUNTIME === "nodejs") { - await import("./sentry.server.config"); + 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, + + // ... + + // 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"); + 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, + + // ... + + // 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 + }); } } ``` -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. @@ -610,9 +596,9 @@ 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 emptying `sentry.server.config.js`. +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)`. -You cannot delete the respective config files because the SDK requires you to have it. +You cannot delete the client config file because the SDK requires you to have it. ## Disable the Sentry SDK Debug Logger to Save Bundle Size diff --git a/platform-includes/metrics/configure/javascript.nextjs.mdx b/platform-includes/metrics/configure/javascript.nextjs.mdx index a0c74fff5a5d4..8b775e7586181 100644 --- a/platform-includes/metrics/configure/javascript.nextjs.mdx +++ b/platform-includes/metrics/configure/javascript.nextjs.mdx @@ -10,10 +10,9 @@ Sentry.init({ }); ``` -To configure metrics for your server-side code, add the `metricsAggregator` experimental option to your `Sentry.init` call in your `sentry.server.config.js` and `sentry.edge.config.js` files. +To configure metrics for your server-side code, add the `metricsAggregator` experimental option to your `Sentry.init` call in your `instrumentation.(js|ts)` file. ```JavaScript -// sentry.server.config.js AND/OR sentry.edge.config.js Sentry.init({ dsn: '___PUBLIC_DSN___', _experiments: { diff --git a/platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx b/platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx index 8886949f92f69..a6bbe58b90772 100644 --- a/platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx +++ b/platform-includes/performance/configure-sample-rate/javascript.nextjs.mdx @@ -1,4 +1,4 @@ -In both, `sentry.server.config.js` and `sentry.client.config.js`, set: +Set `tracesSampleRate` in `sentry.client.config.js`, as well as in the Sentry setup in `instrumentation.(js|ts)`: diff --git a/platform-includes/performance/opentelemetry-setup/javascript.nextjs.mdx b/platform-includes/performance/opentelemetry-setup/javascript.nextjs.mdx deleted file mode 100644 index e72815500dfe8..0000000000000 --- a/platform-includes/performance/opentelemetry-setup/javascript.nextjs.mdx +++ /dev/null @@ -1,43 +0,0 @@ -1. Follow the Next.js instructions to set up a [manual OpenTelemetry configuration](https://nextjs.org/docs/app/building-your-application/optimizing/open-telemetry#manual-opentelemetry-configuration). - -2. Check to make sure you've added `instrumentation.{js,ts}` and `instrumentation.node.{js,ts}` files to your application. Note that, until this feature moves out of the experimental phase, Next.js requires you to set `experimental.instrumentationHook: true` in your `next.config.js` to enable these files. - -3. Enable your `sentry.server.config.js` file to be able to use the OpenTelemetry instrumenter option. - - - -```javascript {filename:sentry.server.config.js} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - tracesSampleRate: 1.0, - // set the instrumenter to use OpenTelemetry instead of Sentry - instrumenter: "otel", - // ... -}); -``` - -4. Update your `instrumentation.node.{js,ts}` so that it uses Sentry's OpenTelemetry `SpanProcessor` and `SpanPropagator`. - -```javascript {filename:instrumentation.node.js} -import { trace, context } from "@opentelemetry/api"; -import { NodeSDK } from "@opentelemetry/sdk-node"; -import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"; -import { Resource } from "@opentelemetry/resources"; -import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions"; -import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node"; -import { - SentrySpanProcessor, - SentryPropagator, -} from "@sentry/opentelemetry-node"; - -const sdk = new NodeSDK({ - resource: new Resource({ - [SemanticResourceAttributes.SERVICE_NAME]: "next-app", - }), - // Sentry config - spanProcessor: new SentrySpanProcessor(), - textMapPropagator: new SentryPropagator(), -}); - -sdk.start(); -```