一個完整的前端監控平台包括三個部分：數據采集與上報、數據整理和存儲、數據展示。
本文要講的就是其中的第一個環節——數據采集與上報。下圖是本文要講述內容的大綱，大家可以先大致了解一下：
僅看理論知識是比較難以理解的，為此我結合本文要講的技術要點寫了一個簡單的監控 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 一共有三種計算方式：
- 累加
- 取所有會話窗口的平均數
- 取所有會話窗口中的最大值
累加
也就是把從頁面加載開始的所有布局偏移分數加在一起。但是這種計算方式對生命周期長的頁面不友好，頁面存留時間越長，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 介紹，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()
}
代碼邏輯如下：
- 先記錄一個初始時間，然后每次觸發
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 列。除了位置信息，還可以獲取到源碼原文。
上圖就是一個代碼報錯還原后的示例。鑒於這部分內容不屬於 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 活動頁面。
除此之外還可以利用訪問深度以及停留時長來鑒別電商刷單。例如有人進來頁面后一下就把頁面拉到底部然后等待一段時間后購買，有人是慢慢的往下滾動頁面，最后再購買。雖然他們在頁面的停留時間一樣，但明顯第一個人更像是刷單的。
頁面訪問深度計算過程稍微復雜一點：
- 用戶進入頁面時，記錄當前時間、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
- XMLHttpRequest
- image
我寫的簡易 SDK 采用的是第一、第二種方式相結合的方式進行上報。利用 sendBeacon 來進行上報的優勢非常明顯。
使用
sendBeacon()方法會使用戶代理在有機會時異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了提交分析數據時的所有的問題：數據可靠，傳輸異步並且不會影響下一頁面的加載。
在不支持 sendBeacon 的瀏覽器下我們可以使用 XMLHttpRequest 來進行上報。一個 HTTP 請求包含發送和接收兩個步驟。其實對於上報來說，我們只要確保能發出去就可以了。也就是發送成功了就行，接不接收響應無所謂。為此，我做了個實驗，在 beforeunload 用 XMLHttpRequest 傳送了 30kb 的數據（一般的待上報數據很少會有這么大），換了不同的瀏覽器，都可以成功發出去。當然，這和硬件性能、網絡狀態也是有關聯的。
上報時機
上報時機有三種：
- 采用
requestIdleCallback/setTimeout延時上報。 - 在 beforeunload 回調函數里上報。
- 緩存上報數據，達到一定數量后再上報。
建議將三種方式結合一起上報：
- 先緩存上報數據，緩存到一定數量后，利用
requestIdleCallback/setTimeout延時上報。 - 在頁面離開時統一將未上報的數據進行上報。
總結
僅看理論知識是比較難以理解的，為此我結合本文所講的技術要點寫了一個簡單的監控 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