ARMS 前端监控的 JS 错误诊断功能可展示 JS 错误的基本信息和分布情况,以及回溯用户行为,帮助您快速定位错误位置。

快速入门

请查看以下交互式文档,了解 ARMS 前端监控的 JS 错误诊断功能。为获得最佳体验,请在新窗口中打开查看

功能入口

  1. 登录 ARMS 控制台
  2. 在左侧导航栏中单击前端监控,在前端监控页面上单击应用名称。
  3. 在左侧导航栏中选择应用 > JS 错误诊断

查看错误总览

错误总览区域可展示选定时间段内的 JS 错误基本统计信息和趋势,包括以下指标:

  • 错误数:选定时间段内的 JS 错误总数。
  • JS错误率:选定时间段内发生过错误的 PV 占总 PV 的比例。
  • 影响用户数:JS 错误影响到的用户数量和比例。
图 1. 应用层面的错误总览

Error Overview

错误总览区域可执行以下操作:

  • 将鼠标悬浮于曲线上,曲线拐点所对应时间点的错误数、错误率、影响用户数将显示在浮层中。


    JS Error Turning Point
  • 将鼠标悬浮于曲线拐点上,当鼠标显示为手形指针时单击拐点,可打开该时间点的异常洞察对话框。详见Source Map文件

  • 在曲线图区域内按住鼠标左键并拖动鼠标来框选其中一段,即可放大查看该段曲线。在曲线图上双击即可还原视图。

说明JS错误诊断页面上,默认情况下错误总览区域显示的是应用层面的总览信息。在页面错误率排行页面错误率Top 5 页签单击分析后,展示的是对应页面的总览信息。
图 2. 页面层面的错误总览

JS Error Overview of App

查看页面错误率排行

页面错误率排行页签可按 JS 错误率从高到低的顺序展示选定时间段内出现 JS 错误的页面,包括以下指标:

  • 页面:出现过 JS 错误的页面。
  • 错误率:选定时间段内在该页面发生过错误的 PV 占总 PV 的比例。
  • 访问量:页面的访问量。
图 3. 页面错误率排行

Page Ranking

页面错误率排行页签可执行以下操作:

分析:单击操作列中的分析,查看该页面的错误总览视图。

查看异常洞察

异常洞察对话框可显示具体时间点的 JS 错误情况,包括以下指标:

  • 错误数:对应时间点的 JS 错误总数。
  • JS 错误率:对应时间点发生过错误的 PV 占总 PV 的比例。
  • 影响用户数:JS 错误影响到的用户数量和比例。
  • 高频错误Top 5:对应时间点出现次数最多的前 5 种 JS 错误,包括 ARMS 捕捉到的 JS 错误内容、错误出现次数和影响用户数。
  • 页面错误率Top 5:对应时间点 JS 错误率最高的前 5 个页面,包括出现过 JS 错误的页面名称、页面的 JS 错误率和页面访问量。

Exception Insight

异常洞察对话框可执行以下操作:

  • 单击高频错误Top 5 页签,然后单击操作列中的诊断,进入 JS 错误诊断页面。
  • 单击页面错误率Top 5 页签,然后单击操作列中的分析,进入该页面的错误总览页面。

查看高频错误

高频错误页签可按出现次数从多到少的顺序展示选定时间段内的 JS 错误,包括以下指标:

  • 错误信息:ARMS 捕捉到的 JS 错误内容。
  • 页面:JS 错误出现的页面。
  • 错误数:JS 错误出现的次数。
  • 影响用户数:JS 错误影响到的用户数量和比例。

高频错误页签可执行以下操作:

诊断:单击操作列中的诊断,进入错误详情页签。

说明JS 错误诊断页面上,默认情况下高频错误页签显示的是应用层面的 JS 错误。在页面错误率排行页面错误率 Top 5 页签单击分析后,高频错误页签展示的是对应页面上的 JS 错误。

查看错误详情

错误详情页签可展示以下信息:

  • 概要信息
    • 名称
    • 类型
    • 时间(JS 错误的发现时间)
    • 设备
    • 操作系统
    • 浏览器
    • IP
    • 地区
    • URL
    • 文件(出现 JS 错误的文件路径)
  • 堆栈信息:与 JS 错误出现位置有关的信息。
  • 用户行为回溯:回溯的用户行为信息,用于还原报错现场。
图 4. JS 错误详情页面

Error Details

错误详情页签上可执行以下操作:

  • 如需确定 JS 错误的准确出错位置,请在堆栈信息区域单击一条堆栈信息左侧的三角形图标展开该行,单击选择 Source Map,然后在 Source Map文件对话框中选择现有的 Source Map 文件或上传新的 Source Map 文件,最后单击确定


    Select Source Map

    ARMS 将利用 Source Map 文件还原准确的 JS 错误位置。


    Stack Mapped
  • 如需查看用户行为轨迹,请查看回溯用户行为区域。
  • 如需查看该错误的分布情况,请单击错误分布页签。

回溯用户行为

错误详情页签上的用户行为回溯区域展示用户的行为轨迹,辅助还原报错现场。


Section Behavior

查看错误分布

JS 错误诊断页面的错误分布页签可展示具体 JS 错误的分布情况,统计维度包括:

  • 时间:最近 24 小时和最近 30 天。
  • 浏览器
  • 操作系统
  • 设备
  • 地理:在中国维度下按省、直辖市、自治区统计,在世界维度下按国家/地区统计。
图 5. JS 错误分布页面

Distribution Basic

错误分布页签上可执行以下操作:

  • 时间分布区域,将鼠标悬浮于曲线上,曲线拐点所对应时间点的错误数将显示在浮层中。

  • 地理分布区域的中国世界页签上,单击右侧表格中的错误数列标题,可切换表格的排序顺序(从正序切换为倒序,或从倒序切换为正序)。


    Distribution Geo China

常见问题

  • 如何开启或关闭用户行为回溯功能?

    该功能默认开启。如需关闭,请在 config 配置中添加 SDK 配置项 behavior: false。SDK 配置项的详细信息参见前端监控 SDK 配置项

  • 开启用户行为回溯后,调试过程中通过 console.log 打印出的信息会定位到 ARMS 的 SDK 代码 bl.js 中,而不是原代码中的位置,如何解决?


    Issue Before

    造成这种现象的原因是 ARMS 通过重写 console 对象的 log 等方法来监控浏览器控制台打印的内容。解决方法为:

    • 方法一(推荐):设置 Chrome 浏览器的黑盒(Blackboxing)。

      1. 打开 Chrome 浏览器,按 Ctrl + Shift + I 打开开发者工具面板,在设置菜单中单击 Settings


        Chrome Developer Mode Settings
      2. Settings 面板左侧单击 Blackboxing,单击 Add pattern,在 Pattern 文本框中输入 /bl.*\.js$,并单击 Add


        Tab Blackboxing
    • 方法二:使用 SDK 配置项 behavior: false 关闭用户行为回溯。

      <script>
          ! (function ( c , b, d, a ) {
              c [a] || ( c[a] = {});
              c [a].config = {
                  pid: "xxxxx",
                  imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                  sendResource: true,
                  enableLinkTrace: true,
                  behavior: false
              };
              with(b) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("crossorigin", "", src = d)
          })(window, document, "https://retcode.alicdn.com/retcode/bl.js", "__bl");
      </script>

    按照上述方法处理后,console.log 打印出的信息即可定位到原代码中的位置。


    Issue After