From 41b79fb70d6d7799ca74cb3edf1048c0cb0f886c Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 1 Jul 2025 13:44:03 +0200 Subject: [PATCH 1/4] docs(nuxt): Add docs for Cloudflare Nitro plugin --- .../guides/cloudflare/frameworks/nuxt.mdx | 67 +++++++++++++++++++ .../javascript/guides/nuxt/features/index.mdx | 6 +- .../nuxt/features/nitro-cloudflare-plugin.mdx | 12 ++++ 3 files changed, 82 insertions(+), 3 deletions(-) create mode 100644 docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx create mode 100644 docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx new file mode 100644 index 0000000000000..0ce26fecf2d85 --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx @@ -0,0 +1,67 @@ +--- +title: Nuxt on Cloudflare +description: "Learn how to add Cloudflare instrumentation to your Nuxt app." +--- + +If you're running your Nuxt app on Cloudflare Pages, you need to configure the SDK a little differently to the default setup. This guide will show you how to set up the Sentry Nuxt SDK with Nitro's `cloudflare-pages` deployment preset. + +## Install + +First, install the Sentry Nuxt SDK in your application. We recommend using the Sentry wizard to automatically install the SDK: + +```bash +npx @sentry/wizard@latest -i nuxt +``` + +If the setup through the wizard doesn't work for you, you can also [set up the Nuxt SDK manually](/platforms/javascript/guides/nuxt/manual-setup/). + + + +If you installed the SDK before, make sure that `@sentry/nuxt` version `9.34.0` or newer is installed. + + + +Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager: + + + +## Setup + + + +### Adding the Plugin + +To enable Sentry for your Nuxt app on Cloudflare, follow these steps: + +1. **Remove the previous server config file:** + Delete `sentry.server.config.ts` if it exists. + +2. **Add a Nitro plugin:** + Create a new file in `server/plugins` (for example, `server/plugins/sentry-cloudflare-setup.ts`). + +3. **Add the following code to your plugin file:** + +```TypeScript {filename:server/plugins/[custom-plugin-name].ts} +import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins' + +export default defineNitroPlugin(sentryCloudflareNitroPlugin({ + dsn: '___PUBLIC_DSN___', + tracesSampleRate: 1.0, +})) +``` + +Or, if you need access to `nitroApp`: + +```TypeScript {filename:server/plugins/[custom-plugin-name].ts} +import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins' + +export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp) => { + // You can access `nitroApp` here if needed + return { + dsn: '___PUBLIC_DSN___', + tracesSampleRate: 1.0, + } +})) +``` + + diff --git a/docs/platforms/javascript/guides/nuxt/features/index.mdx b/docs/platforms/javascript/guides/nuxt/features/index.mdx index 45d97a177d706..2f9647491815b 100644 --- a/docs/platforms/javascript/guides/nuxt/features/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/index.mdx @@ -1,9 +1,9 @@ --- -title: Vue Features -description: "Learn how to exposes features for first class integration with Vue with Sentry's Nuxt SDK." +title: Nuxt Features +description: "Learn how to exposes features for first class integration with Vue and Nitro with Sentry's Nuxt SDK." sidebar_order: 4 --- -The Sentry Nuxt SDK offers Vue-specific features for first class integration with the framework. +The Sentry Nuxt SDK offers Vue and Nitro-specific features for first class integration with the framework. diff --git a/docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx b/docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx new file mode 100644 index 0000000000000..72ad5d6d9f026 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx @@ -0,0 +1,12 @@ +--- +title: Nitro Deployment Presets +description: "Learn how to set up monitoring of your application when using different Nitro deployment presets." +sidebar_order: 10 +--- + +The Sentry Nuxt SDK offers support for different Nitro deployment presets. Most of the deployment presets **work out-of-the-box** with the Sentry Nuxt SDK. +However, some deployment providers require additional configuration to ensure that Sentry works correctly. + +## Cloudflare Pages + +Using the Cloudflare Nitro plugin of Sentry enables Sentry monitoring on Cloudflare Pages. Go and see the [Cloudflare Nitro plugin documentation](/platforms/javascript/guides/cloudflare/frameworks/nuxt). From 4e68934fbc80a1c58dac53c769ec28436584e395 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 1 Jul 2025 14:09:34 +0200 Subject: [PATCH 2/4] add link to getting starting page --- ...{nitro-cloudflare-plugin.mdx => nitro-deployment-presets.mdx} | 0 docs/platforms/javascript/guides/nuxt/index.mdx | 1 + 2 files changed, 1 insertion(+) rename docs/platforms/javascript/guides/nuxt/features/{nitro-cloudflare-plugin.mdx => nitro-deployment-presets.mdx} (100%) diff --git a/docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx b/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx similarity index 100% rename from docs/platforms/javascript/guides/nuxt/features/nitro-cloudflare-plugin.mdx rename to docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx index 202d9325e9275..00839f64cad95 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -93,6 +93,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou - Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/) - Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts - Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/) +- Learn how to [add support for different Nitro deployment presets](/platforms/javascript/guides/nuxt/features/nitro-deployment-presets/) (like Cloudflare) From 663a4be7de202f0a0f2cedd14af1d41eef1858e7 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 1 Jul 2025 14:19:16 +0200 Subject: [PATCH 3/4] add link to manual setup page --- docs/platforms/javascript/guides/nuxt/manual-setup.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx index 4fe201ce24b95..5cfb6a66c6e7b 100644 --- a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx @@ -343,6 +343,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou - Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/) - Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts - Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/) +- Learn how to [add support for different Nitro deployment presets](/platforms/javascript/guides/nuxt/features/nitro-deployment-presets/) (like Cloudflare) From c5e3a46df394ec511382aacabccae55f5af66a1e Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Tue, 1 Jul 2025 15:58:09 +0200 Subject: [PATCH 4/4] review suggestions --- .../guides/cloudflare/frameworks/nuxt.mdx | 19 ++++++++----------- .../javascript/guides/nuxt/features/index.mdx | 4 ++-- .../features/nitro-deployment-presets.mdx | 3 +-- 3 files changed, 11 insertions(+), 15 deletions(-) diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx index 0ce26fecf2d85..a20991624a23c 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx @@ -3,7 +3,8 @@ title: Nuxt on Cloudflare description: "Learn how to add Cloudflare instrumentation to your Nuxt app." --- -If you're running your Nuxt app on Cloudflare Pages, you need to configure the SDK a little differently to the default setup. This guide will show you how to set up the Sentry Nuxt SDK with Nitro's `cloudflare-pages` deployment preset. +If you're running your Nuxt app on Cloudflare Pages, you'll need to configure the Sentry Nuxt SDK slightly differently than the default setup. +This guide will show you how to set up the SDK with Nitro's `cloudflare-pages` deployment preset. ## Install @@ -21,7 +22,7 @@ If you installed the SDK before, make sure that `@sentry/nuxt` version `9.34.0` -Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager: +Now you can install the Sentry Cloudflare SDK with your package manager: @@ -29,19 +30,15 @@ Now you can install the Sentry Cloudflare SDK. First, install the SDK with your -### Adding the Plugin +### Adding the Nitro Plugin To enable Sentry for your Nuxt app on Cloudflare, follow these steps: -1. **Remove the previous server config file:** - Delete `sentry.server.config.ts` if it exists. +1. Delete the previous server config file `sentry.server.config.ts` if it exists. -2. **Add a Nitro plugin:** - Create a new file in `server/plugins` (for example, `server/plugins/sentry-cloudflare-setup.ts`). +2. Create a new file in `server/plugins` and add the following code to your plugin file: -3. **Add the following code to your plugin file:** - -```TypeScript {filename:server/plugins/[custom-plugin-name].ts} +```TypeScript {filename:server/plugins/sentry-cloudflare-plugin.ts} import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins' export default defineNitroPlugin(sentryCloudflareNitroPlugin({ @@ -52,7 +49,7 @@ export default defineNitroPlugin(sentryCloudflareNitroPlugin({ Or, if you need access to `nitroApp`: -```TypeScript {filename:server/plugins/[custom-plugin-name].ts} +```TypeScript {filename:server/plugins/sentry-cloudflare-plugin.ts} import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins' export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp) => { diff --git a/docs/platforms/javascript/guides/nuxt/features/index.mdx b/docs/platforms/javascript/guides/nuxt/features/index.mdx index 2f9647491815b..1396605e7e376 100644 --- a/docs/platforms/javascript/guides/nuxt/features/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/index.mdx @@ -1,9 +1,9 @@ --- title: Nuxt Features -description: "Learn how to exposes features for first class integration with Vue and Nitro with Sentry's Nuxt SDK." +description: "Learn how to use Sentry's Nuxt SDK for first-class integration with Vue and Nitro." sidebar_order: 4 --- -The Sentry Nuxt SDK offers Vue and Nitro-specific features for first class integration with the framework. +The Sentry Nuxt SDK offers support for Vue and Nitro-specific features for first-class integration with the framework. diff --git a/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx b/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx index 72ad5d6d9f026..63c5f1c73983d 100644 --- a/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx @@ -4,8 +4,7 @@ description: "Learn how to set up monitoring of your application when using diff sidebar_order: 10 --- -The Sentry Nuxt SDK offers support for different Nitro deployment presets. Most of the deployment presets **work out-of-the-box** with the Sentry Nuxt SDK. -However, some deployment providers require additional configuration to ensure that Sentry works correctly. +The Sentry Nuxt SDK provides support for different Nitro deployment presets, most of which **work out of the box**. ## Cloudflare Pages