前端監控 SDK 的一些技術要點原理分析

一個完整的前端監控平臺包括三個部分：資料採集與上報、資料整理和儲存、資料展示。

本文要講的就是其中的第一個環節——資料採集與上報。下圖是本文要講述內容的大綱，大家可以先大致瞭解一下：

僅看理論知識是比較難以理解的，為此我結合本文要講的技術要點寫了一個簡單的監控 SDK，可以用它來寫一些簡單的 DEMO，幫助加深理解。再結合本文一起閱讀，效果更好。

效能資料採集

chrome 開發團隊提出了一系列用於檢測網頁效能的指標：

• FP(first-paint)，從頁面載入開始到第一個畫素繪製到螢幕上的時間
• FCP(first-contentful-paint)，從頁面載入開始到頁面內容的任何部分在螢幕上完成渲染的時間
• LCP(largest-contentful-paint)，從頁面載入開始到最大文字塊或影像元素在螢幕上完成渲染的時間
• CLS(layout-shift)，從頁面載入開始和其生命週期狀態變為隱藏期間發生的所有意外佈局偏移的累積分數

這四個效能指標都需要通過 PerformanceObserver 來獲取（也可以通過 performance.getEntriesByName() 獲取，但它不是在事件觸發時通知的）。PerformanceObserver 是一個效能監測物件，用於監測效能度量事件。

FP

FP(first-paint)，從頁面載入開始到第一個畫素繪製到螢幕上的時間。其實把 FP 理解成白屏時間也是沒問題的。

測量程式碼如下：

const entryHandler = (list) => {        
    for (const entry of list.getEntries()) {
        if (entry.name === 'first-paint') {
            observer.disconnect()
        }

       console.log(entry)
    }
}

const observer = new PerformanceObserver(entryHandler)
// buffered 屬性表示是否觀察快取資料，也就是說觀察程式碼新增時機比事情觸發時機晚也沒關係。
observer.observe({ type: 'paint', buffered: true })

通過以上程式碼可以得到 FP 的內容:

{
    duration: 0,
    entryType: "paint",
    name: "first-paint",
    startTime: 359, // fp 時間
}

其中 startTime 就是我們要的繪製時間。

FCP

FCP(first-contentful-paint)，從頁面載入開始到頁面內容的任何部分在螢幕上完成渲染的時間。對於該指標，"內容"指的是文字、影像（包括背景影像）、<svg>元素或非白色的<canvas>元素。

為了提供良好的使用者體驗，FCP 的分數應該控制在 1.8 秒以內。

測量程式碼：

const entryHandler = (list) => {        
    for (const entry of list.getEntries()) {
        if (entry.name === 'first-contentful-paint') {
            observer.disconnect()
        }
        
        console.log(entry)
    }
}

const observer = new PerformanceObserver(entryHandler)
observer.observe({ type: 'paint', buffered: true })

通過以上程式碼可以得到 FCP 的內容:

{
    duration: 0,
    entryType: "paint",
    name: "first-contentful-paint",
    startTime: 459, // fcp 時間
}

其中 startTime 就是我們要的繪製時間。

LCP

LCP(largest-contentful-paint)，從頁面載入開始到最大文字塊或影像元素在螢幕上完成渲染的時間。LCP 指標會根據頁面首次開始載入的時間點來報告可視區域內可見的最大影像或文字塊完成渲染的相對時間。

一個良好的 LCP 分數應該控制在 2.5 秒以內。

測量程式碼：

const entryHandler = (list) => {
    if (observer) {
        observer.disconnect()
    }

    for (const entry of list.getEntries()) {
        console.log(entry)
    }
}

const observer = new PerformanceObserver(entryHandler)
observer.observe({ type: 'largest-contentful-paint', buffered: true })

通過以上程式碼可以得到 LCP 的內容:

{
    duration: 0,
    element: p,
    entryType: "largest-contentful-paint",
    id: "",
    loadTime: 0,
    name: "",
    renderTime: 1021.299,
    size: 37932,
    startTime: 1021.299,
    url: "",
}

其中 startTime 就是我們要的繪製時間。element 是指 LCP 繪製的 DOM 元素。

FCP 和 LCP 的區別是：FCP 只要任意內容繪製完成就觸發，LCP 是最大內容渲染完成時觸發。

LCP 考察的元素型別為：

• <img>元素
• 內嵌在<svg>元素內的<image>元素
• <video>元素（使用封面影像）
• 通過url())函式（而非使用CSS 漸變）載入的帶有背景影像的元素
• 包含文字節點或其他行內級文字元素子元素的塊級元素。

CLS

CLS(layout-shift)，從頁面載入開始和其生命週期狀態變為隱藏期間發生的所有意外佈局偏移的累積分數。

