专栏首页细嗅蔷薇使用前端性能监控平台FrontJS监控教程

使用前端性能监控平台FrontJS监控教程

FrontJS介绍

FrontJS 是一款用于监控前端性能的监控工具,其范围包括WEB和APP等。

链接:https://www.frontjs.com/

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界面

步骤

  1. 进入frontjs官网,注册,创建项目;

项目名称自定,类型选择WEB,监听行为选项全选,确认。

  1. 点击自己名字(在页面右上角) - 所有项目;
  1. 点击自己的项目;
  1. 点击设置 - 项目;
  1. 复制代码
  1. 将其复制的代码粘贴于网页的</body>标签前;

以WordPress为例,进入WordPress后台 - 外观 - 主题编辑器 - 主题文件:footer.php - 粘贴

参考

前端异常监控平台对比

国内有哪些较好的前端性能监控平台? - 知乎

版权所有:可定博客 © WNAG.COM.CN

本文标题:《使用前端性能监控平台FrontJS监控教程》

本文链接:https://wnag.com.cn/1263.html

特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端性能监控平台搭建及应用

    “If you cannot measure it, you cannot improve it” ———— William Thomson

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

    当我们在运营一个网站时,尤其是技术产品是基于网站的情况下,如何确保网站运营正常,如何先于用户获知网页崩溃、异常信息,如何从技术层面上监控并及时解决错误信息,如何...

    企鹅号小编
  • 详解:如何监控小程序异常及处理错误?

    对于小程序开发者来说,其中的错误监控一直是个头疼的问题。由于小程序开发迭代较快,会存在系统问题,机型问题和版本的兼容问题,有时候我们在自行测试中完美运行,可总是...

    极乐君
  • 性能监控平台搭建 - InfluxDB安装与使用指南

    InfluxDB是目前比较主流的时序数据库,而时序数据库则是以时间序列为轴的数据库,与关系型数据库相比它有几个特点:

    上帝De助手
  • 你的函数有多快?使用 performance 监控前端性能

    要比较两个函数哪个性能更好,一个直观且公平的方法就是计算两个函数分别执行完的时间。

    前端小智@大迁世界
  • 用户体验角度来看前端性能监控

    继续寻找标准,不过很可惜,从 performance timing 没有找到,那么我们将目光转向业界来看一下:

    皮小蛋
  • 性能监控平台搭建 - Grafana安装与简易使用指南

    Grafana是一个跨平台的开源的度量分析和可视化工具,可以通过将采集的数据查询然后可视化的展示,并及时通知。它主要有以下六大特点:

    上帝De助手
  • 性能监控平台搭建 -- Telegraf安装与简易使用指南

    前面我们依次介绍了Influxdb、Grafana的安装和基本使用,这次我们来看看Telegraf的安装与基本使用。Telegraf是InfluxData旗下的...

    上帝De助手
  • Linux性能监控工具nmon安装及使用教程解析

    Nmon (Nigel’s Monitor)是由IBM 提供、免费监控 AIX 系统与 Linux 系统资源的工具。该工具可将服务器系统资源耗用情况收集起来并输...

    砸漏

扫码关注云+社区

领取腾讯云代金券