一个成熟的业务，必定会有各种埋点来支撑业务数据上报，在日常开发工作中埋点需求跟业务需求一样重要，所以埋点发送的正确与否关系到某个业务功能的验证，甚至可以影响到整个公司的战略决策。
日常工作中，一般是由测试人员来验证埋点是否发送正确，但是有很多责任心很强的产品可能不太相信开发和测试同学，他们希望自己来验证这个埋点是否发送正确，这时候就需要使用到抓包工具，比如Fiddler， Charles等。但是在使用这些工具前还需要做一些列的设置才能抓包成功，产品觉得这个配置太繁琐，以下是总结的一些问题：
1、手机、电脑上需要安装证书。
2、手机需要设置代理，连上电脑。
3、安卓抓包需要debug版本
4、Fiddler和Charles是抓到手机上所有的请求，他们只想看埋点。
为了帮助产品有个好的埋点验收体验，我们特意设计了这套天眼抓包系统，产品只需要在彩蛋页面中开启天眼功能，然后打开浏览器输入网址按下回车，就可以马上进行验收了。不需要安装证书，不需要设置代理，无论debug包还是release包都没问题。下面看看效果：
效果
思路
为了让产品有更好埋点校对的体验，我们首选是让产品可以在电脑浏览器中进行操作，所以如何让APP中发出的埋点实时的展示到浏览器中是关键，这里我们使用了websocket来实现，思路是，APP中产生的埋点通过http post调用上报到web server，然后web server再把日志通过websocket推送到用户的浏览器上，整个过程几乎可以做到实时。如下图：
流程
这里因为本人对js不是很熟悉，所以这里使用flutter来实现，使用flutter来实现目前可以支持web，android，ios。产品也可以用手机或者平板native app来查看埋点。（*注 目前flutter的SelectableText widget在web端的实现有问题，不能拷贝文字）
接口设计
1、手机通过http post请求发送log到server端
url：${host}/logcat/postlog
http method: post
params:
| 参数名 | 类型 | 示例 | 示例 |
|---|---|---|---|
| log | String | {"url":"xxx", "userid":"xxx"} | 产品关心的埋点数据，json 表达式 |
2、服务端实现
服务端这边不做任何的内容解析，把拿到的log值原封不动的push到浏览器端，浏览器端拿到log的值进行解析展示。
2.1 post接口
post接口
2.2 websocket接口
websocket接口
3、Flutter端实现
这块使用 web_socket_channel 组件来实现链接websocket，这个组件即支持Web端，也支持app端。如果你需要打包web端的应用你需要使用HtmlWebSocketChannel，打APP端的应用你需要使用IOWebSocketChannel。
代码
现在服务端和Flutter端的代码已经放到github上，有兴趣的同学可以拉下来看看：https://github.com/dengyin2000/logcat
Flutter端代码由于时间关系，为了尽快实现功能，代码设计架构上没有做很好的设计。
网友评论