如何监听Vue项目报错的4种方式 

window.onerror = function(message,source,line,column,error) {
    // do something
};

window.addEventListener('error')

window.addEventListener('error', event => {});

// App.vue
// window.onerror是全局监听，因此放在入口是比较合理的，尽管也可以放在其他位置
...
<script>
export default {
    mounted() {
        window.onerror = function(message,source,line,column,error) {
            console.log('window.onerror----', message,source,line,column,error);
        }
        // 效果与上一个类似，都是挂载到全局，两者使用其一即可。如果两者都使用，会重复处理error
        window.addEventListener('error', event => {
            console.log('window error on listener---', event);
        })
    }
}
</script>
...

// child.vue
// 图片资源加载失败
<img src="123" alt="" @error="event => handleError(event)" />
...
handleError(event) {
    console.log('handleError-----', event);
    throw new Error('图片加载失败了'); // 手动抛出异常，以便全局事件可以监听到
}

// main.js
...
const app = createApp(App)
app.config.errorHandler = (err, vm info) => {
    console.log('errorHandle', err, vm, info);
    // err，错误对象
    // vm，发生错误的组件实例
    // info，Vue特定的错误信息，例如错误发生的生命周期、错误发生的事件
}

// main.js
const app = createApp(App)
app.config.errorHandler = (err, vm info) => {
    console.log('errorHandle', err, vm, info); // errorHandler也会执行两次
    // err，错误对象
    // vm，发生错误的组件实例
    // info，Vue特定的错误信息，例如错误发生的生命周期、错误发生的事件
}
// App.vue
...
<!-- 引入父组件，并注册组件 -->
<FatherErrorDemo />
...
errorCaptured: (err, vm, info) => {
    console.log('根组件 捕获异常 errorCaptured', err,vm,info)
    // 根组件的errorCaptured会执行两次，先捕获FatherErrorDemo钩子自身的错误，然后捕获childErrorDemo的错误
    // 因此vm也分别指向FatherErrorDemo和childErrorDemo
    console.log('根组件 vm', vm.$data);
    // return false;
}
// FatherErrorDemo.vue
...
<div>
this is FatherErrorDemo
<!-- 引入子组件，并注册组件 -->
<childErrorDemo />
</div>
...
errorCaptured: (err, vm, info) => {
    console.log('父组件 错误捕获', err,vm,info);
    console.log('父组件 vm', vm.$data); // vm 指向childErrorDemo实例
    this.father(); // 未定义，此处会抛出错误。errorCaptured钩子函数自身产生错误
    // return false;
}
// childErrorDemo.vue
...
<div>
this is childErrorDemo
</div>
...
mounted() {
    this.child(); // 未定义，会抛出错误
}

// main.js
const app = createApp(App)
app.config.errorHandler = (err, vm info) => {
    console.log('errorHandle', err, vm, info); // errorHandler不会被调用
    // err，错误对象
    // vm，发生错误的组件实例
    // info，Vue特定的错误信息，例如错误发生的生命周期、错误发生的事件
}
// App.vue
...
<!-- 引入父组件，并注册组件 -->
<FatherErrorDemo />
...
mounted() {
    window.onerror = function(msg,source,line,column,err) {
      console.log('window.onerror----', msg,source,line,column,err);
      return true;
    }
    window.addEventListener('unhandledrejection', event => {
      console.log('监听Promise unhandledrejection', event)
    })
},
errorCaptured: (err, vm, info) => {
    // errorCaptured不会被调用
    console.log('根组件 捕获异常 errorCaptured', err,vm,info)
    console.log('根组件 vm', vm.$data);
    // return false;
}
// FatherErrorDemo.vue
...
<div>
this is FatherErrorDemo
</div>
...
mounted() {
    setTimeout(() => {
        this.father();
    }, 1000); // 异步执行
    new Promise((resolve, reject) => {
      this.father();
      resolve();
    })
}