[JavaScript] Nuxt SDK

[stephanie-anderson]

Important

This issue is tracking progress on the Nuxt SDK. If you find bugs or problems with the @sentry/nuxt package please open a separate issue. Thank you!

New SDK for https://nuxt.com/

There is an existing discussion: Sentry SDK for Nuxt

Nuxt uses nitro as their server, this means we'll need to have nitro support. It might make sense for us to create an OpenTelemetry instrumentation for nitro. It will also be valuable to add similar instrumentation for the other libraries Nuxt relies on:

• crossws: their websocket wrapper: https://crossws.unjs.io/
• db0: their database wrapper: https://github.com/unjs/db0
• unstorage: their key/value storage wrapper: https://github.com/unjs/unstorage

Alpha

Beta Give feedback

1. Add Nuxt SDK package boilerplate #12572
   Package: nuxt +1
2. Add client (vue) instrumentation
3. sentryNuxtPlugin for error handling
4. Add server (nitro) instrumentation #12795
   +0
5. Add side effect import of sentry config to Nuxt app #12759
   Package: nuxt +1
6. Add E2E tests
7. Add craft entry for Nuxt SDK
8. Nuxt: Add source maps support #13017
   +0
9. Nuxt: Route Parametrization #13067
   +0
10. Nuxt: Connected traces #13097
    +0

Beta

Beta Give feedback

1. Create Nuxt Platfrom in Sentry
2. Nuxt: Source Maps support for server-side #13383
   +0
3. Create Docs for Nuxt #13239
   +0
4. Add icon for Nuxt platformicons#174
   +0
5. [Nuxt] Cannot set release name used by sentry-vite-plugin #13380
   Package: nuxt +1
   
6. feat(nuxt): Add server config to root folder #13583
   Package: nuxt +1
7. Nuxt: Vue component tracking test(nuxt): Add tests for Vue component tracking #13633
8. [Nuxt] Improve tracing functionality in ESM #13943
   Package: nuxt +1
   
9. Vercel Function Deployment: feat(nuxt): Add Http responseHook with waitUntil #13986
10. Sourcemaps and events with debug ids are not matching #13997
    Package: nuxt +1
    

Stable Release: #14487

Check the Stable Realease tracking issue for TODOs regarding the stable release: #14487

---

TODO but not necessary for stable

Beta Give feedback

1. Nitro Route Parametrization
2. Wizard
3. Nuxt: Server side works in development mode
4. Nuxt 4: Put server-side config in server and client-side config in app

Nice to have/Stretch Goals

Beta Give feedback

1. Add Nuxt pages router instrumentation
2. Add Nuxt pages router unit tests #13813
   Package: nuxt Type: Tests +2
3. Add support for Nuxt Layers @nuxt/sentry look for SDK init files in layers #14345
4. Add worker runtime support
5. (if needed) Add native Nitro server engine support
6. (if needed) Instrument Nuxt $fetch
7. Instrument useError composable
8. Nuxt vs Cloudflare interop #13949
   Package: cloudflare Package: nuxt +2
9. Nuxt (optional): Make it possible to use runtime config in external file #13341
   Package: nuxt +1
10. [Nuxt] Support for NuxtErrorBoundary https://nuxt.com/docs/api/components/nuxt-error-boundary

[AbhiPrasad]

See #6929

[manniL]

If you need insights from the Nuxt team at any time, please don't hesitate to reach out! 🙏

[cosbgn]

This is such a great news!

It would be ideal that it would work on all envs.
Nuxt works very well on the edge (cloudflare workers, netlify edge, etc), however not all libraries are compatible as there are some restrictions (no eval, no new Function(), etc).

It would be great if sentry/nuxt would work everywhere from day one.

[s1gr1d]

@cosbgn Thanks for the input! Which libraries do you mean with "not all libraries are compatible"?

[cosbgn]

@cosbgn Thanks for the input! Which libraries do you mean with "not all libraries are compatible"?

Hi @s1gr1d, I don't have an extensive list, but for example AJV doesn't work. Workers don't use node, they use their own runtime (workerd) which is limited to web standards (similarly to deno).

I think if you use only sentry/core it should work as it's used by toucan-js which is an unofficial client for cloudflare workers. I think sentry/node won't work by default, but I might be wrong here.

[cosbgn]

This is of course for the backend part of nuxt, i.e. nitro. On the frontend sentry/vue should work perfectly.

[alexcroox]

I use Sentry on my APIs (fullstack Nuxt 3 deployment to Cloudflare pages) with the sentry/browser package on the API side to get around edge restrictions.

