1:静态资源加载错误的捕获方法
方法一:
window.addEventListener('error', args => {
console.log('error--------------------------event:', args)
return true
}, true)
方法二:
手动创建script(其他资源创建其他标签)标签,利用script标签的onerror以及 onload事件
onerror:当资源请求不到时,执行。注意 当js文件执行过程中报错,监听不到,用别的方法
onload:当资源请求成功时,执行。
2:监听js执行错误
解决跨域资源文件方法与上面一致
window.onerror = function(message, source, lineno, colno, error) {
console.log(message, source, lineno, colno, error, '----')
}
3:Promise异常捕获
window.addEventListener("unhandledrejection", e => {
console.log('error--------------------------unhandledrejection:', e)
return false
})
vue项目处理方法:
Vue.config.errorHandler = (err, vm, info) => {
console.log('Vue.config.errorHandler:', err, vm, info)
}
如果使用了vue的错误监听,error事件将不再生效。同时vue的错误监听也能监听promise的异常
window.onerror = function (message, source, lineno, colno, error) {
console.log(message, source, lineno, colno, error);
};
window.addEventListener(
"error",
(args) => {
if (args.target.tagName == "SCRIPT") {
console.log("script:", args.target.src);
} else if (args.target.tagName == "LINK") {
console.log("link:", args.target.href);
} else if (args.target.tagName == "IMG") {
console.log("img:", args.target.src);
}
return true;
},
true
);
// 动态创建dom
let script = document.createElement("link");
script.href = "https://seals.fangxin.c/ipri/js/sck.c2901f63b6857ee13f1a.js"; // 没有这个脚本
script.rel = "stylesheet";
document.body.append(script);
script.onerror = function (err) {
console.log("Error loading ", err); // Error loading https://example.com/404.js
};
script.onload = function () {
console.log("Error loading "); // Error loading https://example.com/404.js
};