Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-03-09 03:03:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update rendering error page (#22523)

Browse Source
This commit is contained in:
Michael 2023-08-09 14:22:00 +03:00 committed by GitHub
parent b2cea4927e
commit 914a6aa7af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/1.getting-started/8.error-handling.md
View File

@ -57,9 +57,36 @@ You can change this behavior by setting `experimental.emitRouteChunkError` to `f
## 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.
When Nuxt encounters a fatal error (any unhandled error on the server, or an error created with `fatal: true` on the client) it will either render a JSON response (if requested with `Accept: application/json` header) or trigger a full-screen 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.
This error may occur during the server lifecycle when:
* processing your Nuxt plugins
* rendering your Vue app into HTML
* a server API route throws an error
An error can also occur on the client side when:
* processing your Nuxt plugins
* before mounting the application (`app:beforeMount` hook)
* mounting your app if the error was not handled with `onErrorCaptured` or `vue:error` hook
* the Vue app is initialized and mounted in browser (`app:mounted`).
The lifecycle hooks are listed [here](/docs/api/advanced/hooks).
You can customize this error page by adding `~/error.vue` in the source directory of your application, alongside `app.vue`. Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page.
The error page has a single prop - `error` which contains an error for you to handle.
The `error` object provides the fields: `url`, `statusCode`, `statusMessage`, `message`, `description` and `data`. If you have an error with custom fields they will be lost; you should assign them to `data` instead. For custom errors we highly recommend to use `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
```ts
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.hook('vue:error', (err) => {
//
})
})
```
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).