JS错误监控上报后台你了解多少？
<-catch
1. 运⾏时错误
try {
fn()
} catch (e) {
console.log(e);
}
2. 异步错误
try {
setTimeout(() => {
fn()        // 异步错误
})
} catch(e) {
console.log('我感知不到错误');
console.log(e);
}
复制代码
总结: 只能捕获捉到运⾏时⾮异步错误，异步错误就显得⽆能为⼒，捕捉不到
2. r
1.同步错误
/**
* @param {String}  msg    错误信息
* @param {String}  url    出错⽂件
* @param {Number}  row    ⾏号
* @param {Number}  col    列号
* @param {Object}  error  错误详细信息
*/
console.log('我知道错误了');
return true;
};
new Error();
2.异步错误
console.log('我知道异步错误了');
return true;
};
setTimeout(() => {
new Error();;
});
复制代码
注意：在事件处理程序中返回false，可以阻⽌浏览器报告错误的默认⾏为
return false;
}
复制代码
当我们遇到 "img src="./404.png" 报 404 ⽹络请求异常的时候，r 是⽆法帮助我们捕获到异常的。
3.资源加载错误
1. r
2. Entries()
3. Error事件捕获 （全局监控静态资源异常）
1. r
如script，image等标签src引⽤，会返回⼀个event对象 ,TIPS: r不会冒泡到window对象，所以r⽆法监控资源加载错误
var img = new Image();
img.src = 'xxx/xxx.jpg';
console.log(event);
}
复制代码
2. Entries()
返回已成功加载的资源列表，然后⾃⾏做⽐对差集运算，核实哪些⽂件没有加载成功
var result = [];
Entries().forEach(function (perf) {
result.push({
'url': perf.name,
'entryType': Type,
'type': perf.initiatorType,
'duration(ms)': perf.duration
});
});
console.log(result);
复制代码
3. Error事件捕获
**404.png**
复制代码
window.addEventListener('error', (msg, url, row, col, error) => {  console.log('我知道 404 错误了');
console.log(
msg, url, row, col, error
);
return false;
}, true);
复制代码
4. 全局去捕获promise error
window.addEventListener("unhandledrejection", function(e) {    e.preventDefault()
console.log('我知道 promise 的错误了');
console.ason);
return true;
});
console.log(err);
})
new Promise((resolve, reject) => {
reject('promise error');
}).catch((err)=>{
console.log(err);
})
new Promise((resolve) => {
resolve();
}).then(() => {
throw 'promise error'
});
new Promise((resolve, reject) => {
reject(123);
})
复制代码
5. 跨域的js错误捕获
⼀般涉及跨域的js运⾏错误时会抛出错误提⽰script error，但没有具体信息（如出错⽂件，⾏列号提⽰等）, 可利⽤资源共享策略来捕获跨域js错误
1. 客户端：在script标签增加crossorigin属性（客户端）
2. 服务端：js资源响应头Access-Control-Allow-Origin: *
6. Iframe错误
<iframe src="./iframe.html" frameborder="0"></iframe>
<script>
window.frames[0].onerror = function (msg, url, row, col, error) {
console.log('我知道 iframe 的错误了，也知道错误信息');
console.log({
msg,  url,  row, col, error
})
return true;
};
</script>
复制代码
7. Node 错误监控
1. uncaughtException来全局捕获未捕获的Error
未捕获的 JavaScript 异常⼀直冒泡回到事件循环时，会触发 'uncaughtException' 事件。 默认情况下，Node.js 通过将堆栈跟踪打印到stderr 并使⽤退出码 1 来处理此类异常，从⽽覆盖任何先前设置的 itCode。 为 'uncaughtException' 事件添加处理程序会覆盖此默认⾏为。 或者，更改 'uncaughtException' 处理程序中的 itCode，这将导致进程退出并提供退出码。 否则，在存在这样的处理程序的情况下，进程将以 0 退出
<("uncaughtException", function(a) {
})
复制代码
2. unhandledRejection局部错误
如果在事件循环的⼀次轮询中，⼀个 Promise 被 rejected，并且此 Promise 没有绑定错误处理器， 'unhandledRejection 事件会被触发。 当使⽤ Promise 进⾏编程时，异常会以 "rejected promises" 的形式封装。Rejection 可以被 promise.catch() 捕获并处理，并且在 Promise 链中传播。'unhandledRejection 事件在探测和跟踪 promise 被 rejected，并且 rejection 未被处理的场景中是很有⽤的。
<("unhandledRejection", function(a) {
});
复制代码
8.
var consoleError = ;
< = function () {
alert(JSON.stringify(arguments)); // ⾃定义处理
consoleError && consoleError.apply(window, arguments);
};
复制代码
9. 接⼝错误
1. xmlHttpRequest封装
if(!window.XMLHttpRequest) return;
var xmlhttp = window.XMLHttpRequest;
var _oldSend = xmlhttp.prototype.send;
var _handleEvent = function (event) {
if (event && event.currentTarget && event.currentTarget.status !== 200) {
// ⾃定义错误上报 }
}
xmlhttp.prototype.send = function () {
if (this['addEventListener']) {
this['addEventListener']('error', _handleEvent);
this['addEventListener']('load', _handleEvent);
this['addEventListener']('abort', _handleEvent);
} else {
var _oldStateChange = this['onreadystatechange'];
this['onreadystatechange'] = function (event) {
if (adyState === 4) {
_handleEvent(event);
}
js arguments_oldStateChange && _oldStateChange.apply(this, arguments);
};
}
return _oldSend.apply(this, arguments);
}
复制代码
2. fetch封装
if(!window.fetch) return;
let _oldFetch = window.fetch;
window.fetch = function () {
return _oldFetch.apply(this, arguments)
.
then(res => {
if (!res.ok) { // True if status is HTTP 2xx
// 上报错误
}
return res;
})
.catch(error => {
// 上报错误
throw error;
})
}
复制代码
统计每个页⾯的JS和CSS加载时间
在JS或者CSS加载之前打上时间戳，加载之后打上时间戳，并且将数据上报到后台。加载时间反映了页⾯⽩屏，可操作的等待时间。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。