佈局偏移分數的計算方式如下：

佈局偏移分數 = 影響分數 * 距離分數

影響分數測量不穩定元素對兩幀之間的可視區域產生的影響。

距離分數指的是任何不穩定元素在一幀中位移的最大距離（水平或垂直）除以可視區域的最大尺寸維度（寬度或高度，以較大者為準）。

CLS 就是把所有佈局偏移分數加起來的總和。

當一個 DOM 在兩個渲染幀之間產生了位移，就會觸發 CLS（如圖所示）。

上圖中的矩形從左上角移動到了右邊，這就算是一次佈局偏移。同時，在 CLS 中，有一個叫會話視窗的術語：一個或多個快速連續發生的單次佈局偏移，每次偏移相隔的時間少於 1 秒，且整個視窗的最大持續時長為 5 秒。

例如上圖中的第二個會話視窗，它裡面有四次佈局偏移，每一次偏移之間的間隔必須少於 1 秒，並且第一個偏移和最後一個偏移之間的時間不能超過 5 秒，這樣才能算是一次會話視窗。如果不符合這個條件，就算是一個新的會話視窗。可能有人會問，為什麼要這樣規定？其實這是 chrome 團隊根據大量的實驗和研究得出的分析結果 Evolving the CLS metric。

CLS 一共有三種計算方式：

1. 累加
2. 取所有會話視窗的平均數
3. 取所有會話視窗中的最大值

累加

也就是把從頁面載入開始的所有佈局偏移分數加在一起。但是這種計算方式對生命週期長的頁面不友好，頁面存留時間越長，CLS 分數越高。

取所有會話視窗的平均數

這種計算方式不是按單個佈局偏移為單位，而是以會話視窗為單位。將所有會話視窗的值相加再取平均值。但是這種計算方式也有缺點。

從上圖可以看出來，第一個會話視窗產生了比較大的 CLS 分數，第二個會話視窗產生了比較小的 CLS 分數。如果取它們的平均值來當做 CLS 分數，則根本看不出來頁面的執行狀況。原來頁面是早期偏移多，後期偏移少，現在的平均值無法反映出這種情況。

取所有會話視窗中的最大值

這種方式是目前最優的計算方式，每次只取所有會話視窗的最大值，用來反映頁面佈局偏移的最差情況。詳情請看 Evolving the CLS metric。

下面是第三種計算方式的測量程式碼：

let sessionValue = 0
let sessionEntries = []
const cls = {
    subType: 'layout-shift',
    name: 'layout-shift',
    type: 'performance',
    pageURL: getPageURL(),
    value: 0,
}

const entryHandler = (list) => {
    for (const entry of list.getEntries()) {
        // Only count layout shifts without recent user input.
        if (!entry.hadRecentInput) {
            const firstSessionEntry = sessionEntries[0]
            const lastSessionEntry = sessionEntries[sessionEntries.length - 1]

            // If the entry occurred less than 1 second after the previous entry and
            // less than 5 seconds after the first entry in the session, include the
            // entry in the current session. Otherwise, start a new session.
            if (
                sessionValue
                && entry.startTime - lastSessionEntry.startTime < 1000
                && entry.startTime - firstSessionEntry.startTime < 5000
            ) {
                sessionValue += entry.value
                sessionEntries.push(formatCLSEntry(entry))
            } else {
                sessionValue = entry.value
                sessionEntries = [formatCLSEntry(entry)]
            }

            // If the current session value is larger than the current CLS value,
            // update CLS and the entries contributing to it.
            if (sessionValue > cls.value) {
                cls.value = sessionValue
                cls.entries = sessionEntries
                cls.startTime = performance.now()
                lazyReportCache(deepCopy(cls))
            }
        }
    }
}

const observer = new PerformanceObserver(entryHandler)
observer.observe({ type: 'layout-shift', buffered: true })

在看完上面的文字描述後，再看程式碼就好理解了。一次佈局偏移的測量內容如下：

{
  duration: 0,
  entryType: "layout-shift",
  hadRecentInput: false,
  lastInputTime: 0,
  name: "",
  sources: (2) [LayoutShiftAttribution, LayoutShiftAttribution],
  startTime: 1176.199999999255,
  value: 0.000005752046026677329,
}

程式碼中的 value 欄位就是佈局偏移分數。

DOMContentLoaded、load 事件

當純 HTML 被完全載入以及解析時，DOMContentLoaded 事件會被觸發，不用等待 css、img、iframe 載入完。

當整個頁面及所有依賴資源如樣式表和圖片都已完成載入時，將觸發 load 事件。

雖然這兩個效能指標比較舊了，但是它們仍然能反映頁面的一些情況。對於它們進行監聽仍然是必要的。

