前端错误监控

javaScript

开门见山问法:如何监控js错误,另外一种问法:如何保证你的产品质量

1)、前端错误的分类
  • 即时运行错误(代码错误)
    ① try…catch
    ② window.onerror

  • 资源加载错误(资源加载错误不会冒泡到window,但可以捕获)
    ① object.onerror
    ② performance.getEntries()
    ③ Error事件捕获

window.addEventListener('error', (e) => { console.log('捕获错误', e) })
  • 延伸:跨域的js运行错误可以捕获麽?错误提示是什么,应该怎么处理?
    1、在script标签增加 crossorigin 属性
    2、设置js资源响应头 Access-Control-Allow-Origin:*
2)、错误的捕获方式
3)、上报错误的基本原理

1、采用Ajax通信的方式上报
2、利用Image对象上报

function errorImg() { (new Image()).src = 'https://baidu.com/props?r=11' } setInterval(() => { errorImg() }, 2000)

参考文章