-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
docs(nuxt): Add docs for Cloudflare Nitro plugin #14219
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/). | ||
|
||
<Alert> | ||
|
||
If you installed the SDK before, make sure that `@sentry/nuxt` version `9.34.0` or newer is installed. | ||
|
||
</Alert> | ||
|
||
Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager: | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<PlatformContent includePath="getting-started-install" /> | ||
|
||
## Setup | ||
|
||
<PlatformContent includePath="getting-started-config" /> | ||
|
||
### Adding the Plugin | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
To enable Sentry for your Nuxt app on Cloudflare, follow these steps: | ||
|
||
1. **Remove the previous server config file:** | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Delete `sentry.server.config.ts` if it exists. | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
2. **Add a Nitro plugin:** | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Create a new file in `server/plugins` (for example, `server/plugins/sentry-cloudflare-setup.ts`). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. q: should we just be more opinionated here and just tell users to name it Then we could consolidate step 2 and 3 together:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as comment above: #14219 (comment) The file name does not matter but it's indeed smart to have one step less. If we want to write a filename to the docs, we could name it There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd just call it
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
3. **Add the following code to your plugin file:** | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```TypeScript {filename:server/plugins/[custom-plugin-name].ts} | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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, | ||
} | ||
})) | ||
``` | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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." | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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. | ||
|
||
<PageGrid /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
s1gr1d marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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). |
Uh oh!
There was an error while loading. Please reload this page.