import { lazyReportCache } from '../utils/report'

['load', 'DOMContentLoaded'].forEach(type => onEvent(type))

function onEvent(type) {
    function callback() {
        lazyReportCache({
            type: 'performance',
            subType: type.toLocaleLowerCase(),
            startTime: performance.now(),
        })

        window.removeEventListener(type, callback, true)
    }

    window.addEventListener(type, callback, true)
}

首屏渲染時間

大多數情況下，首屏渲染時間可以通過 load 事件獲取。除了一些特殊情況，例如非同步載入的圖片和 DOM。

<script>
    setTimeout(() => {
        document.body.innerHTML = `
            <div>
                <!-- 省略一堆程式碼... -->
            </div>
        `
    }, 3000)
</script>

像這種情況就無法通過 load 事件獲取首屏渲染時間了。這時我們需要通過 MutationObserver 來獲取首屏渲染時間。MutationObserver 在監聽的 DOM 元素屬性發生變化時會觸發事件。

首屏渲染時間計算過程：

1. 利用 MutationObserver 監聽 document 物件，每當 DOM 元素屬性發生變更時，觸發事件。
2. 判斷該 DOM 元素是否在首屏內，如果在，則在 requestAnimationFrame() 回撥函式中呼叫 performance.now() 獲取當前時間，作為它的繪製時間。
3. 將最後一個 DOM 元素的繪製時間和首屏中所有載入的圖片時間作對比，將最大值作為首屏渲染時間。

監聽 DOM

const next = window.requestAnimationFrame ? requestAnimationFrame : setTimeout
const ignoreDOMList = ['STYLE', 'SCRIPT', 'LINK']
    
observer = new MutationObserver(mutationList => {
    const entry = {
        children: [],
    }

    for (const mutation of mutationList) {
        if (mutation.addedNodes.length && isInScreen(mutation.target)) {
             // ...
        }
    }

    if (entry.children.length) {
        entries.push(entry)
        next(() => {
            entry.startTime = performance.now()
        })
    }
})

observer.observe(document, {
    childList: true,
    subtree: true,
})

上面的程式碼就是監聽 DOM 變化的程式碼，同時需要過濾掉 style、script、link 等標籤。

判斷是否在首屏

一個頁面的內容可能非常多，但使用者最多隻能看見一螢幕的內容。所以在統計首屏渲染時間的時候，需要限定範圍，把渲染內容限定在當前螢幕內。

const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight

// dom 物件是否在螢幕內
function isInScreen(dom) {
    const rectInfo = dom.getBoundingClientRect()
    if (rectInfo.left < viewportWidth && rectInfo.top < viewportHeight) {
        return true
    }

    return false
}

使用 requestAnimationFrame() 獲取 DOM 繪製時間

當 DOM 變更觸發 MutationObserver 事件時，只是代表 DOM 內容可以被讀取到，並不代表該 DOM 被繪製到了螢幕上。

從上圖可以看出，當觸發 MutationObserver 事件時，可以讀取到 document.body 上已經有內容了，但實際上左邊的螢幕並沒有繪製任何內容。所以要呼叫 requestAnimationFrame() 在瀏覽器繪製成功後再獲取當前時間作為 DOM 繪製時間。

和首屏內的所有圖片載入時間作對比

function getRenderTime() {
    let startTime = 0
    entries.forEach(entry => {
        if (entry.startTime > startTime) {
            startTime = entry.startTime
        }
    })

    // 需要和當前頁面所有載入圖片的時間做對比，取最大值
    // 圖片請求時間要小於 startTime，響應結束時間要大於 startTime
    performance.getEntriesByType('resource').forEach(item => {
        if (
            item.initiatorType === 'img'
            && item.fetchStart < startTime 
            && item.responseEnd > startTime
        ) {
            startTime = item.responseEnd
        }
    })
    
    return startTime
}

優化

現在的程式碼還沒優化完，主要有兩點注意事項：

1. 什麼時候上報渲染時間？
2. 如果相容非同步新增 DOM 的情況？

第一點，必須要在 DOM 不再變化後再上報渲染時間，一般 load 事件觸發後，DOM 就不再變化了。所以我們可以在這個時間點進行上報。

第二點，可以在 LCP 事件觸發後再進行上報。不管是同步還是非同步載入的 DOM，它都需要進行繪製，所以可以監聽 LCP 事件，在該事件觸發後才允許進行上報。

將以上兩點方案結合在一起，就有了以下程式碼：

let isOnLoaded = false
executeAfterLoad(() => {
    isOnLoaded = true
})


