Fundebug前端JavaScript插件更新至1.2.0

简介: 摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误;修复了监控unhandledrejection错误的BUG,即未用catch处理的Promise错误;以及一些其他优化。

摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误;修复了监控unhandledrejection错误的BUG,即未用catch处理的Promise错误;以及一些其他优化。请各位用户及时更新插件!

img_7611629ee07375f5a14acac9787d68cb.jpe

监控WebSocket连接错误

现在,WebSockect的应用场景越来越多。比如,Fundebug的首页有展示累计处理错误的数量,目前是6亿+。这个数据是后台实时计算,然后通过WebSocket返回给前端的。顺便吐槽一下,某友商的统计方式比较诡异,断网之后数字居然还在更新!我想原因大家都懂的:)

img_e542821523e4d0e558195d8ca6b935ce.png

假设正确的WebSocket地址是wss://api.fundebug.com/api/events/count,若地址不小心弄错了,

 var ws = new WebSocket("wss://ap.fundebug.com/api/events/count");
 ws.onerror = function(event)
 {
     console.log("WebSocket onerror")
 }

则WebSocket连接显然会出错:

WebSocket connection to 'wss://ap.fundebug.com/api/events/count' failed: Error in connection establishment: net::ERR_SOCKS_CONNECTION_FAILED

Fundebug插件可以自动捕获这样的报错,发送到我们的后台服务器,并且第一时间给开发者发送报警。另外,Fundebug的报错并不影响WebSocket的错误处理回调函数onerror的执行。Fundebug控制台截图如下:

img_384621d154cb8778bf44ba3240975357.png

修复监控unhandledrejection错误的BUG

unhandledrejection错误,即未使用catch处理的Promise错误。Fundebug很早就支持监控unhandledrejection错误,但是由于插件BUG,全部unhandledrejection错误都显示为caught error。对此,我们非常抱歉,这次我们修复了这个BUG,感谢Fundebug用户-zWing的反馈!

测试代码:

Promise.reject("test unhandledrejection")

浏览器控制台会出现报错:

Uncaught (in promise) test unhandledrejection

Fundebug插件可以自动捕获这样的报错,发送到我们的后台服务器,并且第一时间给开发者发送报警。Fundebug控制台截图如下:

img_e11c45d6882a737aeb28fab0106b5291.png

新增silentDev配置属性

如果您不需要收集开发环境中的错误,则可以将silentDev属性设为true。这样的话,Fundebug不会收集开发环境的错误,生产环境的错误仍然会正常收集。注意,我们是通过页面的URL来区分生产环境和开发环境的,当URL中含有localhost或者IP时,判断为开发环境,否则判断为生产环境。

  1. 在HTML中配置<script>标签中配置silentDev属性
<script src="https://js.fundebug.cn/fundebug.1.2.0.min.js" 
           apikey="API-KEY" 
           silentDev=true></script>
  1. 在JavaScript中配置silentDev变量
fundebug.silentDev = true;

当silentDev设为true时,Fundebug不再收集开发环境的错误

修复silentVideo配置属性BUG

Fundebug插件支持录屏功能,可以帮助开发者更加形象地复现BUG,这个功能领先所有国内外同类产品!但是,由于该功能实现非常复杂,还有2个不大不小的BUG尚未修复:

  • DOM操作过多的话录屏功能会影响页面性能,造成卡顿。
  • 图片验证码会重复加载,导致验证一直失败。

这2个BUG正在修复,因此,我们暂时注释了录屏功能。将silentVideo属性设为false即可启用录屏功能。

但是,将fundebug.silentVideo设为false时,会发现没有效果,这是我们插件的BUG,1.2.0版本已经修复。

如果希望体验录屏功能的话,将silentVideo属性设为false即可。如果,你需要在生产环境中使用录屏,请评估一下2个BUG是否会对您的应用造成影响。对此如果您还有疑问,欢迎联系Fundebug客服!

另外,我们还对插件代码进行了一些其他优化,此处不再赘述。

参考

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!

img_138b50f6a05f77a1a7baae4240fade3f.jpe
qq.JPG

版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2018/08/21/fundebug-javascript-1-2-0/

目录
相关文章
|
14天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
33 5
|
30天前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
41 0
|
17天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
33 0
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
17 0
|
1月前
|
Rust 前端开发 JavaScript
前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】本文旨在探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来革命性变化。传统上,JS一直是前端开发的核心,但随着Wasm的出现,我们看到了前端性能和功能的新天地。文章首先介绍Wasm的基本概念,然后分析其对前端开发的影响,包括性能提升、新功能实现以及开发模式的变化。最后,探讨了Wasm与JS融合的未来趋势,以及这种融合如何推动前端技术的进步。