AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

JavaScript Error Recorder 使用户可以在浏览器中直接报告缺陷

  • 2014-08-29
  • 本文字数:1396 字

    阅读完需:约 5 分钟

Bogomil Shopov 和 Robert Nyman 发布了 Usersnap Console Recorder ,该套件用于 web 项目可视化标注式的交流(通过截屏)。

针对最终用户缺乏缺陷跟踪技术和经验这样的特点,Usersnap 将目标定为让用户能够以可视化的方式直接在浏览器中轻松地报告缺陷。为此,控制台对 JavaScript 错误进行了记录,以向修复缺陷的负责人提供所有必需的信息,包括 console.log 信息和元信息。

在《 JavaScript Error- and XHR Log Recording With Every Bug Report 》这篇文章中,Shopov 说:

每个错误或日志包括一个与网络时间协议(NTP)同步的时间戳,完整的信息包括 JavaScript 源文件和行号,你可能已经对 Firebug 的开发者控制台有所了解了,它格式与之是比较类似的。

每个由 console.log、console.info、console.warn 或者 console.error 发布的调试日志都已经得到恰当地格式化(包括递归对象或数组的格式化和浏览)。

Shopov 接着举了一个例子:

在页面滚动时,可以通过使用一个固定元素的 top 属性让其他的元素与之保持对齐。然而,由于标签重写了,元素#inexistent 已经不存在了。这就导致 offset() 方法返回 null,属性 top 也就不能再访问了:

复制代码
function clicky() {
console.info("Accessing a property of an undefined object");
console.log("calculating scroll top %d", $('#inexistent').offset().top);
};

Usersnap Console Recorder 的 JavaScript 日志会显示如下内容:

JavaScript 社区对这款控制台有各种不同的反应。在 Reddit 上对 Usersnap(缺陷报告的圣杯)的讨论中,用户 workaholicanonymous 对之大加赞赏,说道:

毫不夸张地说,我今天上午正在思考这些东西的开发呢。说真的,谢谢你们。

但在 Reddit 上的其他地方,在对 Web 开发者的强力王国。耶酥受难日的解读! 的讨论中,一些用户还不太清楚 Usersnap 的控制台提供的好处。用户 X1R0n 评论说

你用免费的 Google Analytics( http://davidwalsh.name/track-errors-google-analytics )也能实现同样的效果。

Usersnap 的共同创立者 Gregor Dorfbauer 回复了不同的意见,

那实际上没有什么可比性。Google Analytics 解决方案只是收集随机的 JavaScript 错误和 jQuery 的 XHR。

你看不到用户的完整会话,正如你要在用户的浏览器上打开开发者控制台,根本不要想“看过去的信息”。它和浏览器的完整截屏配合在一起使用可以很轻松地再现和解决问题。

还有些人担心隐私问题。用户 codepsycho

我本人是不会用它的,我的项目工作受保密协议的约束(所以实际上 Usersnap 保存所有的截屏并不是太理想的方式)

Shopov 向 InfoQ 回应了这个疑问,说:

虽然我们把截屏存放在了我们的服务器上,但它们会得到充分的保护。如果客户端有安全方面的需要,我们会通过以安全通道传送的方式去集成合作伙伴(比如 Trello、Kanbanize、Basecamp)甚至是客户的服务。我们可以保证只让客户能够看到这些截屏和数据,除了客户其他人谁都看不到。

客户也可以在任何时间要求删除所有的截屏:我们尊重我们的客户以及访问者的隐私。

Usersnap 与开源社区是一种开放的关系,并为源项目提供免费的许可证。Shopov 说,Usersnap 团队也非常有兴趣从InfoQ 的用户这里得到反馈意见,很希望听你们谈谈Usersnap 如何使你们的生活变得更加的便利,如何使你们的工作变得更加的高效,如何使你们可以快乐地享受工作。

查看英文原文: JavaScript Error Recorder Lets Users Report Bugs in Browser

2014-08-29 00:111715

评论

发布
暂无评论
发现更多内容

7面阿里,最后一面居然挂在了JVM上面!狠下决心恶补JVM知识

Java架构之路

Java 程序员 架构 面试 编程语言

为什么有的专科程序员比本科程序员薪资高?他们之间有多大的区别?

Java架构师迁哥

适用初学者的5种Python数据输入技术

华为云开发者联盟

Python 数据 函数

《深入理解java虚拟机》- java内存区域

never say never

JVM笔记 堆内存

架构师训练营 -week09-作业

大刘

极客大学架构师训练营

Android热修复之DexPatch介绍

阿里云金融线TAM SRE专家服务团队

android

史上最通俗Netty入门长文:基本介绍、环境搭建、动手实战

JackJiang

网络编程 Netty nio 即时通讯 IM

【应用运维】公司业务迭代迅速,运维如何高效进行应用发布?

嘉为蓝鲸

可视化 PaaS 运维自动化 部署与维护 发布

区块链交易所软件,数字货币场外交易系统搭建

13530558032

渣本全力以赴33天,四面阿里妈妈(淘宝联盟),拿下实习岗offer

小Q

Java 学习 编程 架构 面试

奋力准备一个月成功进字节,来看一下我都看了哪些资料做了哪些准备

小Q

学习 编程 程序员 架构 面试

来不及解释了,快上车!LR.NET开发平台助力企业信息互联

雯雯写代码

微服务通信之feign的配置隔离

编程 微服务 计算机

C++调用Go方法的字符串传递问题及解决方案

华为云开发者联盟

c++ 内存 代码

Java读取Excel/CSV格式的科学计数法问题

团子粑粑

Java Excel csv

区块链币支付系统开发搭建,USDT支付平台源码

13530558032

爆火的低代码,到底是真需求还是伪风口?

ToB行业头条

低代码

学习笔记:架构师训练营-第八周

四夕晖

这4个Java异常框架,很多人竟然还不知道

比伯

Java 编程 架构 面试 计算机

深圳区块链钱包系统开发,区块链钱包app源码

13530558032

阿里P8大牛整理的300页图解网络知识+计算机底层操作系统

Java架构之路

Java 编程 程序员 架构 面试

懵了!一口气问了我18个JVM问题!

yes

面试 JVM

nginx 平滑升级、以及导入第三方模块

sinsy

nginx 升级

架构师训练营 -week09-总结

大刘

极客大学架构师训练营

接口测试并不只是测试参数和返回值

测试人生路

接口测试

在Codurance是如何面试技术人员的

sherlockq

面试 TDD

vscode + vim : vscode 全键盘使用方案

lmymirror

vim vscode Spacemacs

K3d vs Kind 谁更适合本地研发

郭旭东

Kubernetes k3s kind

备战2021年金三银四,阿里P8面试官梳理的2020年999道大厂高频Java面试题(附答案)

Java架构之路

Java 编程 程序员 架构 面试

数字货币引发的金融变革

CECBC

数字化时代

区块链IM即时社交通讯系统开发,区块链社交平台源码搭建

13530558032

JavaScript Error Recorder使用户可以在浏览器中直接报告缺陷_开源_James Chesters_InfoQ精选文章