跳到主要内容

onErrorCaptured

2023年05月03日
柏拉文
越努力，越幸运

一、认识​

onErrorCaptured 注册一个钩子，在捕获了后代组件传递的错误时调用。错误可以从以下几个来源中捕获:

你可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。注意不要让错误状态再次渲染导致本次错误的内容，否则组件会陷入无限循环。这个钩子可以通过返回 false 来阻止错误继续向上传递。

二、语法​

import Hello from './Hello.vue';
import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.log('App');
  console.log('err', err);
  console.log('instance', instance);
  console.log('info', info);
  return false / true;
});

  • err: 错误对象

  • instance: 触发该错误的组件实例

  • info: 一个说明错误来源类型的信息字符串

  • false / true: return false 阻止错误继续向上传递

三、捕获​

3.1 组件渲染​

3.2 事件处理器​

3.3 生命周期钩子​

3.4 setup() 函数​

3.5 侦听器​

3.6 自定义指令钩子​

3.7 过渡钩子​

四、规则​

  • 默认情况下，所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义)，这样这些错误都能在一个统一的地方报告给分析服务。

  • 如果组件的继承链或组件链上存在多个 errorCaptured 钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用。这个过程被称为向上传递，类似于原生 DOM 事件的冒泡机制。

  • 如果 errorCaptured 钩子本身抛出了一个错误，那么这个错误和原来捕获到的错误都将被发送到 app.config.errorHandler。

  • errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示这个错误已经被处理了，应当被忽略，它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。