Nuxt.js: Global error handler?

[AvailCat]

I'm using nuxt.js in our production environment, but i can't find any document about how to capture and analyze exceptions during running asyncData or nuxtServerInit.

I suggest to add options like Vue.config.errorHandler to nuxt.config.js, this will allow us capture exception, inject request id into response

_{This question is available on Nuxt.js community (#c1512)}

[piyushchauhan2011]

Why not pull out the exception handling code in Vuex store. You can use try, catch block to capture and trigger error handling from store. As for routing, vue-router provides changing route from store which you can trigger after receiving exception. @Meeeeow

[AvailCat]

@piyushchauhan2011 Huge try...catch is not a good solution. Change route? I don't need jump to another page after exception, but i need a hook to receive exceptions from asyncData, which not control by Vue.config.errorHandle.
Nuxt print exception to console rather than throw it, so there is not way to send exceptions to third part service such as Sentry

[piyushchauhan2011]

ahh like a middleware than can send the thrown exception to bugsnag or sentry. I like the idea 👍 @Meeeeow . There has to be a way to capture after request completed exceptions and send them to sentry as well as handle them at same time to show nice error page etc. using middleware

[DiederikvandenB]

So I am looking in to this too, indeed in order to send error data to sentry. I came across the following errorHandler in the code: https://github.com/nuxt/nuxt.js/blob/dev/lib/core/nuxt.js#L100

Should hooking in to this solve this? And if so, how do I do this?

[DiederikvandenB]

I dove a bit deeper in the code and found the problem. Nuxt allows us to register custom server middleware, but this gets loaded before Nuxt's own middleware. See: https://github.com/nuxt/nuxt.js/blob/75350cdd78d17e565b6c58d6c1aaa00c5146cbae/lib/core/renderer.js#L277-L288

The Connect docs explain:

When a middleware passes an error to next, the app will proceed to look for the error middleware that was declared after that middleware and invoke it, skipping any error middleware above that middleware and any non-error middleware below.

Meaning that if we define an error middleware (by requesting the err object in addition to the req, res, next) this middleware is injected before the error actually appears, rendering the function useless.

[DiederikvandenB]

Using the Nuxt Modules I was able to get Sentry working. Check this gist.

You will want to add the sentry.js and sentry-client.js files to the modules directory, and then add the module to your nuxt.config.js using the correct settings.

A quick explanation what this code does. As I explained in the comment above, the problem is that we cannot add our own error handling because it's loaded before Nuxt's own middleware. What I did is 'backup' the original nuxtErrorMiddleware, then I overwrite it with the middleware that actually loads Sentry, and then I execute the original nuxtErrorMiddleware again, so we see the nicely printed error.

[Atinux]

Wow this is awesome @DiederikvandenB

I would love to see nuxt-sentry module, would you be ok to create it on nuxt-community?

We have a starter template for a module to get you started quickly: https://github.com/nuxt-community/module-template

[hackuun]

I don't understand why this issue is closed? I don't want to use Sentry. How to handle errors in Nuxt? This is so confusing. I have error that Error template is not catching. You guys can explain how to handle it, please?

[DiederikvandenB]

While I agree with the fact that it would be great to have a more straightforward way to handle errors, or maybe better documentation regarding this subject, but the answer to your question is already posted above, @iamdubx.

You could either check out my gist, or my module, which you can find here: https://github.com/nuxt-community/sentry-module. If you do not want to use Sentry that is of course perfectly fine. You can just modify the code, specifically this file. Just remove all the references to Sentry/Raven and add your own error handler on what is now rule number 53. Good luck.

[DualWield]

I don't understand why this issue is closed? I also want to know how to handle global errors in Nuxt .

[DiederikvandenB]

@DualWield Check this out.

[DualWield]

@DiederikvandenB Thank you. Yes, it seems that can solve this problem.But I dont' know how to (where to) hook the errorMiddleware. Is there something in the document ?

[DiederikvandenB]

Check these two lines and this example.

Basically what you need to do is create a plugin which hooks on to the render:errorMiddleware. Good luck =).

@Atinux, would you appreciate a PR for the docs in which I explain the errorMiddleware hook?

[Atinux]

I will more than appreciate @DiederikvandenB :)

[DiederikvandenB]

In that case I'll have a look at it tonight!

[nicroto]

Nuxt.js is great.

A single "_check how this project does it_" line within the API docs, though, is not a good documentation.
Please, consider an example within the docs of the (supposedly) simple issue of _Handling Errors in SSR_, which doesn't have the inherent distraction (and over-complication) of trying to distil it from a whole project.

Thanks for working on this issue.

[ChrisRobston]

You guys are rock!!! Just letting you know, sorry for flood.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.