SourceMap是一个信息文件,它里面存储着代码转换前后的对应位置信息。APM控制台提供了SourceMap上传与反解的能力,帮助您解析JS详情中的错误堆栈。
步骤一:获取SourceMap
各个平台的小程序在上传时或上线后均可在指定后台获取SourceMap文件。下面以微信小程序为例进行详细介绍。
- 登录微信小程序开发者后台。
- 在左侧导航栏,选择开发 > 开发管理。
- 在错误内容区域,单击下载线上版本SourceMap文件。
步骤二:上传SourceMap
控制台提供了从JS错误详情页面和从管理SourceMap页面两个入口上传SourceMap。
JS错误详情
- 登录应用性能监控全链路版控制台。
- 单击目标应用下的小程序pro监控。
- 在控制台左上角选择全部功能 > JS总览。
- 在错误及页面总览中,单击目标错误内容,进入错误详情页面。
- 在错误堆栈区域,单击minified。
- 在目标JS文件后,单击上传按钮。
- 在上传sourcemap页面,上传与当前JS文件名对应的SourceMap文件,选择小程序类型、env和release版本,然后单击确定,平台会解析出当前代码的上下文。
管理sourcemap
- 登录应用性能监控全链路版控制台。
- 单击目标应用下的小程序pro监控。
- 在控制台左上角选择全部功能 > 管理sourcemap。
- 单击上传Sourcemap。
- 在上传sourcemap页面,输入js sourcemap文件名、上传SourceMap文件、选择小程序类型、env和release版本,然后单击确定。
- 在控制台左上角选择全部功能 > JS总览。
- 在错误及页面总览中,单击目标错误内容,进入错误详情页面。
- 在错误堆栈区域查看反解的内容。
步骤三:验证SourceMap
您可以通过微信官方文档来验证您下载的SourceMap。如果SourceMap可用,开发者工具将会出现类似以下内容:
注意事项
- 用原生小程序开发时,源文件是没有SourceMap的,这时用小程序开发者工具上传后生成的SourceMap的大小只有几K~几十K,因为只包含了代码行列反解的功能,并没有携带上下文。
- 当您使用Taro、Uni App三方框架并且开启SourceMap时,打包出来的产物本身自带了SourceMap,在小程序开发工具上传时也会包含源码的上下文,这个SourceMap会比较大可能几百K~几M,反解后就可以看到当前错误的具体上下文。