帮助手册

JavaScript 错误

现代应用的复杂性加上普遍存在的晦涩混淆代码,使得精准定位错误所在位置十分困难。

借助 Site24x7 的 JavaScript 错误功能,您可以持续监控正在收集的 JavaScript 错误,还可以使用堆栈跟踪调试错误并找到错误的确切行。

查看 JavaScript 错误

  1. 登录您的 Site24x7 账号
  2. 依次进入 RUM > 您的应用 > JavaScript 错误(JavaScript Errors) > 错误(Errors)
说明

在右上角,您也可以指定需要查看错误指标的时间范围。

 

  • 顶部横幅显示错误总数、发生错误的网页总数、存在错误的文件总数以及受影响用户总数。
说明

点击添加过滤器(Add Filters)按钮,可根据错误类型、文件类型、网页、浏览器、用户、环境、版本和域名缩小错误范围。

  • 顶部横幅下方的图表显示"错误数与受影响用户数"。您还可以获取已发生错误和受影响用户的最小值、平均值、最大值、第 95 百分位数和第 99 百分位数摘要。
  • 图表下方的部分列出了所有错误。您可以点击特定错误进行进一步检查。
说明

您也可以通过点击相应选项卡,按错误类型、文件类型、网页、浏览器、用户、环境、版本和域名查看错误。

查看错误详情

点击 JavaScript 错误将打开详情页面。

 

详情选项卡

顶部横幅显示相应的错误详情,如发生问题的设备和浏览器、受影响用户的用户 ID,以及收集错误详情的时间。

说明

在顶部横幅下方,您可以看到浏览器、文件名、错误类型、用户 ID 等元数据。点击其中任何一项将打开新选项卡,并以此作为过滤条件。

堆栈跟踪(Stack Trace)

堆栈跟踪显示错误的文件名、方法名和行号。您可以对混淆的 minified 错误文件进行反混淆,以找到包含错误的确切代码行。

  • 如果已上传 Source Map 和 JS Source 文件(显示绿色对勾标识),将显示错误代码的确切行。
  • 如果未上传 Source Map 和 JS Source 文件(显示橙色感叹号标识),您需要上传这些文件才能获取错误代码的确切行。
说明

您可以点击导出 CSV(Export CSV)将堆栈跟踪以 CSV 文件格式下载。

自动检测 Source Map

在某些情况下,如果 Source Map 托管在您的网站上,RUM Agent 将自动检测到它。

情形 1:已指定 Source Map 路径

如果您在 minified 文件中指定了 Source Map 的文件名、相对路径或绝对路径,RUM Agent 将自动在与 minified 文件相同的目录中搜索 Source Map。

语法

  1. sourceMappingURL= (文件名)
  2. sourceMappingURL= (相对路径)
  3. sourceMappingURL= (绝对路径)

示例

  1. sourceMappingURL= (script.js.map)
  2. sourceMappingURL= (dummy_dir/script.js.map)
  3. sourceMappingURL= (https://<Some domain name>/src/map/script.js.map)

情形 2:未指定 Source Map 路径

如果您未在 minified 文件中提及 Source Map:

  1. RUM Agent 将自动在 minified 文件的响应头中查找 Source Map 路径。

    语法
    x-sourcemap-url: (source map path)

    示例
  2. 如果响应头中未指定,Agent 将在与 minified 文件同名的目录中查找。

示例
如果您的 minified 文件名为 script.min.js,RUM Agent 将查找名为 script.min.js.map 的 Source Map。

说明

  1. 如果自动检测到 Source Map,将显示错误代码的确切行。例如,在下方截图中,convertUpperCase 方法中的第 90:8 行exe 方法中的第 32:19 行就是 script.min.js 文件中错误代码的确切行。

    但是,如果您想查看对应的代码片段,则必须手动上传 JS Source 文件。
  2. 如果由于某些原因 Source Map 检测失败,系统将提示用户手动上传 Source Map 和 JS Source 文件。

上传文件(Upload files)

  1. 点击上传文件(Upload Files)选项。
  2. 如果是单文件上传(File Upload)
    1. 填写版本号(供您参考)。
    2. 浏览并上传 Source Map 文件。
    3. 浏览并上传 JS Source 文件。
  3. 如果是 ZIP 上传(Zip Upload)
    1. 填写版本号(供您参考)。
    2. 浏览并上传包含所有所需文件的 ZIP 文件。
  4. 点击提交(Submit)

  

说明

  • 如果您上传相同文件(相同文件名)但版本不同,将被视为不同文件。
  • 如果您上传相同文件(相同文件名)且版本相同,新文件将替换现有文件。
  • 如果您想映射到不同的文件,请从下拉菜单中选择,然后点击重新解析(Reparse)

面包屑导航(Breadcrumbs)

此部分显示您最近的所有操作,您可以通过它确定是哪个操作导致了错误。

例如,如果您依次点击登录(Login) > 提交邮箱(Submit email) > 开始播放(Begin play),RUM Agent 会将每个操作记录为一个面包屑。您还可以看到每个活动的发生时间,从而了解在点击下一个按钮之前在某个页面上停留了多长时间。

说明

当您点击查看完整用户会话(View entire user session)链接时,将跳转到相应用户会话(User Session)的摘要页面。

错误实例选项卡

错误实例(Error Instances)选项卡提供所选错误在选定时间段内的详细错误报表。

说明

点击单个实例时,您将跳转到相应错误的详情(Details)选项卡。

 

参数 描述
采集时间(Collection Time) 发现错误的时间
文件(File) 发生错误的文件名
页面(Page) 发生错误的网页 URL
浏览器(Browser) 发生错误的浏览器
设备类型(Device Type) 发生错误的设备
用户(User) 遇到该问题的用户
说明

您也可以将此信息导出为 PDF 文件。

查看已上传文件

  1. 依次进入 RUM > 您的应用 > JavaScript 错误(JavaScript Errors)
  2. 选择源文件(Source Files)查看所有已上传的文件。

 

您可以通过从相应下拉菜单中选择文件类型和版本来快速搜索。您也可以使用按文件名搜索(Search by File Name)框按文件名搜索。

上传和删除文件

  • 您也可以点击上传(Upload)上传 Source Map 和 JS Source 文件。
  • 您可以选中文件后点击删除(Delete)来删除文件。

使用场景

在本示例中:

  1. 您可以看到应用的 Minified JS 文件中发生了错误。
  2. 然而,如下方截图所示,由于文件被混淆为单行,调试过程非常困难,极难解读和诊断导致错误的代码。
  3. 要在 RUM 的 JavaScript 错误部分查看错误并进一步检查,请按以下步骤操作:
    1. 从 Site24x7 Web 客户端,进入 RUM 部分。
    2. 进入 JavaScript 错误(JavaScript Errors)部分。
    3. 将时间范围设置为最近 30 分钟(Last 30 Min),仅过滤最近发生的错误。
    4. 浏览错误列表,点击您要进一步检查的特定错误。


  4. 由于网站上未托管任何 Map 文件,系统提示上传所需的 Source Map 和原始 JS 文件。
  5. 点击上传文件(Upload Files)选项并上传所需文件,最后点击提交(Submit)

    上传后,错误代码的确切行将如下方截图所示。

相关文章

本文档对您有帮助吗?

您愿意帮助我们改进文档吗?请告诉我们哪些方面可以做得更好。


很抱歉本文档未能让您满意。我们希望了解可以从哪些方面改进您的体验。


感谢您抽出时间分享反馈。我们将利用您的反馈来改进在线帮助资源。

短链接已复制!