[JavaScript] Nuxt SDK

[hiroshinishio]

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
- [ ] https://github.com/getsentry/sentry-javascript/issues/12572
- [x] Add client (vue) instrumentation
- [x] sentryNuxtPlugin for error handling
- [ ] https://github.com/getsentry/sentry-javascript/issues/12795
- [ ] https://github.com/getsentry/sentry-javascript/issues/12759
- [x] Add E2E tests
- [x] Add craft entry for Nuxt SDK
- [ ] https://github.com/getsentry/sentry-javascript/issues/13017
- [ ] https://github.com/getsentry/sentry-javascript/issues/13067
- [ ] https://github.com/getsentry/sentry-javascript/issues/13097

### Beta
- [ ] Create Nuxt Platfrom in Sentry
- [ ] https://github.com/getsentry/sentry-javascript/issues/13383
- [ ] https://github.com/getsentry/sentry-javascript/issues/13239
- [ ] https://github.com/getsentry/platformicons/issues/174
- [ ] https://github.com/getsentry/sentry-javascript/issues/13380
- [ ] https://github.com/getsentry/sentry-javascript/pull/13583
- [x] Nuxt: Vue component tracking https://github.com/getsentry/sentry-javascript/pull/13633

### Stable Release
- [ ] Nitro Route Parametrization
- [ ] Nuxt Setup Wizard
- [ ] Ensure deployment to Netlify works
- [ ] Nuxt 4 Support

### Nice to have/Stretch Goals
- [ ] Add Nuxt pages router instrumentation
- [ ] https://github.com/getsentry/sentry-javascript/issues/13813
- [ ] Add support for Nuxt Layers
- [ ] Add worker runtime support
- [ ] (if needed) Add native Nitro server engine support
- [ ] (if needed) Instrument Nuxt $fetch
- [ ] Instrument `useError` composable
- [ ] https://github.com/getsentry/sentry-javascript/issues/13341

[hiroshinishio]

See getsentry#6929

[hiroshinishio]

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

[gitauto-ai]

Click the checkbox below to generate a PR!

• Generate PR

@hiroshinishio, You have 2 requests left in this cycle which refreshes on 2024-11-04 02:56:25+00:00.
If you have any questions or concerns, please contact us at info@gitauto.ai.

[gitauto-for-dev]

Click the checkbox below to generate a PR!

• Generate PR - gitauto-wes

@hiroshinishio, You have 3 requests left in this cycle which refreshes on 2024-11-05 22:45:17+00:00.
If you have any questions or concerns, please contact us at info@gitauto.ai.

[hiroshinishio]

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.

[hiroshinishio]

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

[hiroshinishio]

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

Hi , 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.

[hiroshinishio]

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

[hiroshinishio]

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)

[hiroshinishio]

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.

[hiroshinishio]

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!

[hiroshinishio]

Great initiative!

Could we also make sure that errors before the hydration are also handled?

[hiroshinishio]

We want to monitor as many as possible. The first release of the SDK will cover monitoring the majority of errors and we will definitely improve it over time

[hiroshinishio]

It would be great if this module could integrate /vite-plugin.
There could be a flag uploadSourcemaps, which automatically sets sourcemap: true in Nuxt config and configures sentryVitePlugin to upload sourcemaps. An option to delete public source maps at the end of the build would be appreciated. The sourcemaps.filesToDeleteAfterUpload option only deletes files after uploading the sourcemaps, but sourcemaps should always be removed when the flag is set, even if no sourcemaps were uploaded.