不知道前端代码哪里报错了？我有七种方式去监控它！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

我之前写了一个前端监控的库 sunshine-track，很多人都来问我说，错误监控 这个环节的思路是什么，要怎么在前端项目中做错误监控？

链接：https://github.com/sanxin-lin/sunshine-track

错误类型

我们先来说说前端中的错误类型有哪一些

常见错误类型

1、SyntaxError

SyntaxError 是解析时发生语法错误，这个错误是捕获不到的，因为它是发生在构建阶段，而不是运行阶段

2、TypeError

TypeError 指的是：值不是所期待的类型

3、ReferenceError

ReferenceError 指的是：引用未声明的变量

4、RangeError

RangeError 指的是：当一个值不在其所允许的范围或者集合中，通常会在无限递归时报错

网络错误

1、ResourceError

ResourceError 指的是：资源加载错误

2、请求错误

错误监听

接下来讲一下我们应该如何监听这些错误

try...catch

try...catch 是捕获错误的重要方式，但是它只能捕获运行报错、同步报错，捕获不了 编译报错、异步报错

window.onerror

代码报错时，会触发 window.onerror 回调函数，这个回调函数接受了以下几个参数

但是 window.onerror 也是有缺点的，捕获不了 编译报错、资源报错

window.addEventListener('error')

由于 冒泡机制 ，当资源报错 时触发 error，会冒泡到 window 上，所以 window.addEventListener('error') 可以捕获到 资源报错，但是它也只能捕获 script、css、img 这些标签加载资源的报错，而捕获不了 new Image 这种资源加载报错，且捕获不了 网络错误

Promise catch

当 Promise 状态变成 rejected 时，可以使用 catch 方法去捕获

async/await

try...catch 虽然捕获不了异步错误，但是我们知道 async/await 是用同步的方式去执行异步

window.addEventListener('unhandledrejection')

无论是 Promise、async/await 归根结底都是 Promise异步报错，都可以使用 window.addEventListener('unhandledrejection') 来捕获错误

Vue & React

Vue 提供了 Vue.config.errorHandler 这个属性，可传入错误回调，只要是组件里报错了，都会被这个回调函数捕获

React 需要写一个错误边界接收组件 ErrorBoundary

结语

我是林三心，一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手