Nuxt on Cloudflare

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:

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.

Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager:

npm install @sentry/cloudflare --save

Setup

Configuration should happen as early as possible in your application's lifecycle.

To use the SDK, you'll need to set either the nodejs_compat or nodejs_als compatibility flags in your wrangler.jsonc / wrangler.toml config. This is because the SDK needs access to the AsyncLocalStorage API to work correctly.

{
  "compatibility_flags": [
    "nodejs_als",
    // "nodejs_compat"
  ],
}

You will also want to add the CF_VERSION_METADATA binding:

{
  // ...
  "version_metadata": {
    "binding": "CF_VERSION_METADATA"
  },
}

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:

import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'

export default defineNitroPlugin(sentryCloudflareNitroPlugin({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  tracesSampleRate: 1.0,
}))

Or, if you need access to nitroApp:

import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'

export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp) => {
  // You can access `nitroApp` here if needed
  return {
    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
    tracesSampleRate: 1.0,
  }
}))