评论

【官方教程】利用SourceMap解析JS Error报错信息

本文主要介绍如何获取并利用小程序SourceMap,帮助开发同学定位小程序云测报告中发现的JSError问题

一、背景

由于小程序源码是经过编译、打包等工程化转换后运行在微信环境中的,小程序云测服务 在跑测中检测到的JS Error报错信息时,只能给出实际运行时的代码信息,而非小程序开发代码,开发者排查和定位错误原因非常不方便。

以下图为例:堆栈第①行和第②行,出现app-services.js:行号,列号这种信息,表示这两行堆栈起源于业务代码错误,但仅根据这两行运行时错误信息无法定位到源码位置的,这时需要用 SourceMap文件 进行反解,才能定位到源码信息。

二、获取小程序SourceMap文件

在获取SourceMap文件之前,需要明确以下注意事项:

  • 云测服务提测的开发中版本出现的JSError无法解析开发中版本实际上使用miniprogram-ci预览能力生成的版本,此时无法获取SourceMap文件,故无法解析代码堆栈
  • 若小程序源码没有任何变化,重新编译(上传)小程序后生成的SourceMap文件不会变化。所以在小程序设置体验版,或发布上线的操作,也不会改变SourceMap

小程序SourceMap可以从以下途径获取

1、线上版本小程序,可以直接从微信公众平台后台下载SourMap文件

前往 We分析 登录后,进入左侧菜单栏性能分析/ JS分析 ,点击下载线上SourceMap文件。

2、在开发者工具上传代码后下载

在开发者工具上传代码后,会实时生成SourceMap文件,此时点击下载SourceMap文件并保存即可

3、使用miniprogram-ci获取

miniprogram-ci工具可以获取最近上传版本的Sourcemap文件,详情可见接口文档:拉取最近上传版本的SourceMap


三、上传SourceMap文件到云测服务

云测服务支持手动上传SourceMap文件接口自动上传Sourcemap文件

1、手动上传SourceMap文件

用户在提交测试前,先在云测平台项目管理/SourceMap管理页面,上传新的SourceMap文件以及对已上传的SourceMap文件进行管理操作。

上传后,后台会从SourceMap文件中提取出小程序版本、代码提交时间、代码提交备注等信息。提交测试后会根据提交小程序的MD5自动匹配对应的SourceMap进行反解。

如果测试前未上传,而测试报告中又发现了JS Error,也可以在测试报告页面JS Error详情标签中进行上传或选择已有的SourceMap文件实时解析JS Error报错信息。

2、使用接口上传SourceMap文件

用户也可以利用第三方接口,在获取到SourceMap后自动上传,具体可参考 第三方接口文档


四、结果展示

以开篇的JS Error为例,在上传对应小程序版本的SourceMap等待页面自动刷新后,JS Error反解后信息如下。可以看到反解后,可以直接定位到用户代码的行数,方便用户定位问题

五、最佳实践

【最佳实践】这里我们推荐用户版本更新后,可以用使用 miniprogram-ci上传代码 ,并 获取到sourcemap信息 后,直接调用 第三方API 上传到云测服务,并提交云测任务,获取到结果后,反馈给开发同学。这样可以方便的和现有小程序打包发布的Devops流程相结合。



最后一次编辑于  2022-12-07  
点赞 3
收藏
评论

1 个评论

登录 后发表内容