背景

微信小程序發(fā)布以來，已經從小巧和用完即走的定位，變成了包含復雜功能和完整業(yè)務的移動應用。

隨之而來的是，生產運營會出現(xiàn)更多難以定位和無法簡單復現(xiàn)的bug，尤其本人從事銀行業(yè)務開發(fā)，穩(wěn)定性要求極高，不然很容易造成客訴甚至資金損失。

另外，為了做了用戶研究，需要了解用戶如何使用我們的小程序，如路由時序、點擊流等。

以上都需要有完整可用的日志來發(fā)現(xiàn)和定位生產問題，跟蹤用戶行為。

日志種類

翻查api文檔，小程序打印日志方式有三種，簡單描述如下：

1. 控制臺日志（console）：開發(fā)測試階段用于調試

2. 實時日志（wx.getRealtimeLogManager）：實時記錄用戶操作，官方提供了很好的過濾篩選，可以精準定位到具體日志；日限500w條，不過多個打印會合并成一條上報；最多保留7天。

3. 本地日志（ wx.getLogManage）：客戶端本地日志，用戶點擊“反饋與投訴”或者點擊頁面中的反饋組件可以同步到管理臺；最大5m。

集合上報和數(shù)據(jù)脫敏

對于具體的問題可能需要通過不同的日志來定位，或者結合起來相互印證用戶的行為。

所以我們需要同時上報幾種日志，但對于某些業(yè)務敏感數(shù)據(jù)可能不適合上報到外系統(tǒng)（微信服務器）或保存在客戶端本地，我們可以在封裝的集合上報函數(shù)中先對數(shù)據(jù)進行脫敏處理。

做法很簡單，遍歷日志對象，通過正則匹配，把敏感數(shù)據(jù)打碼。

脫敏后的實時日志如下：

無痕埋點

事件捕獲

一般來說，前端日志至少包括：路由切換信息，腳本錯誤日志，接口請求數(shù)據(jù)，用戶交互信息

在小程序中，前三可以通過官方監(jiān)聽接口和封裝函數(shù)的方法來抓取數(shù)據(jù)并且上報。

唯獨用戶交互信息，因為小程序的雙線程架構，導致沒辦法像h5那樣直接在document對象中抓取用戶事件。只能在每個wxml模版最外層綁定事件來監(jiān)聽用戶行為。

但是對于非冒泡事件（如catchtap）和組件事件（如getuserinfo），還是沒辦法捕獲。

再者，也沒辦法捕獲所有事件，組件事件是不會冒泡的。

劫持事件

另辟蹊徑，能不能劫持小程序中所有事件函數(shù)來實現(xiàn)事件捕獲？可以。

微信小程序中普通事件和組件事件都是bind$event\text{或}catch${event}。可以把模版中所有這形式的key對應的值都替換成我們定義的hook。

在hook函數(shù)中完成事件捕獲和上報，再執(zhí)行原來綁定的事件，實現(xiàn)類似beforeEevent和afterEvent的事件鉤子函數(shù)。

組件標識

事件對象中并沒有觸發(fā)事件的組件的詳細信息（類似xpath的元數(shù)據(jù)），要是頁面有兩個組件都綁定了同一個事件，那我們要怎么區(qū)分用戶是點擊了哪個組件觸發(fā)的事件。

可以結合組件的組件名、id、class等信息給組件構造一個id，格式為：

eventName*tagName#id.class(data)
復制代碼

 例如

確認
復制代碼

通過劫持事件和增加標識信息后，實際輸出的代碼為 ：

確認
復制代碼

然后在事件對象中可以通過 e.mark.eleId來拿到組件標識

實現(xiàn)攔截函數(shù)

import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";

wxa.use(BindHijackPlugin, {
    beforeTap: function(e){
        $log('tap event', e);
    },
    afterTap: function(e){
        console.log('afterTap', e);
    },
    before: function(e){ //所有事件攔截
        console.log('before', e);
    },
    after: function(e){
        console.log('after', e);
    },
});
復制代碼

自動事件

需要注意的是，小程序中有些事件是自動執(zhí)行的，例如組件swiper當設置autoplay為true之后，在指定間隔下會自動執(zhí)行change事件，需要通過判斷source來排除非用戶行為，否則鉤子函數(shù)會一直被觸發(fā)。