前端错误捕获

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

cjFrontEnd

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

阅读量542

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_26702033/article/details/79863485

本文详细介绍了前端错误的分类，包括及时运行错误与资源加载错误，并提供了多种捕获方式，如try-catch、window.onerror及performance.getEntries()等。同时，针对跨域JS运行错误的捕获和处理进行了深入探讨，提出了客户端和服务端解决方案。最后，分享了两种错误上报方法，即通过AJAX通信和利用Image对象上报，并讨论了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：https://blog.youkuaiyun.com/qq_26702033/article/details/79863485

前端错误的分类：
及时运行错误：代码错误；
资源加载错误；

及时运行错误的捕获方式：
- try-catch
- window.onerror,注册window.onerror事件。

window.onerror = function(){}
1
资源加载错误：
-object.onerror,不能在冒泡阶段实现。
- performance.getEntries();

performance.getEntries().forEach(item=>{console.log(item.name)})
1
Error事件捕获
window.addEventListener('error',function(e){console.log('捕获',e)},true)
1
跨域的js运行错误可以捕获吗？错误提示什么？应该怎样处理？
可以捕获，但是也只会提示script error。

这时候应该采取两个方法：
1.客户端：在script标签增加crossorigin属性；

上报错误？
1.采用ajax通信上报；
2.利用image对象上报；

new Image().src = 'http://www.baidu.com/?r=1';
1
这时候发现请求发送出去了。

如果我们想要将js的错误信息记录到服务器数据库库中，我们一般想到的是通过ajax来实现。
其实这样做有几个弊端：

不支持跨域操作，因为很多情况下是一台服务器要负责处理多台服务器的错误；
大多数Ajax通信都是通过javascript库提供的包装函数来处理，如果库代码本身就有问题，而你还在依赖该库记录信息，可想而知，错误消息是不肯能得到记录的。
怎么办？
可以使用Image对象巧妙的解决这个问题。

function logError(sev, msg){
var img = new Image();
img.src = “log.php?sev=” + encodeURIComponent(sev) +
“&msg=” + encodeURIComponent(msg)”;
}

作者：nummy
链接：https://www.jianshu.com/p/3bc73971e3b3
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
————————————————
版权声明：本文为优快云博主「qq_26702033」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_26702033/article/details/79863485