Webfunny前端监控功能分享：如何解析源码？

本文主要是介绍Webfunny前端监控功能分享：如何解析源码？，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

大家好，期待已久的sourceMap功能终于上线了，功能还需要进一步优化，但是也可以提前和大家见面了。
目前支持：webpack4.0 + 打包的代码， 如果有webpack2.0+版本的用户，可以联系webfunny技术同学单独处理~
好了，话不多说，让我们来看看如何使用webfunny来定位源码吧。

一、区分线上打包和源码的sourceMap文件

1）正常情况下，我们打包发布的文件中，一般会生成两个文件，xxx.min.js、xxx.min.js.map；一个是我们打包的压缩js文件，一个是我们sourceMap（以下称：SourceMap A）文件。webpack配置如下：

optimization: {
    minimize: true // 开启压缩
},
devtool: "source-map" // 生成sourceMap文件

用户需要将这一步生成的js和map文件，都要上传到生产地址中。（PS：有人会担心，map文件上传的生产环境，不安全，请不要担心，这一步生成map文件是无法解析出源码的，这个map文件只是记录了，参数在源码中的位置，尽可放心上传）

2）线上打包完成后，用户还需要再生成一次带源码的打包文件，这次同样会生成两个文件，一个是没有压缩的js文件，一个是我们sourceMap（以下称：SourceMap B）文件，上传到用户的私有云上，或者存放在本地都行。（PS: 这步生成的map文件，包含源码，请不要对外暴露）webpack配置如下：

optimization: {
    minimize: false // 关闭压缩
},
devtool: "source-map" // 生成sourceMap文件

3）为了方便，大家可以把这步做到ci的步骤里，自动上传这两版的sourceMap代码，以供后边使用

二、解析步骤一：先通过SourceMap A解析出错误代码在源码中的位置

1）我们进入错误详情页，可以看到错误代码的堆栈信息，我们先解析出了压缩代码的位置，大部分情况下已够用了。如图所示：

点击「解析源码」按钮，后端会获取xxx.min.js.map文件进行解析，得到错误信息在源码中的位置。

三、解析步骤二：通过SourceMap B解析出错误代码附近的源代码
1）解析步骤一完成后，页面会出现弹框，你可以选择上传源码文件进行解析，也可以填写源码文件链接地址进行解析，如图：

2）上传源码文件和填写文件的连接地址，均可以解析出源代码，如图：

到此，源码解析完成了，有什么不明白的，请给我留言吧。
常见问题：

上传sourceMap文件的时候提示：Request entity too large

解决办法：nginx中，client_max_body_size 具体的大小值，默认为1m; 此时可调整大小，可以设置为50m
关于Webfunny

[Webfunny]专注于微信小程序、H5前端、PC前端线上应用实时监控，实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警，第一时间报警，快速修复BUG！支持私有化部署，容器化部署，可支持千万级PV的日活量 ！！

这篇关于Webfunny前端监控功能分享：如何解析源码？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！