Vue & Error Boundary All In One

Vue & Error Boundary

Vue 错误处理

场景：单个小 UI 组件出错, 导致整个应用无法正常使用

目的：兜底，优雅降级，健壮性

https://cn.vuejs.org/api/

https://www.npmjs.com/package/vue-error-boundary

方法	支持版本	截图
app.config.errorHandler	Vue 2.x, Vue 3.x
errorCaptured	Vue 2.x, Vue 3.x
onErrorCaptured()	Vue 3.x

Vue 3 / Vue errorCaptured

app.config.errorHandler

用于为应用内抛出的未捕获错误指定一个全局处理函数。

interface AppConfig {
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` 是一个 Vue 特定的错误信息
    // 例如：错误是在哪个生命周期的钩子上抛出的
    info: string
  ) => void
}

https://cn.vuejs.org/api/application.html#app-config-errorhandler

errorCaptured

在捕获了后代组件传递的错误时调用。

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

https://cn.vuejs.org/api/options-lifecycle.html#errorcaptured

onErrorCaptured()

注册一个钩子，在捕获了后代组件传递的错误时调用。

function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void

https://cn.vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---