let timer
let observer
function checkDOMChange() {
    clearTimeout(timer)
    timer = setTimeout(() => {
        // 等 load、lcp 事件觸發後並且 DOM 樹不再變化時，計算首屏渲染時間
        if (isOnLoaded && isLCPDone()) {
            observer && observer.disconnect()
            lazyReportCache({
                type: 'performance',
                subType: 'first-screen-paint',
                startTime: getRenderTime(),
                pageURL: getPageURL(),
            })

            entries = null
        } else {
            checkDOMChange()
        }
    }, 500)
}

checkDOMChange() 程式碼每次在觸發 MutationObserver 事件時進行呼叫，需要用防抖函式進行處理。

介面請求耗時

介面請求耗時需要對 XMLHttpRequest 和 fetch 進行監聽。

監聽 XMLHttpRequest

originalProto.open = function newOpen(...args) {
    this.url = args[1]
    this.method = args[0]
    originalOpen.apply(this, args)
}

originalProto.send = function newSend(...args) {
    this.startTime = Date.now()

    const onLoadend = () => {
        this.endTime = Date.now()
        this.duration = this.endTime - this.startTime

        const { status, duration, startTime, endTime, url, method } = this
        const reportData = {
            status,
            duration,
            startTime,
            endTime,
            url,
            method: (method || 'GET').toUpperCase(),
            success: status >= 200 && status < 300,
            subType: 'xhr',
            type: 'performance',
        }

        lazyReportCache(reportData)

        this.removeEventListener('loadend', onLoadend, true)
    }

    this.addEventListener('loadend', onLoadend, true)
    originalSend.apply(this, args)
}

如何判斷 XML 請求是否成功？可以根據他的狀態碼是否在 200~299 之間。如果在，那就是成功，否則失敗。

監聽 fetch

const originalFetch = window.fetch

function overwriteFetch() {
    window.fetch = function newFetch(url, config) {
        const startTime = Date.now()
        const reportData = {
            startTime,
            url,
            method: (config?.method || 'GET').toUpperCase(),
            subType: 'fetch',
            type: 'performance',
        }

        return originalFetch(url, config)
        .then(res => {
            reportData.endTime = Date.now()
            reportData.duration = reportData.endTime - reportData.startTime

            const data = res.clone()
            reportData.status = data.status
            reportData.success = data.ok

            lazyReportCache(reportData)

            return res
        })
        .catch(err => {
            reportData.endTime = Date.now()
            reportData.duration = reportData.endTime - reportData.startTime
            reportData.status = 0
            reportData.success = false

            lazyReportCache(reportData)

            throw err
        })
    }
}

對於 fetch，可以根據返回資料中的的 ok 欄位判斷請求是否成功，如果為 true 則請求成功，否則失敗。

注意，監聽到的介面請求時間和 chrome devtool 上檢測到的時間可能不一樣。這是因為 chrome devtool 上檢測到的是 HTTP 請求傳送和介面整個過程的時間。但是 xhr 和 fetch 是非同步請求，介面請求成功後需要呼叫回撥函式。事件觸發時會把回撥函式放到訊息佇列，然後瀏覽器再處理，這中間也有一個等待過程。

資源載入時間、快取命中率

通過 PerformanceObserver 可以監聽 resource 和 navigation 事件，如果瀏覽器不支援 PerformanceObserver，還可以通過 performance.getEntriesByType(entryType) 來進行降級處理。

當 resource 事件觸發時，可以獲取到對應的資源列表，每個資源物件包含以下一些欄位：

從這些欄位中我們可以提取到一些有用的資訊：

{
    name: entry.name, // 資源名稱
    subType: entryType,
    type: 'performance',
    sourceType: entry.initiatorType, // 資源型別
    duration: entry.duration, // 資源載入耗時
    dns: entry.domainLookupEnd - entry.domainLookupStart, // DNS 耗時
    tcp: entry.connectEnd - entry.connectStart, // 建立 tcp 連線耗時
    redirect: entry.redirectEnd - entry.redirectStart, // 重定向耗時
    ttfb: entry.responseStart, // 首位元組時間
    protocol: entry.nextHopProtocol, // 請求協議
    responseBodySize: entry.encodedBodySize, // 響應內容大小
    responseHeaderSize: entry.transferSize - entry.encodedBodySize, // 響應頭部大小
    resourceSize: entry.decodedBodySize, // 資源解壓後的大小
    isCache: isCache(entry), // 是否命中快取
    startTime: performance.now(),
}

判斷該資源是否命中快取

在這些資源物件中有一個 transferSize 欄位，它表示獲取資源的大小，包括響應頭欄位和響應資料的大小。如果這個值為 0，說明是從快取中直接讀取的（強制快取）。如果這個值不為 0，但是 encodedBodySize 欄位為 0，說明它走的是協商快取（encodedBodySize 表示請求響應資料 body 的大小）。

