前端监控系统

太过爱你忘了你带给我的痛 2022-02-03 04:06 257阅读 0赞

###### *最新更新时间：2019年05月08日18:03:19* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：资源加载出错，运行时出错

#### 概述 ####

> 在开发项目的过程中，正式环境出现了浏览器crash，这种情况在开发过程中无法复现，是一个需要长期追踪的问题，因此项目中引入了前端监控系统。

#### 资源加载出错的捕获方案 ####

<img src="image.gif" onerror="myFunction()">
    
    document.getElementById("myImg").addEventListener("error", myFunction);
    
    function myFunction() { 
    	document.getElementById("demo").innerHTML = "无法加载图片。";
    }

#### 运行时出错的捕获方案 ####

//方案一
    try{ 
    	let a = 0;
    	console.log(a)
    }cache(e){ 
    	//错误信息发送给后端，保存到数据库
    	sendMonitorErrorInfo(JSON.stringfy(e));
    }
    //方案二：以react项目为例，监控某个页面的异常
    componentWillMount() { 
        //运行时监控系统
        window.onerror = function(msg, url, row, column, error) { 
          //console.log('完整信息无法发送给后端',error)
          sendMonitorErrorInfo(msg, url, row, column, error.toString()).then( res => { 
            //console.log(res);
          }).catch((e) => { 
            //console.log(e);
          })
        }
    }
    //方案三：MDN推荐的形式
    componentWillMount() { 
        //运行时监控系统
        window.onerror = function (msg, url, lineNo, columnNo, error) { 
        	var string = msg.toLowerCase();
        	var substring = "script error";
        	if (string.indexOf(substring) > -1){ 
            	alert('Script Error: See Browser Console for Detail');
        	} else { 
            	var message = [
                	'Message: ' + msg,
                	'URL: ' + url,
                	'Line: ' + lineNo,
                	'Column: ' + columnNo,
                	'Error object: ' + JSON.stringify(error)
            	].join(' - ');
            	alert(message);
        	}
        	return false;
    	};
    }

> window.onerror方法触发的两种场景：
> 
>  *  代码报错
>  *  throw new Error(‘toggle window.onerror’);

#### window.onerror做全局监控的跨域问题 ####

###### [假设在www.wanshaob.com/static/a.js中做全局监控，不同域的www.hehe.com/static/b.js上报错误信息给主域名www.wanshaob.com，此时会被拦截][www.wanshaob.com_static_a.js_www.hehe.com_static_b.js_www.wanshaob.com] ######

//通过onerror函数收集不同域的js文件的错误，需要做两个处理：
    //1、设置存放js文件的服务器允许跨域，/usr/local/webserver/nginx/conf/nginx.conf的配置文件中配置以下参数：
    http { 
        server { 
            location / { 
    			add_header Access-Control-Allow-Origin *;
        		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            }
        }
    }
    //配置文件nginx.conf的完整信息
    http { 
        include             mime.types;    
        default_type        application/octet-stream;
        server { 
            listen       80;
            server_name  wanshaobo.cn;
            access_log   logs/1.log  combined;
            error_log    logs/2.log   warn;
    
            location / { 
                root /root/html/dist;
                index index.html;
                try_files $uri /index.html;
                
    			add_header Access-Control-Allow-Origin *;
        		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
        		if ($request_method = 'OPTIONS') { 
            		return 204;
        		}
            }
    
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
            proxy_pass http://127.0.0.1:8001/; 
            error_page   500 502 503 504  /50.html;
        }
    
    }
    //2、引用相关的js文件时加上crossorigin属性
    <script type="text/javascript" src="http://www.hehe.com/static/b.js"  crossorigin></script>

#### 参考资料 ####

*  [GlobalEventHandlers.onerror  
    ][Global_Event_Handlers_.onerror]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[www.wanshaob.com_static_a.js_www.hehe.com_static_b.js_www.wanshaob.com]: http://xn--www-cy0en82a0l6f.wanshaob.com/static/a.js%E4%B8%AD%E5%81%9A%E5%85%A8%E5%B1%80%E7%9B%91%E6%8E%A7%EF%BC%8C%E4%B8%8D%E5%90%8C%E5%9F%9F%E7%9A%84www.hehe.com/static/b.js%E4%B8%8A%E6%8A%A5%E9%94%99%E8%AF%AF%E4%BF%A1%E6%81%AF%E7%BB%99%E4%B8%BB%E5%9F%9F%E5%90%8Dwww.wanshaob.com%EF%BC%8C%E6%AD%A4%E6%97%B6%E4%BC%9A%E8%A2%AB%E6%8B%A6%E6%88%AA
[Global_Event_Handlers_.onerror]: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460