前端js错误日志收集

最新推荐文章于 2024-10-06 06:30:00 发布

p312011150

最新推荐文章于 2024-10-06 06:30:00 发布

阅读量1.7k

点赞数

分类专栏：大型网站架构 javascript c c# c++ java 程序错误监控

java 同时被 3 个专栏收录

409 篇文章 4 订阅

订阅专栏

javascript

188 篇文章 1 订阅

订阅专栏

c++

171 篇文章 2 订阅

订阅专栏

今天一个客户说他们的一个同事用OPPO R11的手机访问不了我们的项目,打开后一片空白,虽然后面发现你的手机网络断了,但是想起来毕竟手机端没有调试的工具可以查看抛出的错误信息,方便我们追踪问题,后端的大牛同事提示我们看看vconsole.js.写这个js的大牛的github地址是:https://github.com/Tencent/vConsole

实现效果地址(可能时间久了就访问不了,各位见谅):https://www.w3cways.com/demo/vconsole/

vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性：

1. 查看 console 日志
2. 查看网络请求
3. 手动执行 JS 命令行
4. 自定义插件

第一步:

推荐使用npm安装vconsole.js:npm install vconsole

第二步:引用模块

第三步:

window.vConsole = new window.VConsole();
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
console.log("错误信息：" , errorMessage);
console.log("出错文件：" , scriptURI);
console.log("出错行号：" , lineNumber);
console.log("出错列号：" , columnNumber);
console.log("错误详情：" , errorObj);
}
throw new Error("出错了！");
</script>
</head>

</html>

详细的教程参考:https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

后面一顿百度搜索.发现还有牛人封装了提交到后端的js,也分享出来给大家看看.

github上：https://github.com/xianyulaodi/badJsReport

这位牛人封装了原生ajax,还有将上报的参数对象合并。并暴露了一个全局方法 badJsReport

使用方法:

1、将badJsReport.js加载到其他的js之前

2、简单的使用方法：（这个执行方法要放在其他代码执行之前）

badJsReport({
url:'http://www.baidu.com', //发送到后台的url *必须
})
3、如果需要新增上报参数，或者要知道发送给后台的回调。可以用下面的方法

badJsReport({
url:'http://www.baidu.com', //发送到后台的url *必须
data:{}, //自定义添加上报参数，比如app版本，浏览器版本 -可省略
successCallBack:function(response, xml){
// 发送给后台成功的回调，-可省略
},
failCallBack:function(error){
// 发送给后台失败的回调，-可省略
}
})

注意点：
1、对于跨域的JS资源，window.onerror拿不到详细的信息，需要往资源的请求添加额外的头部。静态资源请求需要加多一个Access-Control-Allow-Origin头部，也就是需要后台加一个Access-Control-Allow-Origin，同时script引入外链的标签需要加多一个crossorigin的属性。这样就可以获取准确的出错信息。

2、因为代码的最后return true，所以如果有错误信息，浏览器不会console出来，如果需要浏览器console，可以注释掉最后的return true

无意之间:突然发现了这个网站:https://fundebug.com/监控平台.有条件的还是最好搭建自己的监控平台.