浅谈前端中的错误捕获

浅谈前端中的错误捕获

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

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

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

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

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上面。url

解决方案code

1：全部的资源都放在同一个域名下。可是这样也会存在问题是不能利用cdn的优点。cdn

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