Errors are not caught automatically from `fetch()`

[judehunter]

Version

@nuxtjs/sentry: 4.3.5 nuxt: 2.14.6

Sentry configuration

The default, client and server enabled

Reproduction Link

Not sure how to provide a reproducible example. I'll just describe the steps to reproduce, it's pretty straight-forward:

Steps to reproduce

1. Create a page component
2. Throw a new Error('...') in both data and fetch
3. Visit the page and observe that the error from data is reported, while the error from fetch isn't

What is Expected? What is actually happening?

The error from fetch should be reported automatically. It's not.

I realize there's a section on asyncData in the readme, but I'm not sure if it is also meant to be about the fetch method. Seems like maybe the readme is not up to date, because one can just use the new fetch instead of asyncData

[rchl]

Just checked and yes, errors from fetch() are not caught. Nuxt catches those itself and exposes on this.$fetchState.error so Sentry would have to have some extra logic to capture those.

[rchl]

@pi0 any suggestions here? I see that Nuxt sets the error on this.$fetchState.error and nuxt.error so in theory I could watch those somehow but I think it would cleaner if Nuxt would trigger some global hook when the error is thrown instead. Would you think that adding such hook to Nuxt makes sense?

[rchl]

Actually, I couldn't watch that property as there is no reactivity on the server-side. Also, that error is normalized and I would need the original error.

[pi0]

A global hook on root vue instance makes sense. Would you please open a PR @rchl? /cc @Atinux

[rchl]

Is there some existing code like that that I could take inspiration from?

It wouldn't be hard to just call vm.$root.onFetchError if it exists but if it's a simple function on the root then only one plugin could make use of it since each would overwrite the previous hook.

EDIT: I could create some simple hooks solution but I don't want to reinvent the wheel if there is something similar in use already.

[pi0]

@rchl It is possible to use vue $emit/$on. We would only need some internal changes to allow plugins using $on. Made #8786 to track