JavaScript 错误
现代应用的复杂性加上普遍存在的晦涩混淆代码,使得精准定位错误所在位置十分困难。
借助 Site24x7 的 JavaScript 错误功能,您可以持续监控正在收集的 JavaScript 错误,还可以使用堆栈跟踪调试错误并找到错误的确切行。
查看 JavaScript 错误
- 登录您的 Site24x7 账号。
- 依次进入 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。
语法:
- sourceMappingURL= (文件名)
- sourceMappingURL= (相对路径)
- sourceMappingURL= (绝对路径)
示例:
- sourceMappingURL= (script.js.map)
- sourceMappingURL= (dummy_dir/script.js.map)
- sourceMappingURL= (https://<Some domain name>/src/map/script.js.map)
情形 2:未指定 Source Map 路径
如果您未在 minified 文件中提及 Source Map:
- RUM Agent 将自动在 minified 文件的响应头中查找 Source Map 路径。
语法:
x-sourcemap-url: (source map path)
示例:
- 如果响应头中未指定,Agent 将在与 minified 文件同名的目录中查找。
示例:
如果您的 minified 文件名为 script.min.js,RUM Agent 将查找名为 script.min.js.map 的 Source Map。
- 如果自动检测到 Source Map,将显示错误代码的确切行。例如,在下方截图中,convertUpperCase 方法中的第 90:8 行和 exe 方法中的第 32:19 行就是 script.min.js 文件中错误代码的确切行。

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

上传文件(Upload files)
- 点击上传文件(Upload Files)选项。
- 如果是单文件上传(File Upload):
- 填写版本号(供您参考)。
- 浏览并上传 Source Map 文件。
- 浏览并上传 JS Source 文件。
- 如果是 ZIP 上传(Zip Upload):
- 填写版本号(供您参考)。
- 浏览并上传包含所有所需文件的 ZIP 文件。
- 点击提交(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 文件。
查看已上传文件
- 依次进入 RUM > 您的应用 > JavaScript 错误(JavaScript Errors)。
- 选择源文件(Source Files)查看所有已上传的文件。

您可以通过从相应下拉菜单中选择文件类型和版本来快速搜索。您也可以使用按文件名搜索(Search by File Name)框按文件名搜索。
上传和删除文件
- 您也可以点击上传(Upload)上传 Source Map 和 JS Source 文件。
- 您可以选中文件后点击删除(Delete)来删除文件。
使用场景
在本示例中:
- 您可以看到应用的 Minified JS 文件中发生了错误。

- 然而,如下方截图所示,由于文件被混淆为单行,调试过程非常困难,极难解读和诊断导致错误的代码。

- 要在 RUM 的 JavaScript 错误部分查看错误并进一步检查,请按以下步骤操作:
- 从 Site24x7 Web 客户端,进入 RUM 部分。
- 进入 JavaScript 错误(JavaScript Errors)部分。
- 将时间范围设置为最近 30 分钟(Last 30 Min),仅过滤最近发生的错误。
- 浏览错误列表,点击您要进一步检查的特定错误。

- 由于网站上未托管任何 Map 文件,系统提示上传所需的 Source Map 和原始 JS 文件。

- 点击上传文件(Upload Files)选项并上传所需文件,最后点击提交(Submit)。

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