Nuxt on Cloudflare
Learn how to add Cloudflare instrumentation to your Nuxt app.
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.
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.
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 with your package manager:
npm install @sentry/cloudflare --save
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.
wrangler.jsonc
{
"compatibility_flags": [
"nodejs_als",
// "nodejs_compat"
],
}
You will also want to add the CF_VERSION_METADATA
binding:
wrangler.jsonc
{
// ...
"version_metadata": {
"binding": "CF_VERSION_METADATA"
},
}
To enable Sentry for your Nuxt app on Cloudflare, follow these steps:
Delete the previous server config file
sentry.server.config.ts
if it exists.Create a new file in
server/plugins
and add the following code to your plugin file:
server/plugins/sentry-cloudflare-plugin.ts
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
:
server/plugins/sentry-cloudflare-plugin.ts
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,
}
}))
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").