;

利用小程序SourceMap解析JS Error报错信息

2022-08-31 阅读:325
;
您当前位置:首页 | 新闻列表 | 新闻详情

一、背景

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

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

二、获取小程序SourceMap文件

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

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

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

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

前往 微信公众平台 登录对应小程序的后台管理页面,找到左侧菜单栏开发/ 开发管理 进入上方运维中心/错误日志标签,点击下载线上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流程相结合。


上一篇:小程序定制开发步骤详解 下一篇:小程序定制开发前需要准备什么

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 全平台开发 网站建设 外包开发 自主研发产品

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部