小程序线上告警排查
记录一个小程序线上告警的排查过程
告警信息
【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，也是符合预期
问题修复
这里的代码是作为统计上报用的，一些非常规页面分享后，是没有scene参数了，这里做下容错即可
if (!ops.query.scene) {
return
}
线上验证
修复上线后，查了下线上的数据，也确实没有再上报告警了
总结
js跟Java一样，很多线上问题，都是由于空指针导致的，在js叫做undefined，在Java叫做nullPointException，空崩溃，是程序员永远的敌人