function isCache(entry) {
    // 直接從快取讀取或 304
    return entry.transferSize === 0 || (entry.transferSize !== 0 && entry.encodedBodySize === 0)
}

不符合以上條件的，說明未命中快取。然後將所有命中快取的資料/總資料就能得出快取命中率。

瀏覽器往返快取 BFC（back/forward cache）

bfcache 是一種記憶體快取，它會將整個頁面儲存在記憶體中。當使用者返回時可以馬上看到整個頁面，而不用再次重新整理。據該文章 bfcache 介紹，firfox 和 safari 一直支援 bfc，chrome 只有在高版本的移動端瀏覽器支援。但我試了一下，只有 safari 瀏覽器支援，可能我的 firfox 版本不對。

但是 bfc 也是有缺點的，當使用者返回並從 bfc 中恢復頁面時，原來頁面的程式碼不會再次執行。為此，瀏覽器提供了一個 pageshow 事件，可以把需要再次執行的程式碼放在裡面。

window.addEventListener('pageshow', function(event) {
  // 如果該屬性為 true，表示是從 bfc 中恢復的頁面
  if (event.persisted) {
    console.log('This page was restored from the bfcache.');
  } else {
    console.log('This page was loaded normally.');
  }
});

從 bfc 中恢復的頁面，我們也需要收集他們的 FP、FCP、LCP 等各種時間。

onBFCacheRestore(event => {
    requestAnimationFrame(() => {
        ['first-paint', 'first-contentful-paint'].forEach(type => {
            lazyReportCache({
                startTime: performance.now() - event.timeStamp,
                name: type,
                subType: type,
                type: 'performance',
                pageURL: getPageURL(),
                bfc: true,
            })
        })
    })
})

上面的程式碼很好理解，在 pageshow 事件觸發後，用當前時間減去事件觸發時間，這個時間差值就是效能指標的繪製時間。注意，從 bfc 中恢復的頁面的這些效能指標，值一般都很小，一般在 10 ms 左右。所以要給它們加個標識欄位 bfc: true。這樣在做效能統計時可以對它們進行忽略。

FPS

利用 requestAnimationFrame() 我們可以計算當前頁面的 FPS。

const next = window.requestAnimationFrame 
    ? requestAnimationFrame : (callback) => { setTimeout(callback, 1000 / 60) }

const frames = []

export default function fps() {
    let frame = 0
    let lastSecond = Date.now()

    function calculateFPS() {
        frame++
        const now = Date.now()
        if (lastSecond + 1000 <= now) {
            // 由於 now - lastSecond 的單位是毫秒，所以 frame 要 * 1000
            const fps = Math.round((frame * 1000) / (now - lastSecond))
            frames.push(fps)
                
            frame = 0
            lastSecond = now
        }
    
        // 避免上報太快，快取一定數量再上報
        if (frames.length >= 60) {
            report(deepCopy({
                frames,
                type: 'performace',
                subType: 'fps',
            }))
    
            frames.length = 0
        }

        next(calculateFPS)
    }

    calculateFPS()
}

程式碼邏輯如下：

1. 先記錄一個初始時間，然後每次觸發 requestAnimationFrame() 時，就將幀數加 1。過去一秒後用幀數/流逝的時間就能得到當前幀率。

當連續三個低於 20 的 FPS 出現時，我們可以斷定頁面出現了卡頓，詳情請看 如何監控網頁的卡頓。

export function isBlocking(fpsList, below = 20, last = 3) {
    let count = 0
    for (let i = 0; i < fpsList.length; i++) {
        if (fpsList[i] && fpsList[i] < below) {
            count++
        } else {
            count = 0
        }

        if (count >= last) {
            return true
        }
    }

    return false
}

Vue 路由變更渲染時間

首屏渲染時間我們已經知道如何計算了，但是如何計算 SPA 應用的頁面路由切換導致的頁面渲染時間呢？本文用 Vue 作為示例，講一下我的思路。

export default function onVueRouter(Vue, router) {
    let isFirst = true
    let startTime
    router.beforeEach((to, from, next) => {
        // 首次進入頁面已經有其他統計的渲染時間可用
        if (isFirst) {
            isFirst = false
            return next()
        }

        // 給 router 新增一個欄位，表示是否要計算渲染時間
        // 只有路由跳轉才需要計算
        router.needCalculateRenderTime = true
        startTime = performance.now()

        next()
    })

    let timer
    Vue.mixin({
        mounted() {
            if (!router.needCalculateRenderTime) return

            this.$nextTick(() => {
                // 僅在整個檢視都被渲染之後才會執行的程式碼
                const now = performance.now()
                clearTimeout(timer)

                timer = setTimeout(() => {
                    router.needCalculateRenderTime = false
                    lazyReportCache({
                        type: 'performance',
                        subType: 'vue-router-change-paint',
                        duration: now - startTime,
                        startTime: now,
                        pageURL: getPageURL(),
                    })
                }, 1000)
            })
        },
    })
}

