一文告诉你如何优雅处理前端异常？

对于 iframe 的异常捕获，我们还得借力 window.onerror：

window.onerror = function(message, source, lineno, colno, error) { 
console.log('捕获到异常：',{message, source, lineno, colno, error}); 
} 

一个简单的例子可能如下：

  
<iframe src="./iframe.html" frameborder="0"></iframe> 
<script> 
window.frames[0].onerror = function (message, source, lineno, colno, error) { 
console.log('捕获到 iframe 异常：',{message, source, lineno, colno, error}); 
return true; 
}; 
</script> 
十、Script error 

一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：

跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性。

<script src="http://jartto.wang/main.js" crossorigin></script>

或者动态去添加 js 脚本：

const script = document.createElement('script'); 
script.crossOrigin = 'anonymous'; 
script.src = url; 
document.body.appendChild(script); 

特别注意，服务器端需要设置：Access-Control-Allow-Origin

此外，我们也可以试试这个-解决 Script Error 的另类思路：

const originAddEventListener = EventTarget.prototype.addEventListener; 
EventTarget.prototype.addEventListener = function (type, listener, options) { 
const wrappedListener = function (...args) { 
try { 
return listener.apply(this, args); 
} 
catch (err) { 
throw err; 
} 
} 
return originAddEventListener.call(this, type, wrappedListener, options); 
} 

简单解释一下：

• 改写了 EventTarget 的 addEventListener 方法；
• 对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；
• 浏览器不会对 try-catch 起来的异常进行跨域拦截，所以 catch 到的时候，是有堆栈信息的；
• 重新 throw 出来异常的时候，执行的是同域代码，所以 window.onerror 捕获的时候不会丢失堆栈信息；

利用包装 addEventListener，我们还可以达到「扩展堆栈」的效果：

(() => { 
const originAddEventListener = EventTarget.prototype.addEventListener; 
EventTarget.prototype.addEventListener = function (type, listener, options) { 
+ // 捕获添加事件时的堆栈 
+ const addStack = new Error(`Event (${type})`).stack; 
const wrappedListener = function (...args) { 
try { 
return listener.apply(this, args); 
} 
catch (err) { 
+ // 异常发生时，扩展堆栈 
+ err.stack += 'n' + addStack; 
throw err; 
} 
} 
return originAddEventListener.call(this, type, wrappedListener, options); 
} 
})(); 

十一、崩溃和卡顿

卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？

崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!