diff --git a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx index d3d6e17d2f450..52be62980b4cd 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -26,8 +26,7 @@ Capturing spans requires that you first set up trac -Though the `BrowserTracing` integration is automatically enabled in `@sentry/nextjs`, in order to customize its options you must include it in your `Sentry.init` in `sentry.client.config.js`: - +Though the `BrowserTracing` integration is automatically enabled in `@sentry/nextjs`, in order to customize its options you must include it in your `Sentry.init` in `instrumentation-client.js`: ```javascript import * as Sentry from "@sentry/nextjs"; @@ -76,8 +75,8 @@ You will need to configure your web server [CORS](https://developer.mozilla.org/ - If you're using React, read our docs to learn how to set up your - [React Router integration](/platforms/javascript/guides/react/configuration/integrations/react-router/). + If you're using React, read our docs to learn how to set up your [React Router + integration](/platforms/javascript/guides/react/configuration/integrations/react-router/). ### shouldCreateSpanForRequest @@ -131,8 +130,11 @@ This option determines whether spans for long tasks automatically get created. The default is `true`. ### enableLongAnimationFrame + -The `enableLongAnimationFrame` option requires SDK [version 8.18.0](https://github.com/getsentry/sentry-javascript/releases/tag/8.18.0) or higher. + The `enableLongAnimationFrame` option requires SDK [version + 8.18.0](https://github.com/getsentry/sentry-javascript/releases/tag/8.18.0) or + higher. This option determines whether spans for long animation frames get created automatically. If both `enableLongAnimationFrame` and `enableLongTask` are enabled, Sentry will send long animation frames and fallback to long tasks (if long animation frames aren't supported by the browser). @@ -142,7 +144,9 @@ The default is `true`. ### enableInp -The `enableInp` option requires SDK [version 7.104.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.104.0) or higher. + The `enableInp` option requires SDK [version + 7.104.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.104.0) + or higher. This option determines whether interactions spans automatically get created when an [Interaction to Next Paint (INP)](/product/insights/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp) event is detected. Interactions are scored and surfaced in the [Web Vitals](/product/insights/web-vitals/) module. @@ -153,6 +157,7 @@ The default is `true` in `8.x` of the SDK, and `false` in `7.x`. INP samples currently incur no cost to enable at Sentry. Basic samples contain limited information such as the interaction target, latency, and user. You may wish to enrich your INP samples by setting up [Session Replays](/platforms/javascript/session-replay/) and/or setting up [Browser Profiling](/platforms/javascript/profiling/) instrumentation around your interactive elements to gain further insights into your slowest interactions. Please note that any Session Replays and Browser Profiles used this way will incur their [standard cost](/pricing/#per-category-pricing) depending on your plan and are subject to the sampling rates configured. + diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx index 99f2de1096250..b209e31844f35 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -100,16 +100,19 @@ export default withSentryConfig(nextConfig, { ### Initialize Sentry Client-Side and Server-Side SDKs -Create three files in your application's root directory: `sentry.client.config.(js|ts)`, `sentry.server.config.(js|ts)` and `sentry.edge.config.(js|ts)`. Add the following initialization code into each respective file: +Create three files in your application's root directory: `sentry.server.config.(js|ts)`, `sentry.edge.config.(js|ts)`, and `instrumentation-client.(js|ts)`. Add the following initialization code into each respective file: These files run in different environments (browser, server, edge) and are slightly different, so copy them carefully. -```javascript {tabTitle:Client} {filename:sentry.client.config.(js|ts)} {"onboardingOptions": {"performance": "7-13", "session-replay": "5-6, 14-20"}} +```javascript {tabTitle:Client} {filename:instrumentation-client.(js|ts)} {"onboardingOptions": {"performance": "7-13", "session-replay": "5-6, 14-20"}} import * as Sentry from "@sentry/nextjs"; +// This export will instrument router navigations. `captureRouterTransitionStart` is available from SDK version 9.12.0 onwards - upgrade if necessary! +export const onRouterTransitionStart = Sentry.captureRouterTransitionStart; + Sentry.init({ dsn: "___PUBLIC_DSN___", // Replay may only be enabled for the client-side @@ -575,7 +578,7 @@ module.exports = withSentryConfig(nextConfig, { ### Opt Out of Sentry SDK bundling in Client- or Server-Side -If you want the Sentry SDK to be available in your server-side and 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. +If you want the Sentry SDK to be available in your server-side and not in client-side, you can simply delete `instrumentation-client.(js|ts)`. 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 imports of these files from `instrumentation.ts`. ## Step 8: Instrument Vercel Cron Jobs (Optional) diff --git a/platform-includes/configuration/integrations/javascript.nextjs.mdx b/platform-includes/configuration/integrations/javascript.nextjs.mdx index 8de46b797e8a3..635bf80dbe00c 100644 --- a/platform-includes/configuration/integrations/javascript.nextjs.mdx +++ b/platform-includes/configuration/integrations/javascript.nextjs.mdx @@ -3,7 +3,7 @@ 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.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 the browser runtime, add integrations to `instrumentation-client.(js|ts)`. - For Node.js.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/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx index b0bd33ee026e8..ad9ab6e12ce06 100644 --- a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx +++ b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx @@ -1,11 +1,11 @@ -```javascript {filename:sentry.client.config.ts} +```javascript {filename:instrumentation-client.ts} Sentry.init({ // Note, Replay is NOT instantiated below: integrations: [], }); // Sometime later -import("@sentry/nextjs").then(lazyLoadedSentry => { +import("@sentry/nextjs").then((lazyLoadedSentry) => { Sentry.addIntegration(lazyLoadedSentry.replayIntegration()); }); ``` diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx index 3a12a629dfbf3..cd7fe07d3b8c4 100644 --- a/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx +++ b/platform-includes/distributed-tracing/how-to-use/javascript.nextjs.mdx @@ -4,14 +4,14 @@ For client-side, when you are interacting with other external API systems, you m -Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. For example, if you have a Node.js backend running locally on port 3000, that destination (`http://localhost:3000`) should be added to the `tracePropagationTargets` array on your frontend to ensure that CORS doesn't restrict the propagation of traces. ```javascript -// sentry.client.config.js +// instrumentation-client.js Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [Sentry.browserTracingIntegration()], @@ -26,7 +26,7 @@ If you're using version `7.57.x` or below, you'll need to have our { // Access transaction details from the sampling context const { name, attributes, inheritOrSampleWith } = samplingContext; - + // Skip health checks entirely - if (name.includes('healthcheck')) { + if (name.includes("healthcheck")) { return 0; } - + // Capture all auth-related transactions - if (name.includes('auth')) { + if (name.includes("auth")) { return 1; } - + // Sample only 1% of comment-related transactions - if (name.includes('comment')) { + if (name.includes("comment")) { return 0.01; } - + // For everything else, inherit parent sampling decision or use 0.5 return inheritOrSampleWith(0.5); - } + }, }); -``` \ No newline at end of file +``` diff --git a/platform-includes/tracing/trace-sampler/javascript.nextjs.mdx b/platform-includes/tracing/trace-sampler/javascript.nextjs.mdx index 49c354feb2b17..ce86f6bdfcabc 100644 --- a/platform-includes/tracing/trace-sampler/javascript.nextjs.mdx +++ b/platform-includes/tracing/trace-sampler/javascript.nextjs.mdx @@ -1,29 +1,29 @@ ```javascript -// sentry.client.config.js +// instrumentation-client.js Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [Sentry.browserTracingIntegration()], tracesSampler: (samplingContext) => { // Access transaction details from the sampling context const { name, attributes, inheritOrSampleWith } = samplingContext; - + // Skip health checks entirely - if (name.includes('healthcheck')) { + if (name.includes("healthcheck")) { return 0; } - + // Capture all auth-related transactions - if (name.includes('auth')) { + if (name.includes("auth")) { return 1; } - + // Sample only 1% of comment-related transactions - if (name.includes('comment')) { + if (name.includes("comment")) { return 0.01; } - + // For everything else, inherit parent sampling decision or use 0.5 return inheritOrSampleWith(0.5); - } + }, }); -``` \ No newline at end of file +```