This SDK is under active development! Feel free to already try it but expect breaking changes
todo: link official SDK docs
The minimum supported version of Nuxt is 3.0.0.
This package is a wrapper around @sentry/node for the server and @sentry/vue for the client side, with added
functionality related to Nuxt.
What is working:
- Error Reporting
- Vue
- Node
- Nitro
What is partly working:
- Tracing by setting
tracesSampleRate- UI (Vue) traces
- HTTP (Node) traces
What is not yet(!) included:
- Source Maps
- Nuxt-specific traces and connecting frontend & backend traces
Known Issues:
- When adding
sentry.server.config.(ts/js), you get this error: "Failed to register ESM hook", but the application will still work - When initializing Sentry on the server with
instrument.server.(js|ts), you get an'import-in-the-middle'error, and the application won't work
todo: add wizard instructions
Take a look at the sections below if you want to customize your SDK configuration.
If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
-
Install the Sentry Nuxt SDK:
# Using npm npm install @sentry/nuxt # Using yarn yarn add @sentry/nuxt
The Sentry Nuxt SDK is based on Nuxt Modules.
- Add
@sentry/nuxt/moduleto the modules section ofnuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sentry/nuxt/module'],
});Add a sentry.client.config.(js|ts) file to the root of your project:
import * as Sentry from '@sentry/nuxt';
Sentry.init({
dsn: env.DSN,
});Add an instrument.server.mjs file to your public folder:
import * as Sentry from '@sentry/nuxt';
// Only run `init` when DSN is available
if (process.env.SENTRY_DSN) {
Sentry.init({
dsn: process.env.DSN,
});
}Add an import flag to the NODE_OPTIONS of your preview script in the package.json file, so the file loads before any
other imports:
{
"scripts": {
"preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview"
}
}If you are getting an import-in-the-middle error message, add the package with a minimum version of 1.10.0 as a
dependency to your package.json
(issue reference):
{
"dependencies": {
"import-in-the-middle": "1.10.0"
}
}To upload source maps, you can use the sourceMapsUploadOptions option inside the sentry options of your
nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sentry/nuxt/module'],
sentry: {
debug: true,
sourceMapsUploadOptions: {
org: 'your-org-slug',
project: 'your-project-slug',
authToken: process.env.SENTRY_AUTH_TOKEN,
},
},
});