Vue3는 전역 예외 처리를 어떻게 구현하나요? 다음 글에서는 Vue3의 전역 예외 처리 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
구성 요소 라이브러리 또는 플러그인을 개발할 때 다음을 달성하기 위해 전역 예외 처리가 필요한 경우가 많습니다.
그럼 위 기능을 어떻게 구현할까요? 이 기사에서는 먼저 예외 처리 방법을 간략하게 구현한 다음 Vue3 소스 코드의 구현을 기반으로 자세히 소개하고 마지막으로 예외 처리의 몇 가지 핵심 구현을 요약합니다. [관련 권장 사항: vuejs 비디오 튜토리얼]
이 문서의 Vue3 버전은 3.0.11입니다
프론트엔드에는 다음과 같은 많은 일반적인 예외가 있습니다.
window.onerror를 통해Document
window.onerror()가 트리거되는 것을 볼 수 있습니다. window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
}message: error 메시지(문자열). HTML onerror="" 핸들러의 event에 사용할 수 있습니다. window.onerror文档可知，当 JS 运行时发生错误（包括语法错误），触发 window.onerror()：
try {
// do something
} catch (error) {
console.error(error);
}函数参数：
onerror=""处理程序中的 event。若该函数返回true，则阻止执行默认事件处理函数。
另外，我们也经常会使用 try...catchsource: 오류가 발생한 스크립트 URL(문자열)
(개체)try...catch
try...catch또한 예외를 처리하기 위해
statements
를 자주 사용합니다.const errorHandling = (fn, args) => {
let result;
try{
result = args ? fn(...args) : fn();
} catch (error){
console.error(error)
}
return result;
}errorHandling方法的 catch3. Thinking
를 통해 전역 예외 처리 방법을 캡슐화하고 호출자만 신경 쓰면 실행해야 하는 메서드를 전달할 수 있습니다. 이 전역 예외 처리 방법의 내부 논리를 모르고 호출 결과.
일반적인 사용법은 다음과 같습니다. errorHandling.ts 文件中定义了 callWithErrorHandling和 callWithAsyncErrorHandling
const f1 = () => {
console.log('[f1 running]')
throw new Error('[f1 error!]')
}
errorHandling(f1);
/*
输出：
[f1 running]
Error: [f1 error!]
at f1 (/Users/wangpingan/leo/www/node/www/a.js:14:11)
at errorHandling (/Users/wangpingan/leo/www/node/www/a.js:4:39)
at Object.<anonymous> (/Users/wangpingan/leo/www/node/www/a.js:17:1)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
*/const f1 = () => {
console.log('[f1]')
f2();
}
const f2 = () => {
console.log('[f2]')
f3();
}
const f3 = () => {
console.log('[f3]')
throw new Error('[f3 error!]')
}
errorHandling(f1)
/*
输出：
[f1 running]
[f2 running]
[f3 running]
Error: [f3 error!]
at f3 (/Users/wangpingan/leo/www/node/www/a.js:24:11)
at f2 (/Users/wangpingan/leo/www/node/www/a.js:19:5)
at f1 (/Users/wangpingan/leo/www/node/www/a.js:14:5)
at errorHandling (/Users/wangpingan/leo/www/node/www/a.js:4:39)
at Object.<anonymous> (/Users/wangpingan/leo/www/node/www/a.js:27:1)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
*/callWithErrorHandling：处理同步方法的异常；callWithAsyncErrorHandling：处理异步方法的异常。使用方式如下：
callWithAsyncErrorHandling( handler, instance, ErrorCodes.COMPONENT_EVENT_HANDLER, args )
代码实现大致如下：
// packages/runtime-core/src/errorHandling.ts
// 处理同步方法的异常
export function callWithErrorHandling(
fn: Function,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
args?: unknown[]
) {
let res
try {
res = args ? fn(...args) : fn(); // 调用原方法
} catch (err) {
handleError(err, instance, type)
}
return res
}
// 处理异步方法的异常
export function callWithAsyncErrorHandling(
fn: Function | Function[],
instance: ComponentInternalInstance | null,
type: ErrorTypes,
args?: unknown[]
): any[] {
// 省略其他代码
const res = callWithErrorHandling(fn, instance, type, args)
if (res && isPromise(res)) {
res.catch(err => {
handleError(err, instance, type)
})
}
// 省略其他代码
}callWithErrorHandling方法处理的逻辑比较简单，通过简单的 try...catch
// packages/runtime-core/src/errorHandling.ts
// 异常处理方法
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
// 省略其他代码
logError(err, type, contextVNode, throwInDev)
}
function logError(
err: unknown,
type: ErrorTypes,
contextVNode: VNode | null,
throwInDev = true
) {
// 省略其他代码
console.error(err)
}callWithAsyncErrorHandling 方法就比较巧妙，通过将需要执行的方法传入 callWithErrorHandling方法处理，并将其结果通过 .catch方法进行处理。在上面代码中，遇到报错的情况，都会通过 handleError()处理异常。其实现大致如下：
// src/main.js
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}保留核心处理逻辑之后，可以看到这边处理也是相当简单，直接通过 console.error(err) 문제 없습니다. 그런 다음 다음 단계는
callWithErrorHandling: 동기 메서드의 예외를 처리합니다. 🎜🎜callWithAsyncErrorHandling: 비동기 메서드의 예외를 처리합니다. 🎜🎜🎜사용법은 다음과 같습니다. 🎜// packages/runtime-core/src/errorHandling.ts
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
const contextVNode = instance ? instance.vnode : null
if (instance) {
// 省略其他代码
// 读取 errorHandler 配置项
const appErrorHandler = instance.appContext.config.errorHandler
if (appErrorHandler) {
callWithErrorHandling(
appErrorHandler,
null,
ErrorCodes.APP_ERROR_HANDLER,
[err, exposedInstance, errorInfo]
)
return
}
}
logError(err, type, contextVNode, throwInDev)
}(err: Error, instance: Component, info: string) => ?boolean
callWithErrorHandling 메서드에서 처리하는 로직은 비교적 간단하며 간단한 🎜을 사용하여 레이어를 생성합니다. 캡슐화의.
callWithAsyncErrorHandling 메서드는 실행해야 하는 메서드를 callWithErrorHandling 메서드에 전달하여 처리하고, 그 결과는 .catch<를 통해 처리됩니다. /코드> 메소드 . 🎜<h3 data-id="heading-7">2. 예외 처리🎜🎜위 코드에서 오류가 보고되면 <code>handleError()를 통해 예외를 처리합니다. 구현은 대략 다음과 같습니다. 🎜<template>
<Message></Message>
</template>
<script setup>
// App.vue
import { onErrorCaptured } from 'vue';
import Message from './components/Message.vue'
onErrorCaptured(function(err, instance, info){
console.log('[errorCaptured]', err, instance, info)
})
</script>console.error(err)를 통해 직접 출력됩니다. . 🎜在使用 Vue3 时，也支持指定自定义异常处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和相应的应用实例。
文档参考：《errorHandler》
使用方法如下，在项目 main.js文件中配置：
// src/main.js
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}那么 errorHandler()是何时执行的呢？我们继续看看源码中 handleError() 的内容，可以发现：
// packages/runtime-core/src/errorHandling.ts
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
const contextVNode = instance ? instance.vnode : null
if (instance) {
// 省略其他代码
// 读取 errorHandler 配置项
const appErrorHandler = instance.appContext.config.errorHandler
if (appErrorHandler) {
callWithErrorHandling(
appErrorHandler,
null,
ErrorCodes.APP_ERROR_HANDLER,
[err, exposedInstance, errorInfo]
)
return
}
}
logError(err, type, contextVNode, throwInDev)
}通过 instance.appContext.config.errorHandler取到全局配置的自定义错误处理函数，存在时则执行，当然，这边也是通过前面定义的 callWithErrorHandling来调用。
在使用 Vue3 的时候，也可以通过 errorCaptured生命周期钩子来捕获来自后代组件的错误。
文档参考：《errorCaptured》
入参如下：
(err: Error, instance: Component, info: string) => ?boolean
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
此钩子可以返回 false以阻止该错误继续向上传播。有兴趣的同学可以通过文档，查看具体的错误传播规则。
使用方法如下，父组件监听 onErrorCaptured生命周期（示例代码使用 Vue3 setup 语法）：
<template>
<Message></Message>
</template>
<script setup>
// App.vue
import { onErrorCaptured } from 'vue';
import Message from './components/Message.vue'
onErrorCaptured(function(err, instance, info){
console.log('[errorCaptured]', err, instance, info)
})
</script>子组件如下：
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script setup>
// Message.vue
const sendMessage = () => {
throw new Error('[test onErrorCaptured]')
}
</script>当点击「发送消息」按钮，控制台便输出错误：
[errorCaptured] Error: [test onErrorCaptured]
at Proxy.sendMessage (Message.vue:36:15)
at _createElementVNode.onClick._cache.<computed>._cache.<computed> (Message.vue:3:39)
at callWithErrorHandling (runtime-core.esm-bundler.js:6706:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6715:21)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:350:13) Proxy {sendMessage: ƒ, …} native event handler可以看到 onErrorCaptured生命周期钩子正常执行，并输出子组件 Message.vue内的异常。
那么这个又是如何实现呢？还是看 errorHandling.ts 中的 handleError() 方法：
// packages/runtime-core/src/errorHandling.ts
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
const contextVNode = instance ? instance.vnode : null
if (instance) {
let cur = instance.parent
// the exposed instance is the render proxy to keep it consistent with 2.x
const exposedInstance = instance.proxy
// in production the hook receives only the error code
const errorInfo = __DEV__ ? ErrorTypeStrings[type] : type
while (cur) {
const errorCapturedHooks = cur.ec // ①取出组件配置的 errorCaptured 生命周期方法
if (errorCapturedHooks) {
// ②循环执行 errorCaptured 中的每个 Hook
for (let i = 0; i < errorCapturedHooks.length; i++) {
if (
errorCapturedHooks[i](err, exposedInstance, errorInfo) === false
) {
return
}
}
}
cur = cur.parent
}
// 省略其他代码
}
logError(err, type, contextVNode, throwInDev)
}这边会先获取 instance.parent作为当前处理的组件实例进行递归，每次将取出组件配置的 errorCaptured 生命周期方法的数组并循环调用其每一个钩子，然后再取出当前组件的父组件作为参数，最后继续递归调用下去。
Vue3 还为异常定义了错误码和错误信息，在不同的错误情况有不同的错误码和错误信息，让我们能很方便定位到发生异常的地方。 错误码和错误信息如下：
// packages/runtime-core/src/errorHandling.ts
export const enum ErrorCodes {
SETUP_FUNCTION,
RENDER_FUNCTION,
WATCH_GETTER,
WATCH_CALLBACK,
// ... 省略其他
}
export const ErrorTypeStrings: Record<number | string, string> = {
// 省略其他
[LifecycleHooks.RENDER_TRACKED]: 'renderTracked hook',
[LifecycleHooks.RENDER_TRIGGERED]: 'renderTriggered hook',
[ErrorCodes.SETUP_FUNCTION]: 'setup function',
[ErrorCodes.RENDER_FUNCTION]: 'render function',
// 省略其他
[ErrorCodes.SCHEDULER]:
'scheduler flush. This is likely a Vue internals bug. ' +
'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'
}当不同错误情况，根据错误码 ErrorCodes来获取 ErrorTypeStrings错误信息进行提示：
// packages/runtime-core/src/errorHandling.ts
function logError(
err: unknown,
type: ErrorTypes,
contextVNode: VNode | null,
throwInDev = true
) {
if (__DEV__) {
const info = ErrorTypeStrings[type]
warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`)
// 省略其他
} else {
console.error(err)
}
}关于 Vue3 实现 Tree Shaking 的介绍，可以看我之前写的高效实现框架和 JS 库瘦身。
其中，logError 方法中就使用到了：
// packages/runtime-core/src/errorHandling.ts
function logError(
err: unknown,
type: ErrorTypes,
contextVNode: VNode | null,
throwInDev = true
) {
if (__DEV__) {
// 省略其他
} else {
console.error(err)
}
}当编译成 production 环境后，__DEV__分支的代码不会被打包进去，从而优化包的体积。
到上面一部分，我们就差不多搞清楚 Vue3 中全局异常处理的核心逻辑了。我们在开发自己的错误处理方法时，也可以考虑这几个核心点：
支持同步和异步的异常处理；
设置业务错误码、业务错误信息；
支持自定义错误处理方法；
支持开发环境错误提示；
支持 Tree Shaking。
原文地址：https://juejin.cn/post/7071982812668100616
위 내용은 Vue3가 전역 예외를 처리하는 방법을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
