Skip to content
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

[JavaScript] Nuxt SDK #9095

Open
23 of 36 tasks
stephanie-anderson opened this issue Sep 22, 2023 · 54 comments
Open
23 of 36 tasks

[JavaScript] Nuxt SDK #9095

stephanie-anderson opened this issue Sep 22, 2023 · 54 comments
Assignees
Labels
Package: nuxt Issues related to the Sentry Nuxt SDK

Comments

@stephanie-anderson
Copy link
Contributor

stephanie-anderson commented Sep 22, 2023

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:

Alpha

  1. Package: nuxt
  2. Package: nuxt

Beta

  1. Package: nuxt
    s1gr1d
  2. Package: nuxt
  3. Package: nuxt
    s1gr1d
  4. Package: nuxt
    s1gr1d

Stable Release

  1. Package: nuxt
    s1gr1d
  2. 11 of 18
    s1gr1d
  3. s1gr1d

TODO but not necessary for stable

Nice to have/Stretch Goals

  1. Package: nuxt Type: Tests
  2. Package: cloudflare Package: nuxt
  3. Package: nuxt
@stephanie-anderson stephanie-anderson added the Package: nuxt Issues related to the Sentry Nuxt SDK label Sep 22, 2023
@AbhiPrasad
Copy link
Member

See #6929

@s1gr1d s1gr1d self-assigned this Jun 17, 2024
@manniL
Copy link

manniL commented Jun 20, 2024

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

@cosbgn
Copy link

cosbgn commented Jun 24, 2024

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
Copy link
Member

s1gr1d commented Jun 24, 2024

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

@cosbgn
Copy link

cosbgn commented Jun 24, 2024

@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
Copy link

cosbgn commented Jun 24, 2024

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

@alexcroox
Copy link

alexcroox commented Jun 24, 2024

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
Copy link
Member

lforst commented Jun 24, 2024

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
Copy link

cosbgn commented Jun 24, 2024

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!

@gloompiq
Copy link

Great initiative!

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

@s1gr1d
Copy link
Member

s1gr1d commented Jun 28, 2024

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

s1gr1d added a commit that referenced this issue Jul 1, 2024
To be able to differentiate between a browser/client execution context,
sentry is initialized in an external config file. An import statement in
`nuxt-root.vue` is added which loads this config file.

Nuxt tracking issue:
#9095

---------

Co-authored-by: Abhijeet Prasad <[email protected]>
@s1gr1d
Copy link
Member

s1gr1d commented Sep 25, 2024

@BlazingTide If there is an issue with the experimental SDK feel free to open a new issue in our repository as it makes it easier to keep track of things 🙌

I am not sure what you mean with "sitemaps" - we don't generate sitemaps. In case you mean source maps: Yes, they are generated and uploaded automatically if you provide the sourceMapsUploadOptions and you don't need another command :)

@mydea mydea changed the title Nuxt SDK [JavaScript] Nuxt SDK Sep 26, 2024
@ps-20x
Copy link

ps-20x commented Oct 1, 2024

Thanks for the input! I'm not quite sure how nuxt scripts can be used here. Perhaps you could explain a little more about how you thought this could be used in the SDK :)

So the idea is to optimize the page loading performance by using nuxt scripts and prevent possible errors with SSR. For example it provides a proxy object to track events and will fire them when it is fully set up.
The slogan on the page says

Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX

and

Nuxt Scripts provides an abstraction layer on top of third-party scripts, providing SSR support and type-safety and while still giving you full low-level control over how a script is loaded.

But as mentioned before: I am not sure if it would be possible to adapt the logic so it could be integrated.

@lforst
Copy link
Member

lforst commented Oct 1, 2024

@ps-20x Re: nuxt scripts. I think we need to look into it a bit further. Superficially I can say that the upside it gives is probably very slim since the Sentry SDK needs to load very early on in the pageload for a bunch of important features (errors, performance, replay). The DX is definitely an argument.

For now, I think we'll try to focus on shipping a robust SDK without using nuxt scripts but there is nothing that prevents us from migrating to that pattern later on. (also note that nuxt scripts are in beta - to some degree atleast)

@s1gr1d
Copy link
Member

s1gr1d commented Oct 21, 2024

The Beta Version of the Sentry Nuxt SDK is released with v8.35.0 🎉

Please make sure to check out the readme and the docs as there are breaking changes (no --import CLI flag needed anymore)

@daniluk4000
Copy link

@s1gr1d are breaking changes still expected or can we work on implementation now?

@s1gr1d
Copy link
Member

s1gr1d commented Oct 21, 2024

Beta means no breaking changes to the API, but it could include behavioral changes.

@darthf1
Copy link

darthf1 commented Oct 21, 2024

Is it possible to inject the Sentry's Pinia plugin via a flag in the nuxt config as well?

Looking at https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/src/runtime/plugin.ts, it looks like you need create a nuxt plugin and then add the sentry plugin to pinia in there. (And of course check first if pinia is installed, and if Sentry is enabled).

@luc122c
Copy link

luc122c commented Oct 21, 2024

Hi, there is a typo in the readme:

Add an `sentry.client.config.ts` file to the root of your project:

It should say sentry.server.config.ts like in the docs.

@rocketiscool
Copy link

rocketiscool commented Oct 21, 2024

Getting

node:internal/modules/esm/resolve:265
throw new ERR_MODULE_NOT_FOUND(
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'web/apps/web/.output/server/node_modules/import-in-the-middle/hook.mjs' imported from web/apps/web/.output/server/index.mjs

When following the installation instructions even with

"overrides": {
"@vercel/nft": "^0.27.4"
}

Update: Turns out in pnpm workspaces, you have to put

"pnpm": {
"overrides": {
"@vercel/nft": "0.27.4"
}
}

in the root package.json instead

@s1gr1d
Copy link
Member

s1gr1d commented Oct 22, 2024

Thanks for trying out the beta, will update this in the docs and the readme! :)

@asokawotulo
Copy link

I'm not sure if I should leave a comment here or open a new issue, but I'm getting the following error when using this with @nuxt/content and running npm run build

[plugin inject] .nuxt/snapshot/cache/content/parsed/content/document.md: rollup-plugin-inject: failed to parse /home/projects/nuxt-starter-ye7qhs/.nuxt/snapshot/cache/content/parsed/content/document.md. Consider restricting the plugin to particular files via options.include

I made a reproduction here. You can toggle the module in the nuxt.config.ts file and run npm run build

@s1gr1d
Copy link
Member

s1gr1d commented Oct 22, 2024

In general, its better to create a new issue as it's more organized and we have a better overview :)
Thanks for the reproduction! This could be a problem between rollup plugins (as we added one in v8.35.0). I'll take a look into this and created an issue here: #14057

As a temporary workaround, you can disable this with dynamicImportForServerEntry like documented in the changelog.

@ThibaultVlacich
Copy link

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?

@mydea
Copy link
Member

mydea commented Nov 12, 2024

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
Copy link
Member

@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 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nuxt Issues related to the Sentry Nuxt SDK
Projects
Status: No status
Development

No branches or pull requests