feat: production error codes

.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<ThemeConfig>({
   markdown: {
     config(md) {
       md.use(headerPlugin)
-        // .use(textAdPlugin)
+      // .use(textAdPlugin)
     }
   },
 

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

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.

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.

src/error-reference/ErrorsTable.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  kind: string
+  errors: Record<any, string>
+  highlight?: any
+}>()
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Code</th>
+        <th>Message</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(msg, code) of errors"
+        :class="{ highlight: highlight === `${kind}-${code}` }"
+      >
+        <td :id="`${kind}-${code}`" v-text="code" />
+        <td v-text="msg" />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.highlight {
+  color: var(--vt-c-yellow-darker);
+  font-weight: bold;
+}
+</style>

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<number, string>) {
+  return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg))
+}
+
+export default defineLoader({
+  load() {
+    return {
+      compiler: filterEmptyMsg(errorMessages),
+      runtime: filterEmptyMsg(ErrorTypeStrings)
+    }
+  }
+})

src/error-reference/index.md

@@ -0,0 +1,30 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { data } from './errors.data.ts'
+import ErrorsTable from './ErrorsTable.vue'
+
+const highlight = ref()
+onMounted(() => {
+  highlight.value = location.hash.slice(1)
+})
+</script>
+
+# 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.
+
+<ErrorsTable kind="runtime" :errors="data.runtime" :highlight="highlight" />
+
+## Compiler Errors {#compiler-errors}
+
+The following table provides a mapping of the production compiler error codes to their original messages.
+
+<ErrorsTable kind="compiler" :errors="data.compiler" :highlight="highlight" />