前端错误监控捕获和上报

1、前端错误分为两大类:

     a、即时运行错误:代码错误;
     b、资源加载错误;

2、错误的捕获方式

    a、即时运行错误: 1) try..catch            2) window.onerror 捕获;         3)window.addEventListener("error",function(){},false);

    b、资源加载错误:  1) object.onerror   2) performance.getEntries()       3) Error事件捕获

    ps: 以上的方法无法捕获跨域的js运行错误,而要捕获跨域的js运行错误,需要配置以下内容:
          客户端:在script标签 增加 crossorigin属性;
          服务器端:设置js资源响应头:Access-Control-Allow-Origin:* ;


3、上报错误的方式
     上报错误可以通过 AJAX通信的方式上报,也可以采用Image 对象上报,国内常用的使用Image对象上报错误到服务器
通过Image  对象上报的话,将错误信息拼接在 image标签的src中,例如:

(new Image()).src = report_url+需拼接的错误信息;

4、捕获上报小demo




    
    
    
    
    错误捕获上报demo



    
     
    
    
    

前端错误监控捕获和上报_第1张图片

ps:学习过程的简单记录,须有不恰当之处,欢迎指正!
       最近比较忙,捕获和上报后面会补上完整代码demo!

//2020/05/07  添加demo

你可能感兴趣的:(前端,前端性能优化,javascript)