前端捕捉错误方式(1)

最新推荐文章于 2024-08-13 00:43:50 发布

2401_84092398

最新推荐文章于 2024-08-13 00:43:50 发布

阅读量947

点赞数 15

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84092398/article/details/138984640

版权

程序员专栏收录该内容

284 篇文章 0 订阅

订阅专栏

方案一：script onerror

我们可以给 script 标签添加上 onerror 属性，这样在加载失败时触发事件回调，从而捕捉到异常。

1	<script onerror="onError(this)"></script>

并且，借助构建工具 ( 如 webpack 的 script-ext-html-webpack-plugin 插件) ，我们可以轻易地完成对所有 script 标签自动化注入 onerror 标签属性，不费吹灰之力。

new ScriptExtHtmlWebpackPlugin({

custom: {

test: /\.js$/,

attribute: 'onerror',

value: 'onError(this)'

}

})

方案二：window.addEventListener

上述方案已然不错，但我们也试想是否可以减少 onerrror 标签大量注入呢？类比脚本错误 onerror 的全局监控方式（详见：脚本错误量极致优化-监控上报与 Script error），是否也可以通过 window.onerror 去全局监听加载失败呢？

答案否定的，因为 onerror 的事件并不会向上冒泡，window.onerror 接收不到加载失败的错误。冒泡虽不行，但捕获可以！我们可以通过捕获的方式全局监控加载失败的错误，虽然这也监控到了脚本错误，但通过 !(event instanceof ErrorEvent) 判断便可以筛选出加载失败的错误。

window.addEventListener('error', (event) => {

if (!(event instanceof ErrorEvent)) {

// todo

}

}, true);