K60 Pro官方停產(chǎn) 第三方瞬間漲價(jià)
雖然沒有官方宣布，但Redmi的一些高管也已經(jīng)透露了，Redmi K60 Pro已經(jīng)停產(chǎn)且不會補(bǔ)貨，這一切都是為了即將到來的K60 Ultra鋪路，屬于廠家的正常操作。但有意思的是該機(jī)在停產(chǎn)之后
前端監(jiān)控的范圍很廣，如監(jiān)控性能，監(jiān)控異常，監(jiān)控告警等一系列的維度來確保我們的頁面和功能是正常的，在出現(xiàn)問題時(shí)研發(fā)可以及時(shí)做出響應(yīng)，及時(shí)追蹤，定位問題。
圖片
總體來說性能監(jiān)控是做的比較大的，而且監(jiān)控對提高頁面的秒開是有實(shí)際優(yōu)化指導(dǎo)意義的，離線包、預(yù)請求等都是優(yōu)化手段。
圖片
這些錯(cuò)誤類的信息不一定是我們都需要關(guān)注的，有些疑難雜癥，但是有不影響頁面展示和功能的報(bào)錯(cuò)，也是可以忽略的，要知道不是所有的錯(cuò)誤都能被解決的，這個(gè)時(shí)候我們可以只關(guān)注那些影響我們頁面核心功能的部分，針對這部分做一個(gè)告警配置，例如：
圖片
針對告警信息，再進(jìn)一步對錯(cuò)誤進(jìn)行分析，找到能解決的問題，達(dá)到對頁面穩(wěn)定性的把控。
圖片
資源加載成功之后頁面渲染繼續(xù)運(yùn)行。
這些階段都有報(bào)錯(cuò)的可能，而前端要做的就是監(jiān)控后面這階段：資源加載和頁面交互。
做前端監(jiān)控也有很多其他好處， 例如：
前端監(jiān)控是很有必要的，通過監(jiān)控，我們能在線上應(yīng)用異常時(shí)，第一時(shí)間收到反饋，并及時(shí)止損。對業(yè)務(wù)的發(fā)展是有正向作用的。
錯(cuò)誤監(jiān)控包括 JavaScript 代碼錯(cuò)誤、Promsie 錯(cuò)誤、接口（XHR，F(xiàn)etch）錯(cuò)誤、資源加載錯(cuò)誤（Script，Link等）等，這些錯(cuò)誤大多會導(dǎo)致頁面功能異常甚至白屏。
性能監(jiān)控包括頁面的加載時(shí)間、接口響應(yīng)時(shí)間等，側(cè)面反應(yīng)了用戶體驗(yàn)的好壞。
代碼埋點(diǎn)，就是項(xiàng)目中引入埋點(diǎn) SDK，手動在業(yè)務(wù)代碼中標(biāo)記，觸發(fā)埋點(diǎn)事件進(jìn)行上報(bào)。比如頁面中的某一個(gè)模塊的點(diǎn)擊事件，會在點(diǎn)擊事件的監(jiān)聽中加入觸發(fā)埋點(diǎn)的代碼 this.$track('事件名', { 需要上傳的業(yè)務(wù)數(shù)據(jù) })，將數(shù)據(jù)上報(bào)到服務(wù)器端。
這個(gè)方案也是我們實(shí)際項(xiàng)目中現(xiàn)有的方案。
通過可視化交互的手段，代替代碼埋點(diǎn)，可以新建、編輯、修改埋點(diǎn)。在組件和頁面的維度進(jìn)行埋點(diǎn)的設(shè)計(jì)。
將業(yè)務(wù)代碼和埋點(diǎn)代碼分離，提供一個(gè)可視化交互的頁面，輸入為業(yè)務(wù)代碼，通過這個(gè)可視化系統(tǒng)，可以在業(yè)務(wù)代碼中自定義的增加埋點(diǎn)事件，最后輸出的代碼耦合了業(yè)務(wù)代碼和埋點(diǎn)代碼。
這個(gè)方案是可以解決第一種代碼埋點(diǎn)的痛點(diǎn)，也是我們目前正準(zhǔn)備做的方案。
前端的任意一個(gè)事件都被綁定一個(gè)標(biāo)識，所有的事件都被記錄下來，通過定期上傳記錄文件，配合文件解析，解析出來我們想要的數(shù)據(jù)，并生成可視化報(bào)告。
無痕埋點(diǎn)的優(yōu)點(diǎn)是采集全量數(shù)據(jù)，不會出現(xiàn)漏埋和誤埋等現(xiàn)象。缺點(diǎn)是給數(shù)據(jù)傳輸和服務(wù)器增加壓力，也無法靈活定制數(shù)據(jù)結(jié)構(gòu)。針對業(yè)務(wù)數(shù)據(jù)的準(zhǔn)確性不高。
前端的埋點(diǎn)上報(bào)需要存儲起來，這個(gè)可以使用阿里云的日志服務(wù)，不需要投入開發(fā)就可以采集。
新建一個(gè)項(xiàng)目比如：xxx-monitor
新建一個(gè)存儲日志，根據(jù)阿里云的要求發(fā)起請求，攜帶需要上報(bào)的數(shù)據(jù)：
http://${project}.${host}/logstores/${logStore}/track
圖片
代碼中調(diào)用 Track 上報(bào)日志：
日志的上報(bào)可以封裝成公共的調(diào)用方式， monitor/utils/里面放所有的工具方法；
tracker.js 的實(shí)現(xiàn)就是按照阿里云的上報(bào)格式發(fā)送請求，并帶上處理好的需要上報(bào)的業(yè)務(wù)數(shù)據(jù)即可，下面的都是固定的，在日志服務(wù)建好：
圖片
實(shí)現(xiàn)一個(gè) Tracker 類導(dǎo)出類的實(shí)例即可，這樣在監(jiān)控的核心代碼中直接調(diào)用 tracker.send(data)，核心實(shí)現(xiàn)代碼如下：
// monitor/utils/get/track.js...class SendTrackLoger { constructor() { this.url = `http://${project}.${host}/logstores/${logStore}/track` this.xhr = new XMLHttpRequest() } send(data = {}, callback) { const logData = {...logData} for(let key in logs) { if (typeof logs[key] === 'number') { logs[key] = `${logs[key]}` // 這是阿里云的要求，字段不能是數(shù)字類型 } } let body = JSON.stringify({ __logs__: [logs] }) this.xhr.open('POST', this.url, true) this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8') this.xhr.setRequestHeader('x-log-apiversion', '0.6.0') this.xhr.setRequestHeader('x-log-bodyrawsize', body.length) this.xhr.onload = function() { if (this.status >= 200 && this.status <= 300 || this.status === 304) { callback && callback() } } this.xhr.onerror = function(error) { console.log(error) } this.xhr.send(body) }}export default new SendTrackLoger()這里展示的是自定義要上報(bào)的數(shù)據(jù)字段：
圖片
前端需要監(jiān)控的錯(cuò)誤有兩類：
新建一個(gè) fronend-monitor 項(xiàng)目，這個(gè)項(xiàng)目就相當(dāng)于我們的工程項(xiàng)目，監(jiān)控的核心實(shí)現(xiàn)可以寫到項(xiàng)目里面，也可以抽成 SDK 的形式 Import 引入進(jìn)來，這里先寫到項(xiàng)目中。
webpack.config.js 用來打包項(xiàng)目，做接口數(shù)據(jù) Mock，測試 XHR 請求監(jiān)控接口錯(cuò)誤等。
const path = require('path')const HtmlWebpackPlugin = xxxmodule.exports = { mode: 'development', context: process.cwd(), entry:'./src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'monitor.js' }, devServer: { contentBase: path.resolve(__dirname, 'dist'), before(router) { router.get('/success', function(req, res) { res.json({ id: 1 }) }) router.post('/error', function(req, res) { res.sendStatus(500) }) }, }, module: {}, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', inject: "head" }) ]}新建一個(gè) src/index.html 在這個(gè)里面寫一些問題代碼，然后測試監(jiān)控的錯(cuò)誤捕獲。
// src/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cnotallow="width=device-width, initial-scale=1.0"> <title>monitor</title></head><body> <input id="jsErrorBtn" type="button" value="js 代碼錯(cuò)誤" notallow="btnClick()" /> <input id="promiseErrorBtn" type="button" value="promise 錯(cuò)誤" notallow="promiseClick()" /> <input id="successBtn" type="button" value="成功 ajax 請求" notallow="successAjax()" /> <input id="errorBtn" type="button" value="失敗 ajax 請求" notallow="errorAjax()" /> <script> function btnClick() { window.goods.type = 2 } function promiseClick() { new Promise((resolve, reject) => { resolve(1) }, () => { console.log(123) }) } function successAjax() { var xhr = new XMLHttpRequest() xhr.open('GET', '/success', true) xhr.responseType = 'json' xhr.onload = function () { console.log(xhr.response) } xhr.send() } function errorAjax() { var xhr = new XMLHttpRequest() xhr.open('POST', '/error', true) xhr.responseType = 'json' xhr.onload = function() { console.log(xhr.response) } xhr.onerror = function(err) { console.log(err) } xhr.send('name=123') }</script></body></html>Javascript 錯(cuò)誤分為 2 種：語法錯(cuò)誤，資源家加載錯(cuò)誤，這些錯(cuò)誤都會被 window.addEventListener('error', function(event) {})捕獲，來判斷是否是資源加載錯(cuò)誤。
window.addEventListener('error', function(event) { // 如果 target 是script link 等資源 if (event.target && (event.target.src || event.target.href)) { const element = getElement(event.target || event.path) tracker.send({ ... title: document.title, url: location.href, timestamp: event.timeStamp, userAgent: navigator.userAgent, type: 'resourceError', ... }) } else { tracker.send({ ... title: document.title, url: location.href, timestamp: event.timeStamp, userAgent: navigator.userAgent, type: 'jsError', ... }) } }, true)代碼中未被捕獲的 Promise 錯(cuò)誤，要監(jiān)聽 unhandledrejection 事件 window.addEventListener('unhandledrejection', function(event) {})。
// 監(jiān)聽未捕獲的 promise 錯(cuò)誤 window.addEventListener('unhandledrejection', function(event) { // PromiseRejectionEvent let message = '' let stack = '' const reason = event.reason let filename = '' let lineno = '' let colno = '' if (reason) { message = reason.message stack = reason.stack const match = stack.match(//s+at/s+(.+):(/d+):(/d+).+/) filename = match[1] lineno = match[2] colno = match[3] } tracker.send({ ... title: document.title, url: location.href, timestamp: event.timeStamp, userAgent: navigator.userAgent, type: 'promiseError', ... }) }, true)接口異常上報(bào)主要是攔截請求，攔截 XMLHttpRequest 對象，改寫 XHR 的 Open 和 Send 方法，將需要上報(bào)的數(shù)據(jù)發(fā)到阿里云存儲，監(jiān)聽 Load，Error，Abort 事件，上報(bào)數(shù)據(jù)：
// src/monitor/lib/xhr.jsimport tracker from '../utils/tracker'export default function injectXHR() { // 獲取 window 上的 XMLHttpRequest 對象 const XMLHttpRequest = window.XMLHttpRequest // 保存舊的open, send函數(shù) const prevOpen = XMLHttpRequest.prototype.open const prevSend = XMLHttpRequest.prototype.send // 不可使用箭頭函數(shù)，不然會找不到 this 實(shí)例 XMLHttpRequest.prototype.open = function (method, url, async, username, password) { // 重寫open，攔截請求 // 不攔截 track 本身以及 socket, 直接放行 if (!url.match(/logstores/) && !url.match(/sockjs/)) { this.logData = { method, url, async, username, password } } return prevOpen.apply(this, arguments) } XMLHttpRequest.prototype.send = function (body) { // 重寫 send，攔截有 logData 的請求，獲取 body 參數(shù) if (this.logData) { this.logData.body = body let startTime = Date.now() function handler(type) { return function (event) { // event: ProgressEvent let duration = Date.now() - startTime let status = this.status let statusText = this.statusText console.log(event) tracker.send({ type: 'xhr', eventType: type, pathname: this.logData.url, status: `${status} ${statusText}`, duration: `${duration}`, // 接口響應(yīng)時(shí)長 response: this.response ? JSON.stringify(this.response) : '', params: body || '', }) } } this.addEventListener('load', handler('load'), false) this.addEventListener('error', handler('error'), false) this.addEventListener('abort', handler('abort'), false) } return prevSend.apply(this, arguments) }}白屏就是頁面上什么東西也沒有，在頁面加載完成之后，如果頁面上的空白點(diǎn)很多，就說明頁面是白屏的，需要上報(bào)，這個(gè)上報(bào)的時(shí)機(jī)是：document.readyState === 'complete' 表示文檔和所有的子資源已完成加載，表示load（window.addEventListener('load'）狀態(tài)事件即將被觸發(fā)。
document.readyState 有三個(gè)值：loading（document正在加載），interactive（可交互，表示正在加載的狀態(tài)結(jié)束，但是圖像，樣式和框架之類的子資源仍在加載），complete 就是完成，所以監(jiān)控白屏需要在文檔都加載完成的情況下觸發(fā)。
// src/monitor/utils/onload.jsexport function onload(callback) { if (document.readyState === 'complete') { callback() } else { window.addEventListener('onload', callback) }}監(jiān)控白屏的思路主要是：可以將可視區(qū)域中心點(diǎn)作為坐標(biāo)軸的中心，在X、Y軸上各分 10 個(gè)點(diǎn)，找出這個(gè) 20 個(gè)坐標(biāo)點(diǎn)上最上層的 DOM 元素，如過這些元素是包裹元素，空白點(diǎn)數(shù)就加一，包裹元素可以自定義比如 Html Body App Root Container Content 等，空白點(diǎn)數(shù)大于 0 就上報(bào)白屏日志。
export default function computedBlankScreen() { // 包裹玉元素列表 const wrapperSelectors = ['body', 'html', '#root', '#App'] // 空白節(jié)點(diǎn)的個(gè)數(shù) let emptyPoints = 0 // 判斷20個(gè)點(diǎn)處的元素是否是包裹元素 function isWrapper(element) { const selector = getSelector(element) console.log(selector) if (wrapperSelectors.indexOf(selector) >= 0) { // 表示是在包裹元素里面，空白點(diǎn)就要加一 emptyPoints++ } } onload(function() { let xElements, yElements for (let i = 0; i <=9; i++) { xElements = document.elementFromPoint(window.innerWidth * i / 10, window.innerHeight / 2) yElements = document.elementFromPoint(window.innerHeight * i / 10, window.innerWidth / 2) // document.elementFromPoint 返回的是某一個(gè)坐標(biāo)點(diǎn)的由到外的html元素的集合 isWrapper(xElements[0]) isWrapper(yElements[0]) } if (emptyPoints >= 0) { let centerPoint = document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2) tracker.send() } })}用戶交互的響應(yīng)時(shí)間如果大于某一個(gè)時(shí)間，用戶就會感覺卡頓。可以定一個(gè)時(shí)間比如 100 毫秒，就代表響應(yīng)時(shí)間長，會卡頓。
PerformanceObserver 構(gòu)造函數(shù)使用給定的觀察者 Callback 生成新的PerformanceObserver 對象，當(dāng)通過 Observe() 方法注冊條目類型（需要監(jiān)控的類型）的性能條目被記錄下來時(shí)，會調(diào)用該觀察者回調(diào)。
所以可以 new PerformanceObserver 來監(jiān)控 longTask，監(jiān)控的資源加載如果超過 100 毫秒就表示卡頓，可以瀏覽器空閑（requestIdleCallback）的時(shí)候上報(bào)數(shù)據(jù)。
....export default function longTask() { new PerformanceObserver(function(list) { list.getEntries().forEach(function(entry) { if (entry.duration > 100) { // 瀏覽器空閑的時(shí)候上報(bào) requestIdleCallback(() => { tracker.send({ type: 'longTask', eventType: lastEvent.type, startTime: formatTime(entry.startTime), duration: formatTime(entry.duration), }); }); } }) }).observe({ entryTypes: ['longtask']})}PerformanceObserver.observe 方法用于觀察傳入的參數(shù)中指定的性能條目類型的集合。當(dāng)記錄一個(gè)指定類型的性能條目時(shí)，性能監(jiān)測對象的回調(diào)函數(shù)將會被調(diào)用。performance.timing 記錄了從輸入 URL 到頁面加載完成的所有的時(shí)間，從這些字段中可以提取對對頁面性能的監(jiān)控，通過分析這些指標(biāo)來優(yōu)化頁面的體驗(yàn)，比如統(tǒng)計(jì) FMP、LCP 等，具體可以查看 MDN。
navigator.connection 對象獲取網(wǎng)絡(luò)連接的信息：effectiveType（網(wǎng)絡(luò)類型），RTT（估算餓往返時(shí)間）等，還能通過監(jiān)聽 window.addEventListener('unload')事件計(jì)算用戶在頁面的停留時(shí)間。
import tracker from '../util/tracker';export function pv() { var connection = navigator.connection; tracker.send({ type: 'pv', networkType: connection.effectiveType, // 網(wǎng)絡(luò)類型 rtt: connection.rtt, // 往返時(shí)間 screen: `${window.screen.width}x${window.screen.height}` // 設(shè)備分辨率 }); let startTime = Date.now(); window.addEventListener('unload', () => { let stayTime = Date.now() - startTime; // 頁面停留時(shí)間 tracker.send({ type: 'stayTime', stayTime }); }, false);}本文鏈接：http://www.www897cc.com/showinfo-26-17850-0.html一文搞懂得物前端監(jiān)控
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號