一個成熟的業(yè)務(wù)，必定會有各種埋點來支撐業(yè)務(wù)數(shù)據(jù)上報，在日常開發(fā)工作中埋點需求跟業(yè)務(wù)需求一樣重要，所以埋點發(fā)送的正確與否關(guān)系到某個業(yè)務(wù)功能的驗證，甚至可以影響到整個公司的戰(zhàn)略決策。
日常工作中，一般是由測試人員來驗證埋點是否發(fā)送正確，但是有很多責(zé)任心很強(qiáng)的產(chǎn)品可能不太相信開發(fā)和測試同學(xué)，他們希望自己來驗證這個埋點是否發(fā)送正確，這時候就需要使用到抓包工具，比如Fiddler， Charles等。但是在使用這些工具前還需要做一些列的設(shè)置才能抓包成功，產(chǎn)品覺得這個配置太繁瑣，以下是總結(jié)的一些問題：
1、手機(jī)、電腦上需要安裝證書。
2、手機(jī)需要設(shè)置代理，連上電腦。
3、安卓抓包需要debug版本
4、Fiddler和Charles是抓到手機(jī)上所有的請求，他們只想看埋點。
為了幫助產(chǎn)品有個好的埋點驗收體驗，我們特意設(shè)計了這套天眼抓包系統(tǒng)，產(chǎn)品只需要在彩蛋頁面中開啟天眼功能，然后打開瀏覽器輸入網(wǎng)址按下回車，就可以馬上進(jìn)行驗收了。不需要安裝證書，不需要設(shè)置代理，無論debug包還是release包都沒問題。下面看看效果：
思路
為了讓產(chǎn)品有更好埋點校對的體驗，我們首選是讓產(chǎn)品可以在電腦瀏覽器中進(jìn)行操作，所以如何讓APP中發(fā)出的埋點實時的展示到瀏覽器中是關(guān)鍵，這里我們使用了websocket來實現(xiàn)，思路是，APP中產(chǎn)生的埋點通過http post調(diào)用上報到web server，然后web server再把日志通過websocket推送到用戶的瀏覽器上，整個過程幾乎可以做到實時。如下圖：
這里因為本人對js不是很熟悉，所以這里使用flutter來實現(xiàn)，使用flutter來實現(xiàn)目前可以支持web，android，ios。產(chǎn)品也可以用手機(jī)或者平板native app來查看埋點。（*注 目前flutter的SelectableText widget在web端的實現(xiàn)有問題，不能拷貝文字）
接口設(shè)計
1、手機(jī)通過http post請求發(fā)送log到server端
url：${host}/logcat/postlog
http method: post
params:
| 參數(shù)名 | 類型 | 示例 | 示例 |
|---|---|---|---|
| log | String | {"url":"xxx", "userid":"xxx"} | 產(chǎn)品關(guān)心的埋點數(shù)據(jù)，json 表達(dá)式 |
2、服務(wù)端實現(xiàn)
服務(wù)端這邊不做任何的內(nèi)容解析，把拿到的log值原封不動的push到瀏覽器端，瀏覽器端拿到log的值進(jìn)行解析展示。
2.1 post接口
2.2 websocket接口
3、Flutter端實現(xiàn)
這塊使用 web_socket_channel 組件來實現(xiàn)鏈接websocket，這個組件即支持Web端，也支持app端。如果你需要打包web端的應(yīng)用你需要使用HtmlWebSocketChannel，打APP端的應(yīng)用你需要使用IOWebSocketChannel。
代碼
現(xiàn)在服務(wù)端和Flutter端的代碼已經(jīng)放到github上，有興趣的同學(xué)可以拉下來看看：https://github.com/dengyin2000/logcat
Flutter端代碼由于時間關(guān)系，為了盡快實現(xiàn)功能，代碼設(shè)計架構(gòu)上沒有做很好的設(shè)計。