程式碼邏輯如下：

1. 監聽路由鉤子，在路由切換時會觸發 router.beforeEach() 鉤子，在該鉤子的回撥函式裡將當前時間記為渲染開始時間。
2. 利用 Vue.mixin() 對所有元件的 mounted() 注入一個函式。每個函式都執行一個防抖函式。
3. 當最後一個元件的 mounted() 觸發時，就代表該路由下的所有元件已經掛載完畢。可以在 this.$nextTick() 回撥函式中獲取渲染時間。

同時，還要考慮到一個情況。不切換路由時，也會有變更元件的情況，這時不應該在這些元件的 mounted() 裡進行渲染時間計算。所以需要新增一個 needCalculateRenderTime 欄位，當切換路由時將它設為 true，代表可以計算渲染時間了。

錯誤資料採集

資源載入錯誤

使用 addEventListener() 監聽 error 事件，可以捕獲到資源載入失敗錯誤。

// 捕獲資源載入失敗錯誤 js css img...
window.addEventListener('error', e => {
    const target = e.target
    if (!target) return

    if (target.src || target.href) {
        const url = target.src || target.href
        lazyReportCache({
            url,
            type: 'error',
            subType: 'resource',
            startTime: e.timeStamp,
            html: target.outerHTML,
            resourceType: target.tagName,
            paths: e.path.map(item => item.tagName).filter(Boolean),
            pageURL: getPageURL(),
        })
    }
}, true)

js 錯誤

使用 window.onerror 可以監聽 js 錯誤。

// 監聽 js 錯誤
window.onerror = (msg, url, line, column, error) => {
    lazyReportCache({
        msg,
        line,
        column,
        error: error.stack,
        subType: 'js',
        pageURL: url,
        type: 'error',
        startTime: performance.now(),
    })
}

promise 錯誤

使用 addEventListener() 監聽 unhandledrejection 事件，可以捕獲到未處理的 promise 錯誤。

// 監聽 promise 錯誤 缺點是獲取不到列資料
window.addEventListener('unhandledrejection', e => {
    lazyReportCache({
        reason: e.reason?.stack,
        subType: 'promise',
        type: 'error',
        startTime: e.timeStamp,
        pageURL: getPageURL(),
    })
})

sourcemap

一般生產環境的程式碼都是經過壓縮的，並且生產環境不會把 sourcemap 檔案上傳。所以生產環境上的程式碼報錯資訊是很難讀的。因此，我們可以利用 source-map 來對這些壓縮過的程式碼報錯資訊進行還原。

當程式碼報錯時，我們可以獲取到對應的檔名、行數、列數:

{
    line: 1,
    column: 17,
    file: 'https:/www.xxx.com/bundlejs',
}

然後呼叫下面的程式碼進行還原：

async function parse(error) {
    const mapObj = JSON.parse(getMapFileContent(error.url))
    const consumer = await new sourceMap.SourceMapConsumer(mapObj)
    // 將 webpack://source-map-demo/./src/index.js 檔案中的 ./ 去掉
    const sources = mapObj.sources.map(item => format(item))
    // 根據壓縮後的報錯資訊得出未壓縮前的報錯行列數和原始碼檔案
    const originalInfo = consumer.originalPositionFor({ line: error.line, column: error.column })
    // sourcesContent 中包含了各個檔案的未壓縮前的原始碼，根據檔名找出對應的原始碼
    const originalFileContent = mapObj.sourcesContent[sources.indexOf(originalInfo.source)]
    return {
        file: originalInfo.source,
        content: originalFileContent,
        line: originalInfo.line,
        column: originalInfo.column,
        msg: error.msg,
        error: error.error
    }
}

function format(item) {
    return item.replace(/(\.\/)*/g, '')
}

function getMapFileContent(url) {
    return fs.readFileSync(path.resolve(__dirname, `./maps/${url.split('/').pop()}.map`), 'utf-8')
}

每次專案打包時，如果開啟了 sourcemap，那麼每一個 js 檔案都會有一個對應的 map 檔案。

bundle.js
bundle.js.map

這時 js 檔案放在靜態伺服器上供使用者訪問，map 檔案儲存在伺服器，用於還原錯誤資訊。source-map 庫可以根據壓縮過的程式碼報錯資訊還原出未壓縮前的程式碼報錯資訊。例如壓縮後報錯位置為 1 行 47 列，還原後真正的位置可能為 4 行 10 列。除了位置資訊，還可以獲取到原始碼原文。