The context Sentry devs, for cosbgn's comment, is that Nuxt 3 was built with the "deploy anywhere" ethos, so all the core packages and (new) community modules are designed to be runtime agnostic. That's where https://unjs.io/ was born from.

I initially followed this guide if it helps at all with the PR in general https://www.lichter.io/articles/nuxt3-sentry-recipe (written by a core Nuxt 3 dev)

[lforst]

While we may not support worker (WinterCG) runtimes from the start we will look into it eventually. We are planning to release the SDK iteratively and in stages. Prioritization of worker runtime support depends of course a bit on the demand. I added an item to the list to track. Technically we have all the building blocks available.

[cosbgn]

I don't have any specific data, but from my understanding a big percent of nuxt apps are deployed on the edge (vercel-edge, workers, netlify edge, etc) as you get better performance for lower costs, and Nuxt pretty much "guarantees" that it will work on the edge, so it's an obvious solution.

I understand if you decide not to prioritize it, I just wanted to let you know that it would be great to have it from day one. It might be as simple as using sentry/core rather than sentry/node (I don't know, just an example).

Anyways, thanks for the first party package, love sentry and I would love to be able to add it to Nuxt easily!

[mydea]

Currently if the sentry server is down, it crashes the build completely:

[error] x Build failed in 51.44s
[error] Nuxt Build Error: [sentry-debug-id-upload-plugin] Command failed: /home/vsts/work/1/s/node_modules/@sentry/cli-linux-x64/bin/sentry-cli releases finalize 219448[...]74188
error: API request failed

Caused by:
    sentry reported an error: gateway timeout (http status: 504)

Any way to make it just a warning?

You can configure a custom errorHandler in the sentry vite plugin that nuxt adds like this:
https://www.npmjs.com/package/@sentry/vite-plugin#errorhandler

[chargome]

@ThibaultVlacich in your case you would need to add this to your nuxt config:

sentry: {
    unstable_sentryBundlerPluginOptions: {
      errorHandler: // handle your error
    }
  }

If you face any other problems please open up a new issue directly 🙏

[lforst]

@gibkigonzo as outlined in the original issue here, this is a tracking issue. Please open a separate issue with information and reproduction steps. Thank you!

[maximepvrt]

If compatibilityVersion: 4 is enabled (https://nuxt.com/docs/guide/going-further/features#compatibilityversion), the sentry.client.config.ts file should ideally be placed at the root of the app folder. In this case, could it simply be named sentry.config.ts? Similarly, sentry.server.config.ts could also be renamed to sentry.config.ts for consistency in this case.

[s1gr1d]

@maximepvrt I am curious - how would your application (or applications in general) benefit from this change?

Both Sentry config files are placed in the root to have them visible in one place and the root is also the place where you would add other configs (like nuxt.config, tailwind.config, ...).

[maximepvrt]

The idea behind this suggestion is that configurations related specifically to the client-side application have been moved to the app folder in Nuxt 3, such as app.config.ts. Placing sentry.client.config.ts in app would align with this convention, making it clear that this configuration applies solely to the client-side. This organization helps keep the root directory focused on global or shared configurations (like nuxt.config, tailwind.config)

[iBobik]

I hate how so many small libs pollute root directory by their configs.

It is good to have this option for use-cases with a lot of config, but most projects will be ok with defaults, so 2-3 options.

For such amount of config there is convention for Nuxt modules to have their section in the nuxt.config.ts.

[s1gr1d]

Yes, this makes sense for Nuxt 4 - I'll add it to the list.

The reason why not every part of the Sentry config is added inside the key sentry of the nuxt.config.ts file is because this file is only evaluated during build time. As functions can be passed to the options of the init function, we cannot do this evaluation only during build time. Also, it's easier for people to differentiate between build-time, client-side and server-side if those configs are separated.

[maximepvrt]

@s1gr1d Would it be possible to add an enabled option in nuxt.config for the Sentry module? By default, it could be set to true, but it would allow developers to control in which environments Sentry should be activated using environment overrides. This would make it easier to disable Sentry in specific environments like development or test without additional workarounds.

[maximepvrt]

Additionally, is there a way to disable the capturing of specific useError types, such as 404 errors? This would be helpful to avoid reporting expected errors to Sentry.

[chargome]

@maximepvrt

You could alternatively add enabled: false conditionally to Sentry.init(), or callSentry.init() conditionally altogether. Let's hear @s1gr1d opinion on adding this flag to the module itself 👍

For filtering specific errors you can refer to https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/filtering/