如何系统维护好网站?这款错误监控平台不可缺少

当我们在运营一个网站时,尤其是技术产品是基于网站的情况下,如何确保网站运营正常,如何先于用户获知网页崩溃、异常信息,如何从技术层面上监控并及时解决错误信息,如何通过对页面的各项收集数据来进行系统分析,从而有助于更好地规划产品命脉,那么接下来,这款工具你不要错过。

蒲公英基于网站开发及运营人员所需,其实也是在自身产品所需下,开发出一款集成性能监测与异常信息收集等功能的工具—— FrontJS。

什么是 FrontJS ?

FrontJS 是一款轻量级的网站性能及异常信息收集工具。最早是用于蒲公英旗下的项目管理平台 Tracup ,也就是我们一个月前发布的 frontend-tracker (https://github.com/Pgyer/frontend-tracker ),发布后收获到一些良好反应。

当我们尝试在蒲公英上使用这款工具的时候却出现了一些问题,比如,蒲公英每天能产生千万级别的访问信息,使得原有的统计分析性能变得不是很理想,这对于一款以统计分析为主的产品来说是致命的。我们及时调整了从数据单元到分析单元的结构和代码,在不增长机器数量的情况下解决掉了这个问题。

现在,这款简单的性能工具也变成了一个性能监控平台,我们有信心面对更大的数据量,于是我们把这个平台开放出来,让每个 Web 开发者能够从中获益。我们邀请大家,特别是 Web 开发者来使用这款产品,为我们提出宝贵的优化意见。

FrontJS 可以被哪些人使用?

FrontJS 主要面向网站的产品,运营,以及开发等的相关人员。

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

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

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

FrontJS 有哪些技术特点?

1、图形界面配置,自动生成集成代码,即加即用;

2、JS 异常监控,包含 console 中的 log/warn/error 的收集;

3、提供 API,可以对上报行为进行定制化的调整;

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

5、资源监控,收集加载失败的资源以及跨域资源的 URI;

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

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

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

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

10、近实时的分析结果。

与同类产品相比有哪些不同?

1、提供了包含错误收集,页面流向,性能分析,资源及请求监控等用户体验改进所需的信息;

2、提供 API,甚至可以在错误信息中包含自定义信息;

3、可以产生自定义错误,或者直接定义 Error 对象;

4、对资源进行监控;

5、对 XHR 进行监控;

6、帮助安全人员发现潜在的 XSS 风险以及病毒植入风险。

FrontJS 如何使用?

光说不练假把式,现在我们就来一睹 FrontJS 的真容。

点击 https://www.frontjs.com/ 即可进入网站,登录后,界面很简单,开始点击「创建项目」输入「名称」,勾选完「行为」等,点击「保存」就可创建一个新的监测项目。将生成的代码添加到需要监测的网站上,那么在 FrontJS 项目内就能接收到相应的监测结果及数据。

创建项目

添加成功后,项目内监测收集内容页面如下:

首先是「概览」页面,展现了当前网站整体健康状况指示,包含网站脚本异常、资源异常、 XHR 异常及页面访问信息的时段性峰值和变化 ,可以帮助大家快速掌握问题发生的趋势,了解网站缺陷如何影响用户,指导网站改进计划。

概览页面

接下来是「近 12 小时异常」汇总,分别从脚本、资源、XHR 方面收集展现,每一条信息都包含时间、反馈设备的详情、屏幕信息、IP 地址,并且汇总了该异常的出现总数。

每一条中都可查看详细的事件流。并且也可对这些反馈信息进行日志、警告、错误等的分类展示。

接下来还有「异常信息总体汇总」、「页面下的脚本错误」和「浏览器下的脚本错误」等,帮助大家系统化了解网站问题。

异常信息汇总

另外针对用户访问, FrontJS 也会收集并提供一系列有关浏览器、操作系统、IP 地址等的访问数据,大家可以了解到所有用户的访问数、停留时间,基于大数据的统计浏览器种类和操作系统等。

「页面访问」提供了可筛选的页面统计,从访问量、加载时间、停留时间等排列展示,帮助大家了解并进行维护。

「日报」和「趋势」是就整体统计的分类查看。

最后在「项目设置」中,您可对监测网站设置不监听资源和信任域等,来更好地获取分析收集到的错误信息。

总之, FrontJS 是一款技术人员必不可少的网页错误监控工具,修复问题、维护网站、改善用户体验,来 FrontJS 开启优化网页体验之旅吧。

本文来自企鹅号 - 蒲公英开发者服务平台媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构之美

五分钟学会智能多通道推送(PUSH)技术

1392
来自专栏Python爬虫与算法进阶

Python分布式微博爬虫(源码分享)

项目地址:https://github.com/ResolveWang/weibospider 作者:resolvewang ? 关于本项目 实现内容包括用户信...

3296
来自专栏IT大咖说

产品研发做到又快又好的一个核心原则

内容来源:2018 年 5 月 19 日,G7汇通天下技术合伙人廖强在“PHPCon China 2018 技术峰会”进行《敏捷工程实践与自动化》演讲分享。IT...

682
来自专栏Golang语言社区

【游戏编程板块】关于游戏开发的客户端/服务器端的版本控制

【客户端】 1.关于游戏引擎 在15年3月开始准备做h5游戏的时候,首先遇到的问题就是引擎选型的问题。 当时市面上的2d引擎主要有3个:白鹭egret,laya...

36313
来自专栏张善友的专栏

业务配置开发平台qMISPlat 2.0 产品介绍

1556
来自专栏BeJavaGod

Java后端实现图片压缩技术(赞赏功能已开通,欢迎测试,噗~!)

今天来说说图片压缩技术,为什么要使用图片压缩,图片上传不就完事了吗?对的,这在几年前可以这么说,因为几年前还没有现在这么大的并发,也没有现在这么关注性能。 如今...

3745
来自专栏IT米粉

weui-react项目实战新心得

weui-react简介 weui是微信官方制作的一个基础样式UI库,打造与原生微信同样的视觉和交互体验,整个UI库包括网页版和小程序版,网页版包括传统的jav...

2764
来自专栏无原型不设计

如何制作一个完美的错误提示信息

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 每个系统都会出现暂停工作的时候,它可能是用户的错误操作或...

2664
来自专栏魏艾斯博客www.vpsss.net

iq block country 插件屏蔽中国 IP 防止 wordpress 外贸网站被抄袭

很多国内外贸人用 wordpress 搭建了外贸网站,在收获更多国外客户的同时,也发现了一个烦恼的事情:通过网站统计能够发现很多来自国内的 IP 停留时间很长,...

45913
来自专栏喵了个咪的博客空间

IOT设备通讯协议MQTT

哈喽大家好呀!笔者的公司最近在做IOT设备相关的业务,基于这个契机寻找学习了一下关于IOT通讯协议相关的内容,最终在技术选型上选择了使用MQTT协议并且结合EM...

2524

扫码关注云+社区