【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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:111337

评论

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

Webpack最佳实践

Geek_02d948

webpack

JS知识点梳理之作用域、作用域链、柯里化、闭包

hellocoder2029

JavaScript

细说js变量、作用域和垃圾回收

hellocoder2029

JavaScript

细说Js中的this

hellocoder2029

JavaScript

可观测性之Micrometer Tracing

宋小生

全链路监控 可观测性 链路追踪 micrometer 全链路

传统大型国企云原生转型,如何解决弹性、运维和团队协同等问题?

Serverless Devs

金九银十喜提offer!秋招蚂蚁金服Java研发岗四面

钟奕礼

Java 程序员 java面试 java编程

Webpack配置实战

Geek_02d948

webpack

4000道Java面试真题合集,助你搞定面试官

钟奕礼

Java 程序员 java编程

FL Studio2024最新绿色版水果萝卜编曲软件

茶色酒

FL Studio FL Studio21 FL Studio2024

程序员最关心的问题,我都帮你们问AI了

大白给小白讲故事

AI写代码

CleanMyMac2024MACOS老牌清理软件

茶色酒

CleanMyMac CleanMyMac2024

【秒杀购物商城业务服务】「分布式架构服务」盘点中间件服务的高可用模式及集群技术的方案分析

洛神灬殇

redis高可用 MySQL 高可用 集群 12 月 PK 榜

这88道阿里高级岗面试题,刷掉了80%以上的Java程序员

钟奕礼

Java java程序员 java面试 java 编程

【敏捷研发系列】前端DevOps流水线实践

京东科技开发者

敏捷 前端 软件开发 运维‘ #DevOps

Databend 索引结构说明

Databend

裁员名额谁来背?优秀985硕士无故被裁,劣币驱逐良币错在谁?

Java永远的神

程序员 面试 程序人生 后端 架构师

2023年值得采购的堡垒机当属行云管家堡垒机!

行云管家

网络安全 等保 堡垒机

自定义函数实现IoT数据编解码、格式处理与业务告警

EMQ映云科技

物联网 IoT 自定义函数 12 月 PK 榜 增值服务

Elasticsearch Head插件使用小结

京东科技开发者

elasticsearch 索引 chorme 数据库· 数据查询

Webpack构建速度优化

Geek_02d948

webpack

OpenHarmony社区运营报告(2022年11月)

OpenHarmony开发者

OpenHarmony

为什么我们家里的IP都是192.168开头的?

小小怪下士

Java 后端 IP

细说nodejs的path模块

coder2028

node.js

ChatGPT完全火出圈了,你注册了吗?

Java全栈架构师

人工智能 程序员 AI 程序人生 ChatGPT

阿里Java三面凉凉:微服务,Redis,JVM一个都搞不懂

钟奕礼

Java 程序员 java面试 java编程

linux高可用集群软件采购哪款好?主要功能有哪些?

行云管家

Linux 高可用

GitHub上标星65k+超火的《Java大厂面试》,分享整理的PDF版本

钟奕礼

Java 程序员 java面试 java编程

鸿蒙开发实例 | 为什么选择HarmonyOS?

TiAmo

华为 鸿蒙 华为云 12月月更

大数据时代,数据仓库究竟是干嘛的?

JAVA旭阳

Java 大数据

说说Nodejs高并发的原理

coder2028

node.js

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