mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-27 08:02:01 +00:00
91 lines
3.4 KiB
Markdown
91 lines
3.4 KiB
Markdown
# Error handling
|
|
|
|
## Handling errors
|
|
|
|
Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
|
|
|
|
1. Errors during the Vue rendering lifecycle (SSR + SPA)
|
|
1. Errors during API or Nitro server lifecycle
|
|
1. Server and client startup errors (SSR + SPA)
|
|
|
|
### Errors during the Vue rendering lifecycle (SSR + SPA)
|
|
|
|
You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
|
|
|
|
In addition, Nuxt provides a `vue:error` hook that will be called if there are any errors that propagate up to the top level.
|
|
|
|
If you are using a error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application.html#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
|
|
|
|
#### Example with global error reporting framework
|
|
|
|
```js
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
nuxtApp.vueApp.config.errorHandler = (error, context) => {
|
|
// ...
|
|
}
|
|
})
|
|
```
|
|
|
|
### Server and client startup errors (SSR + SPA)
|
|
|
|
Nuxt provides an `app:error` hook that will be called if there are any errors in starting your Nuxt application.
|
|
|
|
This includes:
|
|
|
|
* running Nuxt plugins
|
|
* processing `app:created` and `app:beforeMount` hooks
|
|
* mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
|
|
* processing the `app:mounted` hook
|
|
|
|
### Errors during API or Nitro server lifecycle
|
|
|
|
You cannot currently define a server-side handler for these errors, but can render an error page (see the next section).
|
|
|
|
## Rendering an error page
|
|
|
|
When Nuxt encounters a fatal error, whether during the server lifecycle, or when rendering your Vue application (both SSR and SPA), it will either render a JSON response (if requested with `Accept: application/json` header) or an HTML error page.
|
|
|
|
You can customize this error page by adding `~/error.vue` in the source directory of your application, alongside `app.vue`. This page has a single prop - `error` which contains an error for you to handle.
|
|
|
|
When you are ready to remove the error page, you can call the `clearError` helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
|
|
|
|
::alert{type="warning"}
|
|
Make sure to check before using anything dependent on Nuxt plugins, such as `$route` or `useRouter`, as if a plugin threw an error, then it won't be re-run until you clear the error.
|
|
::
|
|
|
|
### Example
|
|
|
|
```vue [error.vue]
|
|
<template>
|
|
<button @click="handleError">Clear errors</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
error: Object
|
|
})
|
|
|
|
const handleError = () => clearError({ redirect: '/' })
|
|
</script>
|
|
```
|
|
|
|
## Error helper methods
|
|
|
|
### useError
|
|
|
|
* `function useError (): Ref<any>`
|
|
|
|
This function will return the global Nuxt error that is being handled.
|
|
|
|
### throwError
|
|
|
|
* `function throwError (err: string | Error): Error`
|
|
|
|
You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page (as above) which you can clear with `clearError`.
|
|
|
|
### clearError
|
|
|
|
* `function clearError (redirect?: string): Promise<void>`
|
|
|
|
This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
|