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

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

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

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

特性：

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

第一步:

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

第二步:引用模块

<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>

第三步:

<html>
<head>
<script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'></script>
<script type="text/javascript">

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>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</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/监控平台.有条件的还是最好搭建自己的监控平台.

前端js错误日志收集的更多相关文章

  1. 前端监控系统（二）JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

  2. 捕获JS 错误日志

    最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url,  ...

  3. 发送JS错误日志到服务器

    JS记录错误日志/捕捉错误 //onerror提供异常信息,文件路径和发生错误代码的行数的三个参数. window.onerror = function(e,url,index){ var msg = ...

  4. 多语言业务错误日志收集监控工具Sentry 安装与使用

    Sentry 是一个实时事件日志记录和汇集的平台.其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈. Sentry是一个日志平台, 它分为客户端和服务端,客户端(目前客户端有Pyt ...

  5. 错误日志收集sentry的安装与简单使用

    通过官方文档https://docs.sentry.io/可以得知,安装服务有两种方式,一种是使用Python,这种方式个人感觉比较麻烦.于是选择了第二种方式:使用docker. 我是在Windows ...

  6. 搭建前端监控系统（二）JS错误监控篇

    ===================================================================== 前端性能监控系统: DEMO地址    GIT代码仓库地址 ...

  7. 运维开发实践——基于Sentry搭建错误日志监控系统

    错误日志监控也可称为业务逻辑监控, 旨在对业务系统运行过程中产生的错误日志进行收集归纳和监控告警.似乎有那么点曾相识?没错... 就是提到的“APM应用性能监控”.但它又与APM不同,APM系统主要注 ...

  8. Webfunny知识分享：JS错误监控

    现在的前端开发已不再是刀耕火种的年代了,各种框架.编译工具层出不穷,前端监控系统也不甘其后,遍地开花. 前端正承受着越来越重的职责,前端的业务也变得越来越复杂,此时此刻我们就更需要一套完善的监控系统来 ...

  9. Fundebug上线Node.js错误监控啦

    作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...

随机推荐

  1. Java事件监听机制与观察者设计模式

    一. Java事件监听机制 1. 事件监听三要素: 事件源,事件对象,事件监听器 2. 三要素之间的关系:事件源注册事件监听器后,当事件源上发生某个动作时,事件源就会调用事件监听的一个方法,并将事件对 ...

  2. leetcode-119-杨辉三角②

    题目描述: 第一次提交: class Solution: def getRow(self, rowIndex: int) -> List[int]: k = rowIndex pre = [1] ...

  3. E. Present for Vitalik the Philatelist 反演+容斥

    题意:给n个数\(a_i\),求选一个数x和一个集合S不重合,gcd(S)!=1,gcd(S,x)==1的方案数. 题解:\(ans=\sum_{i=2}^nf_ig_i\),\(f_i\)是数组中和 ...

  4. kafka集群搭建文档

    kafka集群搭建文档 一. 下载解压 从官网下载Kafka,下载地址http://kafka.apache.org/downloads.html 注意这里最好下载scala2.10版本的kafka, ...

  5. Java-MyBatis-MyBatis3-XML映射文件：自动映射

    ylbtech-Java-MyBatis-MyBatis3-XML映射文件:自动映射 1.返回顶部 1. 自动映射 正如你在前面一节看到的,在简单的场景下,MyBatis 可以为你自动映射查询结果.但 ...

  6. day 41 前端之前端初识

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  7. OS -- (python)文件和目录操作方法大全

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  8. JS基础语法之DOM01(找标签、改属性样式）

    DOM:暂时可以理解为找标签.改样式 1.BOM:   记住location这个就可以: location.href 获得当前页面的URL location.href = "URL" ...

  9. 基于baseline、svd和stochastic gradient descent的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.3部分内容(其余部分会陆续补充上来).koren论文中用到netflix 数据集, 过于大, 在普通的pc机上运行时间很长很长.考虑到写文章目 ...

  10. ORA-01790: 表达式必须具有与对应表达式相同的数据类型

    出现这种错误,要先看一下是不是sql中有用到连接:union,unio all之类的,如果有,需要注意相同名称字段的数据类型一定要相同.