上圖就是一個程式碼報錯還原後的示例。鑑於這部分內容不屬於 SDK 的範圍，所以我另開了一個 倉庫 來做這個事，有興趣可以看看。

Vue 錯誤

利用 window.onerror 是捕獲不到 Vue 錯誤的，它需要使用 Vue 提供的 API 進行監聽。

Vue.config.errorHandler = (err, vm, info) => {
    // 將報錯資訊列印到控制檯
    console.error(err)

    lazyReportCache({
        info,
        error: err.stack,
        subType: 'vue',
        type: 'error',
        startTime: performance.now(),
        pageURL: getPageURL(),
    })
}

行為資料採集

PV、UV

PV(page view) 是頁面瀏覽量，UV(Unique visitor)使用者訪問量。PV 只要訪問一次頁面就算一次，UV 同一天內多次訪問只算一次。

對於前端來說，只要每次進入頁面上報一次 PV 就行，UV 的統計放在服務端來做，主要是分析上報的資料來統計得出 UV。

export default function pv() {
    lazyReportCache({
        type: 'behavior',
        subType: 'pv',
        startTime: performance.now(),
        pageURL: getPageURL(),
        referrer: document.referrer,
        uuid: getUUID(),
    })
}

頁面停留時長

使用者進入頁面記錄一個初始時間，使用者離開頁面時用當前時間減去初始時間，就是使用者停留時長。這個計算邏輯可以放在 beforeunload 事件裡做。

export default function pageAccessDuration() {
    onBeforeunload(() => {
        report({
            type: 'behavior',
            subType: 'page-access-duration',
            startTime: performance.now(),
            pageURL: getPageURL(),
            uuid: getUUID(),
        }, true)
    })
}

頁面訪問深度

記錄頁面訪問深度是很有用的，例如不同的活動頁面 a 和 b。a 平均訪問深度只有 50%，b 平均訪問深度有 80%，說明 b 更受使用者喜歡，根據這一點可以有針對性的修改 a 活動頁面。

除此之外還可以利用訪問深度以及停留時長來鑑別電商刷單。例如有人進來頁面後一下就把頁面拉到底部然後等待一段時間後購買，有人是慢慢的往下滾動頁面，最後再購買。雖然他們在頁面的停留時間一樣，但明顯第一個人更像是刷單的。

頁面訪問深度計算過程稍微複雜一點：

1. 使用者進入頁面時，記錄當前時間、scrollTop 值、頁面可視高度、頁面總高度。
2. 使用者滾動頁面的那一刻，會觸發 scroll 事件，在回撥函式中用第一點得到的資料算出頁面訪問深度和停留時長。
3. 當使用者滾動頁面到某一點時，停下繼續觀看頁面。這時記錄當前時間、scrollTop 值、頁面可視高度、頁面總高度。
4. 重複第二點...

具體程式碼請看：

let timer
let startTime = 0
let hasReport = false
let pageHeight = 0
let scrollTop = 0
let viewportHeight = 0

export default function pageAccessHeight() {
    window.addEventListener('scroll', onScroll)

    onBeforeunload(() => {
        const now = performance.now()
        report({
            startTime: now,
            duration: now - startTime,
            type: 'behavior',
            subType: 'page-access-height',
            pageURL: getPageURL(),
            value: toPercent((scrollTop + viewportHeight) / pageHeight),
            uuid: getUUID(),
        }, true)
    })

    // 頁面載入完成後初始化記錄當前訪問高度、時間
    executeAfterLoad(() => {
        startTime = performance.now()
        pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        viewportHeight = window.innerHeight
    })
}

function onScroll() {
    clearTimeout(timer)
    const now = performance.now()
    
    if (!hasReport) {
        hasReport = true
        lazyReportCache({
            startTime: now,
            duration: now - startTime,
            type: 'behavior',
            subType: 'page-access-height',
            pageURL: getPageURL(),
            value: toPercent((scrollTop + viewportHeight) / pageHeight),
            uuid: getUUID(),
        })
    }

    timer = setTimeout(() => {
        hasReport = false
        startTime = now
        pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        viewportHeight = window.innerHeight        
    }, 500)
}

function toPercent(val) {
    if (val >= 1) return '100%'
    return (val * 100).toFixed(2) + '%'
}

使用者點選

利用 addEventListener() 監聽 mousedown、touchstart 事件，我們可以收集使用者每一次點選區域的大小，點選座標在整個頁面中的具體位置，點選元素的內容等資訊。

