前端工程化入門06 - 前端監控

什麼時候需要監控#

當你的應用頻繁報錯找不到原因的時候。
需要分析用戶興趣愛好、購買習慣。
需要優化程序的時候，可以做監控收集數據，做針對性的優化。
需要保證服務可靠性穩定性。

如果你的應用符合以上任意一條，就可以對應用實行監控了。監控的作用有兩個：事前預警和事後分析。

事前預警：提前設置一個閾值，當監控的數據達到閾值時，通過短信或者郵件通知管理員。例如 API 請求數量突然間暴漲，就得進行報警，否則可能會造成伺服器宕機。

事後分析：通過監控日誌文件，分析故障原因和故障發生點。從而做出修改，防止這種情況再次發生。

本章內容分為前端監控原理分析和如何對項目實行監控兩個部分。第一部分是講如何寫一個簡易的監控 SDK，第二部分是講如何使用 sentry 實現項目監控。

好了，下面讓我們開始進入正文吧。

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

性能數據採集#

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 一共有三種計算方式：

累加
取所有會話窗口的平均數
取所有會話窗口中的最大值

累加#

也就是把從頁面加載開始的所有佈局偏移分數加在一起。但是這種計算方式對生命週期長的頁面不友好，頁面存留時間越長，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 元素屬性發生變化時會觸發事件。

首屏渲染時間計算過程：

利用 MutationObserver 監聽 document 對象，每當 DOM 元素屬性發生變更時，觸發事件。
判斷該 DOM 元素是否在首屏內，如果在，則在 requestAnimationFrame() 回調函數中調用 performance.now() 獲取當前時間，作為它的繪製時間。
將最後一個 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
}

優化#

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

什麼時候上報渲染時間？
如果兼容異步添加 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 介紹，firefox 和 safari 一直支持 bfc，chrome 只有在高版本的移動端瀏覽器支持。但我試了一下，只有 safari 瀏覽器支持，可能我的 firefox 版本不對。

但是 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()
}

代碼邏輯如下：

先記錄一個初始時間，然後每次觸發 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)
            })
        },
    })
}

代碼邏輯如下：

監聽路由鉤子，在路由切換時會觸發 router.beforeEach() 鉤子，在該鉤子的回調函數裡將當前時間記為渲染開始時間。
利用 Vue.mixin() 對所有組件的 mounted() 注入一個函數。每個函數都執行一個防抖函數。
當最後一個組件的 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 列。除了位置信息，還可以獲取到源碼原文。

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 活動頁面。

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

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

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

具體代碼請看：

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 來進行上報的優勢非常明顯。

使用 sendBeacon () 方法會使用戶代理在有機會時異步地向伺服器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了提交分析數據時的所有問題：數據可靠，傳輸異步並且不會影響下一頁面的加載。

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

上報時機#

上報時機有三種：

采用 requestIdleCallback/setTimeout 延時上報。
在 beforeunload() 回調函數裡上報。
緩存上報數據，達到一定數量後再上報。

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

先緩存上報數據，緩存到一定數量後，利用 requestIdleCallback/setTimeout 延時上報。
在頁面離開時統一將未上報的數據進行上報。

前端監控部署#

前面說的都是監控原理，但要實現還得自己動手寫代碼。為了避免麻煩，我們可以用現有的工具 sentry 去做這件事。

sentry 是一個用 python 寫的性能和錯誤監控工具，你可以使用 sentry 提供的服務（免費功能少），也可以自己部署服務。現在來看一下如何使用 sentry 提供的服務實現監控。

小結#

隨著 web 技術的發展，現在前端項目的規模也越來越大。在監控系統的幫助下，我們可以更加清楚的了解項目的運行情況，根據採集到的錯誤數據和性能數據對項目做針對性的優化。