这是我参与更文挑战的第7天，活动详情查看： 更文挑战
1. 前言
这几个月来、一直在忙于业务、不是在需求评审的路上、就是在需求评审的路上、还是在评审的路上!!!!!!
这周时间比较充裕、实在受不了小程序告警群日日信息轰炸、故花时间fix了部分线上报错、此文是针对实践过程所做的总结、目的是指引大家如何fix线上报错信息、欢迎纠错～
2. 如何收到微信告警?
首先在微信公众平台后台-> 开发管理 -> 监控告警 -> 找到系统接口告警群-> 扫码加入群
然后当线上有报错信息时、告警群会收到类似如下信息:
下面言归正传、看如何借助sourceMap定位问题～
3.sourceMap调试
为方便开发者使用sourceMap文件定位代码问题, 增加调试插件优化sourceMap匹配调试 sourceMap保留了目标代码在源代码中的位置信息!!!
微信小程序在打包时、会将所有的js代码打包成一个文件、从而减少体积、加快访问速度。
运行环境:下载并安装 1.03.2012152 或以上版本的开发者工具。
4.使用教程
A. 打开微信开发者工具→ 设置 → 扩展设置 → 调试器插件→ 添加sourceMap匹配调试插件
下图为已添加该调试器插件[微信开发者工具若是直接从旧版本升级到新版本、可能调试器上还没显示有sourcemap选项、记得在这里打开].
B. 导入sourceMap文件
sourceMap文件的下载路径有2种:
- 微信开发者工具上传成功后、弹窗内可下载;
- 微信公众平台管理后台→ 开发→ 开发管理 → 运维中心 → 错误日志 → 错误内容 → 下载线上版本Source Map文件。
通过微信公众平台下载下来的sourceMap文件、是线上最新1个版本的小程序; 但是我们的错误内容里面集合了很多个小程序版本.
说到这,有个建议就是: 找个地方存储(备份)每个体验版对应的sourceMap文件[再直白点来说就是已无bug准备上线的版本]、在fix线上错误的时候就可找到对应版本的sourceMap文件、处理起来更精准。
C.确定错误信息的版本号
找到你想fix的那条错误信息、点击详情会跳转至错误信息详情页、在列表中我们就能看到小程序版本。
其实我们也可以直接在错误内容筛选条件里指定某一版本、针对fix。
D. 查看sourceMap对应的版本号
不着急看版本号, 先来看看到底有些啥玩意儿: 其实就是个json文件.
在下载下来的sourceMap文件内找到app-service.map.map文件、其里面有wx字段、记录着小程序的版本号, 如下所示。
{
"version":3,
"sourceroot":"", // 源文件所在的目录信息
"sources":[‘x.js’,'y',.....], // 源文件列表、这里表示由x文件和y文件和....文件合并生成
"names": [’variableA','variableB', ......], // 若开启了变量名混淆、这里会保留变量名在源文件中的名字信息
"mappings": "", // 这个是重点、是目标代码和源文件的位置的映射关系
"sourcesContent": [], // 可选项、保存源码信息、顺序与sources字段对应 -> 你可以理解为把sources文件内的代码原封不动地放入该数组中
"wx": {
"version": 1,
"userVersion”: "线上微信小程序的版本号",
"userNotes”: "xxx",
"packageVersion”: "包的版本号"
}
}
看了眼mappings的内容、简直脑壳痛、这里不做深究、若想知道这些是怎么个映射关系、若想请戳此链接: developers.weixin.qq.com/community/d…
E. 在微信开发者工具→ 调试器→ sourcemap选项卡中、导入刚下载的sourcemap文件、然后输入目标行号、点击匹配按钮即可获得匹配结果。
先锁定mp后台想要fix的报错信息内容:
紧接着导入该sourceMap文件&&输入行列号、点击匹配.
至此、你可以执行下一个步骤.
E. 根据匹配结果、找到对应文件、去fix即可
例如上一步骤定位到的文件是: /model/index.js, 因代码涉及到实际业务、故这里就不单独贴出来了.
简化后的报错代码大致如下:
const res = res // 或者 const res = null、注意若res为''、其代码本身是不会报错的[留意代码的健壮性]
let { code } = res
console.log('报错', code)
排查问题发现: res若是null/undefined的话、直接取里面的值是会报错的、报错信息为: undefined is not an object了!
5. 问题汇总
5.1 行号列号如何获取?
找到你想要fix的那条报错信息、找找里面的app-service.js这一戳东西、然后将其后面的行号和列号拷贝出来、即可获取错误信息在源代码中对应的页面路径行号列号信息(注意用:区分隔开)。
找找app-service.js这一戳东西:
Tips: 若从报错相信信息无法看到具体的行数、列数、该怎么处理呢?
可选择暂不处理，有的相同报错会有多条，其中有的就会有行列号→ 隔段时间去观察即可。
5.2 app-service.map.map要取哪个目录下的?
我们的小程序项目解压后、大概可以得到如下目录(分包加载、解压后是多文件的文件夹)
若能定位到具体文件、看是在主包还是分包里面、若是分包、一般在subpages里面、要去找到对应分包文件下的sourcemap文件;若是主包内的、一般是看_APP_
实际可能存在差异、根据实际情况来寻找即可。
5.3 未匹配到结果
若我们拿旧的小程序版本的错误信息去匹配最新版本的sourceMap文件、是匹配不出来的、会有如下报错[报错实际在A版本、But线上的sourceMap文件是B版本]:
6. 写在最后
若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!
