搭建前端监控，如何采集异常数据？( 三 ) _异常

上述方式可以很轻松的监听到图片加载异常，这就是为什么更推荐 . 的原因。不过要记得，第三个参数设为 true，监听事件捕获，就可以全局捕获到 JS 异常和资源加载异常。
需要特别注意，. 同样不能捕获异常。不管是 .then() 写法还是 async/await 写法，发生异常时都不能捕获。
因此，我们还需要全局监听一个函数来捕获未处理的异常。
// promise 错误捕获window.addEventListener('unhandledrejection', (error) => {// 打印异常原因console.log(error.reason);handleError(error);// 阻止控制台打印error.preventDefault();});
事件会在发生异常并且没有指定 catch 的时候触发，相当于一个全局的异常兜底方案。这个函数会捕捉到运行时意外发生的异常，这对我们排错非常有用。
默认情况下，发生异常且未被 catch 时，会在控制台打印异常。如果我们想阻止异常打印，可以用上面的 error.() 方法。
异常处理函数
前面我们在捕获到异常时调用了一个异常处理函数，所有的异常和上报逻辑统一在这个函数内处理，接下来我们实现这个函数。
const handleError = (error: any, type: 1 | 2) {if(type == 1) {// 处理接口异常}if(type == 2) {// 处理前端异常}}
为了区分异常类型，函数新加了第二个参数 type 表示当前异常属于前端还是接口。在不同的场景中使用如下：
处理接口异常
处理接口异常，我们需要将拿到的 error 参数解析，然后取到需要的数据。接口异常一般需要的数据字段如下：
【搭建前端监控，如何采集异常数据？】这些字段都可以在 error 参数中获取，方法如下：
const handleError = (error: any, type: 1 | 2) {if(type == 1) {// 此时的 error 响应，它的 config 字段中包含请求信息let { url, method, params, data } = error.configlet err_data = http://www.kingceram.com/post/{url, method,params: { query: params, body: data },error: error.data?.message || JSON.stringify(error.data),})}}
对象中的表示 GET 请求的 query 参数，data 表示 POST 请求的 body 参数，所以我在处理参数的时候，将这两个参数合并为一个，用一个属性来表示。
params: { query: params, body: data }
还有一个 error 属性表示错误信息，这个获取方式要根据你的接口返回格式来拿。要避免获取到接口可能返回的超长错误信息，多半是接口没处理，这样可能会导致写入数据失败，要提前与后台规定好。
处理前端异常
前端异常异常大多数就是 js 异常，异常对应到 js 的 Error 对象，在处理之前，我们先看 Error 有哪几种类型：
这几类异常的引用对象都是 Error，因此可以这样获取：
const handleError = (error: any, type: 1 | 2) {if(type == 2) {let err_data = http://www.kingceram.com/post/null// 监测 error 是否是标准类型if(error instanceof Error) {let { name, message } = errorerr_data = {type: name,error: message}} else {err_data = {type: 'other',error: JSON.strigify(error)}}}}
上述判断中，首先判断异常是否是 Error 的实例。事实上绝大部分的代码异常都是标准的 JS Error，但我们这里还是判断一下，如果是的话直接获取异常类型和异常信息，不是的话将异常类型设置为 other 即可。
我们随便写一个异常代码，看一下捕获的结果：
function test() {console.aaa('ccc');}test();
然后捕获到的异常是这样的：