一款轻量好用的页面错误监控平台—— FrontJS

DesGemini 发布于2019-08-21 18:35 / 797人阅读

摘要：当我们尝试在蒲公英上使用这款工具的时候也出现了一些问题，比如，蒲公英每天能产生千万级别的访问信息，这使得原有的统计分析性能变得不是很理想，这对于一款统计分析为主的产品来说是致命的。

先放链接：https://www.frontjs.com/

FrontJS 最早是用于蒲公英旗下项目管理平台 Tracup 中的一个性能工具，也就是我们一个月前发布的 frontend-tracker，发布后在一些社区内也有一些良好的反应。

当我们尝试在蒲公英上使用这款工具的时候也出现了一些问题，比如，蒲公英每天能产生千万级别的访问信息，这使得原有的统计分析性能变得不是很理想，这对于一款统计分析为主的产品来说是致命的。

我们及时调整了从于数据单元到分析单元的结构和代码，在不增长机器数量的情况下解决了这个问题。

现在，一款简单的性能工具也变成了一个性能监控平台，我们有信心面对更大的数据量，于是我们把这个平台开放出来，让每个 Web 开发者能够从中获益。

于是我们邀请大家，特别是 Web 开发者来使用这款产品，为我们提出宝贵的优化意见。

FrontJS 的核心功能

FrontJS 是面向产品部门，运营部门，以及开发部门工作人员的网站性能及异常信息收集工具。

产品和运营部门可以通过页面分析功能来了解用户访问量、使用偏好、页面停留时间和用户流向等信息，从而对产品进行调整和优化。

开发部门可以通过页面统计获取用户平均的页面统计信息做出 DOM 树渲染时间是否达标，DNS 解析时间是否达标，服务器响应时间是否达标等判断。

FrontJS 为开发人员提供了包含错误收集、页面流向、性能分析、资源及请求监控等用户体验改进所需的信息，最主要的功能当然还是 JS 错误监控：我们会收集精细到 console.log 级别的任何 Javascript 异常信息并提供 stack trace 信息，同时我们还对每个 XHR 计时帮助开发者判断某个 Endpoint 是否需要优化。

FrontJS 的技术特点

图形界面配置，自动生成集成代码，即加即用

JS 异常监控，包含 console 中的 log / warn / error 的收集

提供 API，可以对上报行为进行定制化的调整

具有包装后的 try - catch，可以产生自定义错误信息

资源监控，收集加载失败的资源以及跨域资源的 URI

XHR 监控，收集 XHR 耗时、错误、超时、跨域等信息

堆栈追踪技术，精确获取更多异常上下文信息，方便查找错误位置，在每个浏览器中都可以使用完整的堆栈追踪

自定义信任域，可以对跨域信息做出灵活调整有助于监控页面是否发生 XSS 或被植入病毒

页面性能监控，包含 DNS 时间， DOM 渲染时间等信息，可以组合计算出首屏时间以及白屏时间

事件流，可以了解异常发生时的上下文环境，帮助测试部门快速复现错误

近实时的分析结果

未来我们希望通过借助人工智能等一些手段让这款产品变得更加智能，能够主动发现被监控站点的体验问题并自动的为用户提供高质量的解决方案。

最后再次邀请大家使用FrontJS，并提出宝贵的意见~

https://www.frontjs.com/

GPU云服务器云服务器好用的短信验证平台好用的短信接口平台好用的云主机平台一款强大的php大马

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90611.html

前端异常监控-看这篇就够了

摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。前端异常监控如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？主要内容 Web规范中相关前端异常异常按照捕获方式分类异常的捕获方式日志...

Aklman 2019-08-23 12:59 评论0 收藏0
[ 好文分享 ] 美团酒店Node全栈开发实践

摘要：我所在的美团酒店事业部去年月份成立，新的业务新的开发团队，这一切使得我们的前后端分离推进的很彻底。日志监控平台日志监控平台是美团内部的一个日志收集系统，目前美团统一使用收集日志，具有接收格式日志的能力，而日志监控平台也是以格式日志来收集。转自：美团技术团队作者：美团技术团队分享理由：很好的分享，可见，基于Node的前后端分离的架构是越显流行和重要，前端攻城狮们，No...

wangdai 2019-08-21 10:34 评论0 收藏0
VSCode亲测好用的插件推荐

摘要：作为一款开源的轻量级编辑器，它具有简洁的，高可扩展性，易于调试等诸多优点，尤其是它丰富的插件，可以让我们在开发过程中事半功倍，所以，今天想从整个开发过程的角度，推荐一下平时我亲测觉得很好用的插件。又一款用颜色拯救眼睛的插件。笔者作为前端开发，使用过各种编辑器，经历过sublime，Atom，WebStorm的种种试用淘宝的过程，直到遇到微软的VSCode，才有一种终于遇到对的人的感觉...

shusen 2019-08-23 18:39 评论0 收藏0
几种 Docker 监控工具对比

摘要：在我们列举的几个监控的服务或平台中，这是唯一一款国内产品。也是一款付费监控解决方案，计划收费方案是美分小时。同样也支持监控，还包括对容器级事件的监测停止开始等等和管理容器产生的日志。由于是一个监控方案，相对来说它的安装和部署都比较简单。轻量级虚拟化容器 Docker，自发布以来便广受业界关注，在开源界和企业界掀起了一阵风。Docker 容器相对于 VM 有以下几个优势：启动速度快；资...

张春雷 2019-06-28 15:04 评论0 收藏0