小程序线上告警排查

韦东锏

发布于 2022-04-11 17:51:30

1.5K0

发布于 2022-04-11 17:51:30

文章被收录于专栏：Android码农

记录一个小程序线上告警的排查过程

告警信息

【JS脚本错误】 Appid: wx9b8740e10bb42de5 昵称: 工采易告警时间: 2022-02-24 20:57:00 错误类型: 业务代码错误告警内容: 阈值告警,当前1 上限1 错误样例 (展示top3错误): 1 Unexpected token u in JSON at position 0 1次

定位问题

具体的错误日志，在Android跟ios上，是不同的，这里分别说明

Android设备的告警定位

打开小程序后台 - 开发管理 - 错误日志，找到详细的异常信息，如下

Unexpected token u in JSON at position 0
SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at exports.getShare (https://track/activeScene.js:13:21)
at https://app.js:30:7
at u (https://lib/WASubContext.js:2:72770)
at Generator._invoke (https://lib/WASubContext.js:2:72558)
at Generator.next (https://lib/WASubContext.js:2:73195)
at asyncGeneratorStep (https://usr/app-service.js:14477:58)
at c (https://usr/app-service.js:14477:277)
at https://usr/app-service.js:14477:370

这个告警，都是Android设备产生的，而且很庆幸，可以看到准备的错误代码，就是这里

at JSON.parse (<anonymous>)
at exports.getShare (https://track/activeScene.js:13:21)
at https://app.js:30:7

可以清楚看到，就是app.js的30行代码，调用的getShare方法有问题，找到实际的代码

// app.js
if ([1044, 1007, 1008].includes(options.scene)) {
  // 分享活动埋点
  getShare(options)
}

export function getShare(ops) {
  // 截获分享事件
  const data = JSON.parse(decodeURIComponent(ops.query.scene)) // 获取到的页面参数
}

可以直接定位到就是JSON.parse方法报错了，所以Android设备，可以通过后来日志，直接定位到错误代码

ios设备的告警定位

同样的去小程序后台，找到一个ios的告警，信息如下

JSON Parse error: Unexpected identifier "undefined"
parse@[native code]
https://usr//app-service.js:14834:114
https://usr//app-service.js:14912:859
u@https://lib/WASubContext.js:2:72774
https://lib/WASubContext.js:2:72559
asyncGeneratorStep@https://usr//app-service.js:14477:58
c@https://usr//app-service.js:14477:295
https://usr//app-service.js:14477:371
$@https://lib/WASubContext.js:2:48501
https://usr//app-service.js:14477:228
https://lib/WASubContext.js:2:365003
....省略代码....

可以看到，并没有直接告诉你错误的代码，这里需要通过线上版本的SourceMap来定位，这个在小程序后台可以下载

下载下来后，解压，可以看到有多个文件夹

不同的文件夹，代表不同的分包，其中full代表全量包，然后vsCode切换代码分支到线上分支，用微信开发工具下载一个插件

打开微信开发者工具，在菜单栏选择"设置-通用设置-扩展-调试器插件"，进入插件下载页面，添加sourcemap匹配调试插件

打开插件，选择对应分包的文件（我这里知道崩溃的地方是app分包，如果不清楚的话，可以每个分包都试下），然后输入后台反馈的行号

https://usr//app-service.js:14834:114
https://usr//app-service.js:14912:859

点击匹配后，会直接跳到真实错误的代码

可以看到，ios报错的代码，跟上面Android设备报错的代码是同个地方

本地复现

知道错误地方后，基本可以猜到因为传递的参数是undefined导致的，于是专门写了一个代码，模拟看下

let temp
JSON.parse(decodeURIComponent(temp))

然后运行后，看到报错如下

SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Ui._updatePageVisible (index.js? [sm]:75)
    at Ui.e.<computed> [as _updatePageVisible] (sensorsdata.min.js? [sm]:1)

跟线上的报错类型一样，由此确定是因为传的参数是undefined导致的

源码解析

还剩余一个问题，传的参数是undefined后，为什么报的错误是SyntaxError: Unexpected token u in JSON at position 0 由于报错的是微信基础库的报错，而基础库代码封闭的，不过在官方看到了这个

在 Android 上，小程序逻辑层的 JavaScript 代码运行在 V8 中，视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的；

在Android设备上，js的实现用的是Google V8，而这个V8是开源的，找了下，可以看到对应的源码

  function URIDecodeComponent(component) {
    var reservedPredicate = function(cc) { return false; };
    var string = ToString(component);
    return Decode(string, reservedPredicate);
  }

由此知道，decodeURIComponent()返回是一个字符串'undefined'，然后传给JSON.parse方法，由于第一个字符是u，不是json开始的大括号，所以报错是Unexpected token u in JSON，也是符合预期