export default function onClick() {
    ['mousedown', 'touchstart'].forEach(eventType => {
        let timer
        window.addEventListener(eventType, event => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                const target = event.target
                const { top, left } = target.getBoundingClientRect()
                
                lazyReportCache({
                    top,
                    left,
                    eventType,
                    pageHeight: document.documentElement.scrollHeight || document.body.scrollHeight,
                    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
                    type: 'behavior',
                    subType: 'click',
                    target: target.tagName,
                    paths: event.path?.map(item => item.tagName).filter(Boolean),
                    startTime: event.timeStamp,
                    pageURL: getPageURL(),
                    outerHTML: target.outerHTML,
                    innerHTML: target.innerHTML,
                    width: target.offsetWidth,
                    height: target.offsetHeight,
                    viewport: {
                        width: window.innerWidth,
                        height: window.innerHeight,
                    },
                    uuid: getUUID(),
                })
            }, 500)
        })
    })
}

頁面跳轉

利用 addEventListener() 監聽 popstate、hashchange 頁面跳轉事件。需要注意的是呼叫history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如使用者點選瀏覽器的回退按鈕（或者在Javascript程式碼中呼叫history.back()或者history.forward()方法）。同理，hashchange 也一樣。

export default function pageChange() {
    let from = ''
    window.addEventListener('popstate', () => {
        const to = getPageURL()

        lazyReportCache({
            from,
            to,
            type: 'behavior',
            subType: 'popstate',
            startTime: performance.now(),
            uuid: getUUID(),
        })

        from = to
    }, true)

    let oldURL = ''
    window.addEventListener('hashchange', event => {
        const newURL = event.newURL

        lazyReportCache({
            from: oldURL,
            to: newURL,
            type: 'behavior',
            subType: 'hashchange',
            startTime: performance.now(),
            uuid: getUUID(),
        })

        oldURL = newURL
    }, true)
}

Vue 路由變更

Vue 可以利用 router.beforeEach 鉤子進行路由變更的監聽。

export default function onVueRouter(router) {
    router.beforeEach((to, from, next) => {
        // 首次載入頁面不用統計
        if (!from.name) {
            return next()
        }

        const data = {
            params: to.params,
            query: to.query,
        }

        lazyReportCache({
            data,
            name: to.name || to.path,
            type: 'behavior',
            subType: ['vue-router-change', 'pv'],
            startTime: performance.now(),
            from: from.fullPath,
            to: to.fullPath,
            uuid: getUUID(),
        })

        next()
    })
}

資料上報

上報方法

資料上報可以使用以下幾種方式：

• sendBeacon
• XMLHttpRequest
• image

我寫的簡易 SDK 採用的是第一、第二種方式相結合的方式進行上報。利用 sendBeacon 來進行上報的優勢非常明顯。

使用 sendBeacon() 方法會使使用者代理在有機會時非同步地向伺服器傳送資料，同時不會延遲頁面的解除安裝或影響下一導航的載入效能。這就解決了提交分析資料時的所有的問題：資料可靠，傳輸非同步並且不會影響下一頁面的載入。

在不支援 sendBeacon 的瀏覽器下我們可以使用 XMLHttpRequest 來進行上報。一個 HTTP 請求包含傳送和接收兩個步驟。其實對於上報來說，我們只要確保能發出去就可以了。也就是傳送成功了就行，接不接收響應無所謂。為此，我做了個實驗，在 beforeunload 用 XMLHttpRequest 傳送了 30kb 的資料（一般的待上報資料很少會有這麼大），換了不同的瀏覽器，都可以成功發出去。當然，這和硬體效能、網路狀態也是有關聯的。

上報時機

上報時機有三種：

1. 採用 requestIdleCallback/setTimeout 延時上報。
2. 在 beforeunload 回撥函式裡上報。
3. 快取上報資料，達到一定數量後再上報。

建議將三種方式結合一起上報：

1. 先快取上報資料，快取到一定數量後，利用 requestIdleCallback/setTimeout 延時上報。
2. 在頁面離開時統一將未上報的資料進行上報。

總結

僅看理論知識是比較難以理解的，為此我結合本文所講的技術要點寫了一個簡單的監控 SDK，可以用它來寫一些簡單的 DEMO，幫助加深理解。再結合本文一起閱讀，效果更好。

參考資料

效能監控

• Performance API
• PerformanceResourceTiming
• Using_the_Resource_Timing_API
• PerformanceTiming
• Metrics
• evolving-cls
• custom-metrics
• web-vitals
• PerformanceObserver
• Element_timing_API
• PerformanceEventTiming
• Timing-Allow-Origin
• bfcache
• MutationObserver
• XMLHttpRequest
• 如何監控網頁的卡頓
• sendBeacon

錯誤監控

• noerror
• source-map

行為監控

• popstate
• hashchange