前端知識之前端監控

前端監控

前端監控一般分為三種，分别為頁面埋點、性能監控以及異常監控。

頁面埋點

監控資料

一般起碼會監控以下幾個資料：

• PV / UV
• 停留時長
• 流量來源
• 使用者互動

實作思路

• 手寫埋點

可以自主選擇需要監控的資料然後在相應的地方寫入代碼。

這種方式的靈活性很大，但是唯一的缺點就是工作量較大，每個需要監控的地方都得插入代碼。

• 無埋點

不需要開發者手寫埋點了，而是統計所有的事件并且定時上報。

這種方式雖然沒有前一種方式繁瑣了，但是因為統計的是所有事件，是以還需要後期過濾出需要的資料。

性能監控

• 性能監控可以很好的幫助開發者了解在各種真實環境下，頁面的性能情況是如何的。
• 對于性能監控來說，我們可以直接使用浏覽器自帶的 Performance API 來實作這個功能。
• 對于性能監控來說，其實我們隻需要調用performance.getEntriesByType(‘navigation’) 這行代碼就行了。
• 這行代碼傳回了一個數組，内部包含了相當多的資訊，從資料開始在網絡中傳輸到頁面加載完成都提供了相應的資料。

異常監控

• 代碼報錯

• 接口異常上報