浅谈前端中的错误捕获

浅谈前端中的错误捕获

某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。

既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到错误呢？万能的try...catch

try{
  throw new Error()
} catch(e) {
  // handle error
}

看上去错误捕获是多么的简单，然而下面的场景下就不能捕获到了

try {
    setTimeout(() => {
        throw new Error('error')
    })
} catch (e) {
    // handle error
}

你会发现上面的例子中的错误不能正常捕获，看来错误捕获并不是这样简单try...catch就能搞定,当然你也可以为异步函数包裹一层try...catch来处理。

浏览器中，window.onerror来捕获你的错误

window.onerror = function (msg, url, row, col, error) {
    console.log('error');
    console.log({
        msg,  url,  row, col, error
    })
};

捕获到错误后就可以将错误上报，上报方式很简单，你可以通过创建简单的img,通过src指定上报的地址，当然为了避免上报发送过多的请求，可以对上报进行合并，合并上报。

但但你去看错误上报的信息的时候，你会发现一些这样的错误Script error

因为浏览器的同源策略，对于不同域名的错误，都抛出了Script error，怎么解决这个问题呢？特别是现在基本上js资源都会放在cdn上面。

解决方案

1：所有的资源都放在同一个域名下。但是这样也会存在问题是不能利用cdn的优势。

2：增加跨域资源支持，在cdn 上增加支持主域的跨域请求支持，在script 标签加crossorigin属性