From 1b110daa95146624ac0b44c4c98ad5bfe5ba3e12 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 26 Dec 2023 16:20:35 +0800 Subject: [PATCH] feat: production error codes --- .vitepress/config.ts | 3 ++- src/api/application.md | 6 ++++- src/api/composition-api-lifecycle.md | 4 ++++ src/api/options-lifecycle.md | 4 ++++ src/error-reference/ErrorsTable.vue | 34 ++++++++++++++++++++++++++++ src/error-reference/errors.data.ts | 17 ++++++++++++++ src/error-reference/index.md | 30 ++++++++++++++++++++++++ 7 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 src/error-reference/ErrorsTable.vue create mode 100644 src/error-reference/errors.data.ts create mode 100644 src/error-reference/index.md diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 3d72e387bb..6ad3eb2cd4 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -17,6 +17,7 @@ const nav: ThemeConfig['nav'] = [ { text: 'Quick Start', link: '/guide/quick-start' }, // { text: 'Style Guide', link: '/style-guide/' }, { text: 'Glossary', link: '/glossary/' }, + { text: 'Error Reference', link: '/error-reference/' }, { text: 'Vue 2 Docs', link: 'https://v2.vuejs.org' @@ -701,7 +702,7 @@ export default defineConfigWithTheme({ markdown: { config(md) { md.use(headerPlugin) - // .use(textAdPlugin) + // .use(textAdPlugin) } }, diff --git a/src/api/application.md b/src/api/application.md index 5f355123f8..b3c790e6df 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -285,7 +285,7 @@ Execute a callback with the current app as injection context. - **Details** - Expects a callback function and runs the callback immediately. During the synchronous call of the callback, `inject()` calls are able to look up injections from the values provided by the current app, even when there is no current active component instance. The return value of the callback will also be returned. + Expects a callback function and runs the callback immediately. During the synchronous call of the callback, `inject()` calls are able to look up injections from the values provided by the current app, even when there is no current active component instance. The return value of the callback will also be returned. - **Example** @@ -374,6 +374,10 @@ Assign a global handler for uncaught errors propagating from within the applicat - Custom directive hooks - Transition hooks + :::tip + In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors). + ::: + - **Example** ```js diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md index 637c4faa9d..ad76b6485b 100644 --- a/src/api/composition-api-lifecycle.md +++ b/src/api/composition-api-lifecycle.md @@ -206,6 +206,10 @@ Registers a hook to be called when an error propagating from a descendant compon The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type. + :::tip + In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors). + ::: + You can modify component state in `errorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop. The hook can return `false` to stop the error from propagating further. See error propagation details below. diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md index d4f18648ff..5ce9cd5e6a 100644 --- a/src/api/options-lifecycle.md +++ b/src/api/options-lifecycle.md @@ -195,6 +195,10 @@ Called when an error propagating from a descendant component has been captured. The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type. + :::tip + In production, the 3rd argument (`info`) will be a shortened code instead of the full information string. You can find the code to string mapping in the [Production Error Code Reference](/error-reference/#runtime-errors). + ::: + You can modify component state in `errorCaptured()` to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop. The hook can return `false` to stop the error from propagating further. See error propagation details below. diff --git a/src/error-reference/ErrorsTable.vue b/src/error-reference/ErrorsTable.vue new file mode 100644 index 0000000000..b278c1a9fe --- /dev/null +++ b/src/error-reference/ErrorsTable.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/error-reference/errors.data.ts b/src/error-reference/errors.data.ts new file mode 100644 index 0000000000..d8044adf01 --- /dev/null +++ b/src/error-reference/errors.data.ts @@ -0,0 +1,17 @@ +import { defineLoader } from 'vitepress' +import { errorMessages } from 'vue/compiler-sfc' +// @ts-expect-error internal api +import { ErrorTypeStrings } from 'vue' + +function filterEmptyMsg(data: Record) { + return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg)) +} + +export default defineLoader({ + load() { + return { + compiler: filterEmptyMsg(errorMessages), + runtime: filterEmptyMsg(ErrorTypeStrings) + } + } +}) diff --git a/src/error-reference/index.md b/src/error-reference/index.md new file mode 100644 index 0000000000..c9d4e8e86c --- /dev/null +++ b/src/error-reference/index.md @@ -0,0 +1,30 @@ + + +# Production Error Code Reference {#error-reference} + +## Runtime Errors {#runtime-errors} + +In production builds, the 3rd argument passed to the following error handler APIs will be a short code instead of the full information string: + +- [`app.config.errorHandler`](/api/application.html#app-config-errorhandler) +- [`onErrorCaptured`](/api/composition-api-lifecycle.html#onerrorcaptured) (Composition API) +- [`errorCaptured`](/api/options-lifecycle.html#errorcaptured) (Options API) + +The following table maps the codes to their original full information strings. + + + +## Compiler Errors {#compiler-errors} + +The following table provides a mapping of the production compiler error codes to their original messages. + +