前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序线上告警排查

小程序线上告警排查

作者头像
韦东锏
发布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设备的告警定位

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

代码语言:javascript
复制
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设备产生的,而且很庆幸,可以看到准备的错误代码,就是这里

代码语言:javascript
复制
at JSON.parse (<anonymous>)
at exports.getShare (https://track/activeScene.js:13:21)
at https://app.js:30:7

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

代码语言:javascript
复制
// 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的告警,信息如下

代码语言:javascript
复制
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分包,如果不清楚的话,可以每个分包都试下),然后输入后台反馈的行号

代码语言:javascript
复制
https://usr//app-service.js:14834:114
https://usr//app-service.js:14912:859

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

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

本地复现

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

代码语言:javascript
复制
let temp
JSON.parse(decodeURIComponent(temp))

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

代码语言:javascript
复制
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是开源的,找了下,可以看到对应的源码

代码语言:javascript
复制
  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参数了,这里做下容错即可

代码语言:javascript
复制
if (!ops.query.scene) {
  return
}

线上验证

修复上线后,查了下线上的数据,也确实没有再上报告警了

总结

js跟Java一样,很多线上问题,都是由于空指针导致的,在js叫做undefined,在Java叫做nullPointException,空崩溃,是程序员永远的敌人

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Android码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 告警信息
  • 定位问题
    • Android设备的告警定位
      • ios设备的告警定位
      • 本地复现
      • 源码解析
      • 问题修复
      • 线上验证
      • 总结
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档