最新更新時間：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，此時會被攔截
//通過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>
參考資料
感謝閱讀，歡迎評論^-^