Skip to content

Commit 1b110da

Browse files
committed
feat: production error codes
1 parent 0067173 commit 1b110da

File tree

7 files changed

+96
-2
lines changed

7 files changed

+96
-2
lines changed

.vitepress/config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const nav: ThemeConfig['nav'] = [
1717
{ text: 'Quick Start', link: '/guide/quick-start' },
1818
// { text: 'Style Guide', link: '/style-guide/' },
1919
{ text: 'Glossary', link: '/glossary/' },
20+
{ text: 'Error Reference', link: '/error-reference/' },
2021
{
2122
text: 'Vue 2 Docs',
2223
link: 'https://v2.vuejs.org'
@@ -701,7 +702,7 @@ export default defineConfigWithTheme<ThemeConfig>({
701702
markdown: {
702703
config(md) {
703704
md.use(headerPlugin)
704-
// .use(textAdPlugin)
705+
// .use(textAdPlugin)
705706
}
706707
},
707708

src/api/application.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ Execute a callback with the current app as injection context.
285285

286286
- **Details**
287287

288-
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.
288+
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.
289289

290290
- **Example**
291291

@@ -374,6 +374,10 @@ Assign a global handler for uncaught errors propagating from within the applicat
374374
- Custom directive hooks
375375
- Transition hooks
376376

377+
:::tip
378+
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).
379+
:::
380+
377381
- **Example**
378382

379383
```js

src/api/composition-api-lifecycle.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,10 @@ Registers a hook to be called when an error propagating from a descendant compon
206206

207207
The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type.
208208

209+
:::tip
210+
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).
211+
:::
212+
209213
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.
210214

211215
The hook can return `false` to stop the error from propagating further. See error propagation details below.

src/api/options-lifecycle.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,10 @@ Called when an error propagating from a descendant component has been captured.
195195

196196
The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type.
197197

198+
:::tip
199+
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).
200+
:::
201+
198202
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.
199203

200204
The hook can return `false` to stop the error from propagating further. See error propagation details below.

src/error-reference/ErrorsTable.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
kind: string
4+
errors: Record<any, string>
5+
highlight?: any
6+
}>()
7+
</script>
8+
9+
<template>
10+
<table>
11+
<thead>
12+
<tr>
13+
<th>Code</th>
14+
<th>Message</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr
19+
v-for="(msg, code) of errors"
20+
:class="{ highlight: highlight === `${kind}-${code}` }"
21+
>
22+
<td :id="`${kind}-${code}`" v-text="code" />
23+
<td v-text="msg" />
24+
</tr>
25+
</tbody>
26+
</table>
27+
</template>
28+
29+
<style scoped>
30+
.highlight {
31+
color: var(--vt-c-yellow-darker);
32+
font-weight: bold;
33+
}
34+
</style>

src/error-reference/errors.data.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineLoader } from 'vitepress'
2+
import { errorMessages } from 'vue/compiler-sfc'
3+
// @ts-expect-error internal api
4+
import { ErrorTypeStrings } from 'vue'
5+
6+
function filterEmptyMsg(data: Record<number, string>) {
7+
return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg))
8+
}
9+
10+
export default defineLoader({
11+
load() {
12+
return {
13+
compiler: filterEmptyMsg(errorMessages),
14+
runtime: filterEmptyMsg(ErrorTypeStrings)
15+
}
16+
}
17+
})

src/error-reference/index.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup>
2+
import { ref, onMounted } from 'vue'
3+
import { data } from './errors.data.ts'
4+
import ErrorsTable from './ErrorsTable.vue'
5+
6+
const highlight = ref()
7+
onMounted(() => {
8+
highlight.value = location.hash.slice(1)
9+
})
10+
</script>
11+
12+
# Production Error Code Reference {#error-reference}
13+
14+
## Runtime Errors {#runtime-errors}
15+
16+
In production builds, the 3rd argument passed to the following error handler APIs will be a short code instead of the full information string:
17+
18+
- [`app.config.errorHandler`](/api/application.html#app-config-errorhandler)
19+
- [`onErrorCaptured`](/api/composition-api-lifecycle.html#onerrorcaptured) (Composition API)
20+
- [`errorCaptured`](/api/options-lifecycle.html#errorcaptured) (Options API)
21+
22+
The following table maps the codes to their original full information strings.
23+
24+
<ErrorsTable kind="runtime" :errors="data.runtime" :highlight="highlight" />
25+
26+
## Compiler Errors {#compiler-errors}
27+
28+
The following table provides a mapping of the production compiler error codes to their original messages.
29+
30+
<ErrorsTable kind="compiler" :errors="data.compiler" :highlight="highlight" />

0 commit comments

Comments
 (0)