From a44c0e567703368739f5666e378eb7e3b7e5caed Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 3 Nov 2022 14:50:22 +0100 Subject: [PATCH 1/2] Add section on how to set up the Next.js SDK with the Vercel Edge Runtime --- .../common/troubleshooting/index.mdx | 49 ++++++++++++++++++- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 932692f7bdf7a8..19c2118c606558 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -266,7 +266,12 @@ This also helps to prevent tracking of any parent application errors in case you inside of it. In this example we use `@sentry/browser` but it's also applicable to `@sentry/node`. ```javascript -import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; +import { + BrowserClient, + defaultStackParser, + defaultIntegrations, + makeFetchTransport, +} from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___", @@ -281,7 +286,12 @@ client.captureException(new Error("example")); While the above sample should work perfectly fine, some methods like `configureScope` and `withScope` are missing on the `Client` because the `Hub` takes care of the state management. That's why it may be easier to create a new `Hub` and bind your `Client` to it. The result is the same but you will also get state management with it. ```javascript -import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; +import { + BrowserClient, + defaultStackParser, + defaultIntegrations, + makeFetchTransport, +} from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___", @@ -449,3 +459,38 @@ export default defineConfig({ plugins: [react()] }) ``` + + + +## Vercel Experimental Edge Runtime + +The Sentry Next.js SDK does not yet support the [Vercel Edge Runtime](https://vercel.com/docs/concepts/functions/edge-functions) which is used in Next.js middleware and Edge Routes when deployed on Vercel. +If you want to use the Edge Runtime in combination with the Sentry SDK you need to manually opt the API routes that use the Edge Runtime out of Sentry instrumentation via the `excludedServersideEntrypoints` option in your `next.config.js`. + +For example: Opting out the route `/api/posts` and all the routes starting with `/api/users/` will work like the following. + +```javascript {filename:next.config.js} +const { withSentryConfig } = require("@sentry/nextjs"); + +const nextConfig = { + // Next.js configuration options... + + sentry: { + excludedServersideEntrypoints: [ + "pages/api/posts", + /^pages\/api\/users\/.*/, + ], + // Other optional Sentry build-time configuration options... + }, +}; + +const sentryWebpackPluginOptions = { + // Sentry Webpack Plugin options... +}; + +module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions); +``` + +Please note that this will effectively disable the Sentry SDK for these API routes - removing all error and performance monitoring. + + From 08a8c007d002b8d65379d5314d44ed2505e482b9 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 3 Nov 2022 14:57:36 +0100 Subject: [PATCH 2/2] Undo auto formatting changes --- .../javascript/common/troubleshooting/index.mdx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 19c2118c606558..795e3a910d54c4 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -266,12 +266,7 @@ This also helps to prevent tracking of any parent application errors in case you inside of it. In this example we use `@sentry/browser` but it's also applicable to `@sentry/node`. ```javascript -import { - BrowserClient, - defaultStackParser, - defaultIntegrations, - makeFetchTransport, -} from "@sentry/browser"; +import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___", @@ -286,12 +281,7 @@ client.captureException(new Error("example")); While the above sample should work perfectly fine, some methods like `configureScope` and `withScope` are missing on the `Client` because the `Hub` takes care of the state management. That's why it may be easier to create a new `Hub` and bind your `Client` to it. The result is the same but you will also get state management with it. ```javascript -import { - BrowserClient, - defaultStackParser, - defaultIntegrations, - makeFetchTransport, -} from "@sentry/browser"; +import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___",