Source Map正在前端监控中的操纵和施行

时间:2022-05-25 05:01:48来源:od体育网页版 作者:od体育网页版登录

  Web前端拓荒中,对待分娩处境的代码经常会实行压缩和污染惩罚,以减幼代码体积并提升源代码安笑性。然而当分娩处境有JS差池发作时,压缩和污染的代码也让定位差池变得更贫乏。

  咱们先来看一个爱奇艺智能前端卓殊监控平台(鹰眼Hawkeye)检测到的差池日记:

  可能看到,压缩后的差池行号和列号依然失落,函数名也经历了变换,犯错的实正在文献名很难确定。云云,凭据压缩代码的报错讯息是很难定位差池的,然则,线上代码又务必压缩上传惩罚。

  怎样均衡?SourceMap恰是办理这个冲突的利器。本文将从Source Map的基础观念及其正在前端卓殊监控中的操纵、计划及执行等方面实行先容。

  Source Map是一种存储了源代码和编译后裔码映照相闭的讯息文献,蕴涵代码转换前后的地方讯息。现正在种种主流的打包用具都救援天生Source Map,比如: Uglify JS、Grunt、Gulp、Webpack等。天生Source Map大凡正在项目打包的编译阶段实行,打包用具先将源代码解析出AST(Abstract Syntax Tree),正在天生编译后的代码时,即图二generate进程中,行使AST中节点的源泉讯息等天生Source Map。

  获取到差池仓库讯息、Source Map文献实质后则可能通过Mozilla的喷把有source-map库实行差池定位。该库中的SourceMapConsumer 实例透露一个已解析的源映照的干系磷铅量讯息,咱们可能通过为这个实例供给文献地方和文献内作机容来正在天生的源中查问相闭原始文献地方的讯息。

  目前,各大监控平台均有针对差池监控的Source Map的解析成效。比如开源监控平台Sentry救援Webpack插件和自己的CLI用具上传map文献后实行解析,付费平台Fundebug救援通过前端UI、自己CLI及接口上传map文献后实行解析。然则这些平台也有极少舛误,譬喻有的不救援操纵者遴选文献实行联系立室,有的正在操纵者遴选map立室不告成时场景交互体验不友爱。咱们受之饱动,拓荒了基于鹰眼监控编造的Source Map成效,紧要有以下上风:

  救援更纯洁的设备来通过Webpack的Plugin实行Source Map文献的上传,而且上传进程呈现卓殊不影响项目合座编译流程,代码侵入性低。

  救援更多的上传和遴选Source Map文献的办法,以实用于更多的营业差池监控的场景,且正在操纵进程中有更显然的提示和更友爱的交互。

  救援map文献收拾成效,通过项目名称和版本号遴选联系,新版本可能遴选史乘版本的map文献实行立室。

  下面临Source Map正在监控编造中的操纵、鹰眼Source Map成效计划及执行周到说明。

  将Source Map操纵于前端卓殊监控编造,紧要须要办理的题目便是操纵者怎样上传Source Map以及监控编造怎样将Source Map和差池讯息联系。商量到易用性,鹰眼SourceMap成效救援三种操纵办法:针对单个JS报错仓库从手动上传Source Map、集成插件自愿上传联系JS差池仓库讯息、针对单个JS报错仓库从SourceMap列表入遴选联系。如图三所示。

  Source Map自愿上传插件(救援Webpack3+):操纵者正在项目打包流程中集成此插件,便可将天生的Source Map自愿上传。此插件可以正在不影响项目编译流程的条件下,正在Webpack输出 asset 到 output目次之后,获取打包天生的map文献并奉行上传逻辑。而且可能通过参数设备可能遴选正在Webpack编译完结奉行后对map文献实行删除,不影响上线流程。鉴于史乘项目操纵Webpack老版本较多,鹰眼针对Webpack区其余版本实行了兼容优化。

  手动上传Source Map模块:操纵者可针对单条JS差池,上传单个Source Map实行立室,而且实行了同名检测的提。

  明医杂著