全部产品
阿里云办公

JS 错误统计

更新时间:2018-10-12 08:39:10

本文介绍了 ARMS 前端监控的 JS 错误统计功能。

JS 错误率的定义是什么?

在 ARMS 前端监控中,JS 错误率的计算公式为:

  1. JS 错误率 = 指定时间内发生 JS 错误的 PV / PV

错误率排行

在左侧的错误率排行标签页上,列出的是站点内错误率最高或最低的前 100 个页面,可以按照错误率升序或降序排列。右侧的 JS 错误率图表展示的是左侧列表选中页面在指定时间范围内的 JS 错误率曲线和 PV。

注意: 由于错误率排行榜仅会展示错误率最高或最低的前 100 个页面,当站点的页面总数超过 200 个时,错误率不属于这两个区间的页面始终不会显示在排行中。例如,假设站点共有 220 个页面,那么无论选择按错误率升序还是降序排列,都会有 20 个页面不会显示在排行中。

错误聚类排行

在左侧的错误聚类排行标签页上,列出的是每种错误信息的发生次数排行。右侧的 JS 错误调用页面展示的是出现了左侧列表选中错误的页面,按错误次数降序排列。

地理分布

地理分布模块,您可以查看上述统计信息的地理分布情况。地理分布又分为中国和世界两个维度,中国维度的单位为省,世界维度的单位为国家/地区。

终端分布

终端分布模块中,您可以查看上述统计信息的终端分布情况。终端分布又细分为浏览器、操作系统、设备、分辨率等维度。

通用操作

在 JS 错误统计模块中,您可以执行以下通用操作。

  • 在左侧标签页上,单击标签上的上箭头或下箭头来改变列表的排列顺序。上箭头表示升序,下箭头表示降序。

  • 在右侧的详情显示区域中,单击右上角的列表图标,可在图表和表格视图间切换。

  • 在右侧的详情显示区域中,单击右上角的时钟图标,可指定时间范围。

如何进行 JS 错误排查?

您可通过以下操作进入 JS 错误详情页面。

  1. 单击左侧导航栏中的 JS 错误率标签页。

  2. 在 JS 错误率标签页选择需排查的对象,并单击 JS 错误类聚区域的明细

    JS 错误详情页面打开。

    注意: 若信息过长显示不完整,将鼠标移到错误信息外即可显示全部信息。

在 JS 错误详情页可查看错误明细,根据每条错误上的关键信息,即可定位到 JS 错误所在的文件和信息,帮助前端工程师快速定位问题。

每条错误可显示的关键信息:

  • 上报时间

  • 日志类型

  • 页面地址

  • 浏览器

  • 设备

  • 地域

  • Tag

  • UA(User Agent)

  • Param 参数

  • Message(信息)

  • Stack(错误栈信息)

  • File(错误文件)

  • Line/Col(错误位置)

JS 错误详情页还提供了错误搜索功能,搜索条件包括:

  • 日志类型:默认是 JS 错误日志

  • 时间选择:错误产生的时间

    注意: 为提高搜索效率,时间跨度不宜太短。

  • 关键字:根据 Message 的关键词进行搜索

    注意: 目前只支持全 Message 匹配搜索,暂不支持模糊搜索。

如何设置 JS 错误率报警?

您可以设置针对 JS 错误率的报警。在以下示例中,触发报警的条件是最近 10 分钟的错误率平均值超过 20%,且最近 10 分钟的错误总数超过 20 个。

  1. 在左侧导航栏中选择设置 > 报警设置

  2. 设置报警规则区域单击新建规则

  3. 在新建报警对话框中,按照下图输入各项参数。

如何上报资源加载失败的情况(例如 404)?

SDK 监控的 JS 错误仅限脚本相关错误,不包括资源加载错误(例如 404)。为防止阻塞业务代码,SDK 会延后加载,因此一般无法捕捉页面加载失败的错误。

如果仍需监控资源失败情况并上报数据,请遵循以下步骤。

  1. 在页面 Head 最前面监听 addEventListener onerror 。

    1. window.addEventListener("error", function (e) {
    2. var elem = e.target;
    3. if(/img|script/.test(elem.tagName.toLowerCase())){
    4. window.__sourceError = window.sourceError || [];
    5. window.__sourceError.push(e);
    6. }
    7. }, true); /*指定事件处理函数在捕获阶段执行*/

    注意: 第三个参数一定要设为 true。

  2. 当 DOM Rready、window.__bl 实例产生后,通过手动方式从 window.__sourceError 解析错误信息。

    1. window.__bl && __bl.error(new Error('发生了一个资源加载的错误'), { filename: '', })
    2. // 如果需要方便后台报警设置,可调用 __bl.sum('error-404', 1); 表示某些事件发生的次数。

关于因跨域资源共享导致的 Script Error,请参考 Script Error 的产生原因和解决方法

相关文档