前端出現(xiàn)異常的時(shí)候，前端程序員如何快速甩鍋？特別是前端程序員發(fā)現(xiàn)前端報(bào)錯(cuò)的原因是接口報(bào)錯(cuò)，這時(shí)候如何把這個(gè)前端報(bào)錯(cuò)的問題優(yōu)雅的甩給后端程序員?？赡苡行┣岸顺绦騿T會(huì)認(rèn)為接口的報(bào)錯(cuò)應(yīng)該由后臺(tái)來關(guān)注，統(tǒng)計(jì)，并修復(fù)。確實(shí)如此，而且后臺(tái)服務(wù)有了很多成熟完善的統(tǒng)計(jì)工具，完全能夠應(yīng)對(duì)大部分的異常情況，那么為什么還需要前端來解決接口問題呢。原因很簡(jiǎn)單，因?yàn)榍岸耸莃ug的重要發(fā)現(xiàn)位置，報(bào)錯(cuò)發(fā)生時(shí)肯定會(huì)先找到前端程序員來解決，那么在前端幫后臺(tái)背鍋之前怎么快速優(yōu)雅的"甩鍋"呢？大家有沒有想過，如果前端程序員都對(duì)自己的項(xiàng)目做了系統(tǒng)的監(jiān)控、報(bào)錯(cuò)都能實(shí)時(shí)反饋展示，就不用擔(dān)心甩鍋的問題了。webfunny前端監(jiān)控工具，就是...

webfunny前端監(jiān)控項(xiàng)目可實(shí)現(xiàn)：七、分析用戶的場(chǎng)外信息當(dāng)用戶所有的行為都被前端開發(fā)者掌握之后，前端能夠復(fù)現(xiàn)出用戶的行為，甚至能夠復(fù)現(xiàn)出用戶的問題，也許還需要一些場(chǎng)外信息才能準(zhǔn)確定位問題，比如，用戶的機(jī)型，地理位置，系統(tǒng)版本，當(dāng)時(shí)的網(wǎng)絡(luò)環(huán)境（這個(gè)不準(zhǔn)確，我做webfunny前端項(xiàng)目場(chǎng)景測(cè)試時(shí)，是依據(jù)用戶當(dāng)時(shí)初次加載頁面的時(shí)間來判斷，只能作為參考依據(jù)）前端線上問題產(chǎn)生的原因五花八門，只有把日志做全了，才能夠準(zhǔn)確的定位和解決前端問題、作好前端項(xiàng)目的監(jiān)控。這是webfunny前端監(jiān)控項(xiàng)目開發(fā)者排查線上問題的經(jīng)驗(yàn)和實(shí)戰(zhàn)，分享給所有的前端工程師們參考，當(dāng)然理論有了，作為前端開發(fā)技術(shù)同學(xué)還是實(shí)操效果更好...

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇二、利用多個(gè)維度來準(zhǔn)確定位到具體的用戶上面提到了用戶的userId獲取速度可能比較慢，或者根本不會(huì)有，那我們?cè)撛趺慈グ延脩舻男袨橛涗洸槌鰜砟?。其?shí)，我們可以通過用戶行為產(chǎn)生的時(shí)間，用戶的ip地址，地理位置以及訪問設(shè)備等信息的佐證，來找到具體的用戶，在webfunny前端監(jiān)控系統(tǒng)里，這塊兒會(huì)詳細(xì)展示出來。前端程序員通過其他維度的信息，可以鎖定一些用戶，即使在沒有userId的情況下，我們依然可以通過內(nèi)置ID查到用戶的行為記錄，幫助我們排查問題。其中如何通過IP地址查詢地理位置，建議前端程序員可以使用node-ip2region這個(gè)庫進(jìn)行查詢，挺好用的。webfu...

提到監(jiān)控系統(tǒng)，大部分開發(fā)人員首先想到的是后端監(jiān)控。很明顯，比如檢測(cè)服務(wù)器性能，數(shù)據(jù)庫性能，API的訪問流量，以及各種服務(wù)的運(yùn)行情況等等，都與后端息息相關(guān)。而前端更多承擔(dān)的是UI展現(xiàn)的角色，主要關(guān)注頁面怎么排版設(shè)計(jì)，好像沒什么需要監(jiān)測(cè)的地方，因此一直以來都沒有涉及到監(jiān)控的概念。 于是呢大家就一致認(rèn)為：只要后端穩(wěn)定可控，應(yīng)用就是穩(wěn)定可控的，可實(shí)際情況前端監(jiān)控的重要性不亞于后端?，F(xiàn)在的前端監(jiān)控并不僅是監(jiān)控異常數(shù)據(jù)，任何有利于產(chǎn)品分析的數(shù)據(jù)都可以加入監(jiān)控。所以我認(rèn)為前端監(jiān)控，就是指采集用戶使用系統(tǒng)過程中產(chǎn)生的關(guān)鍵數(shù)據(jù)，存儲(chǔ)到數(shù)據(jù)庫，后續(xù)可以查找和分析，這樣的整套實(shí)現(xiàn)就被稱為前端監(jiān)控系統(tǒng)。 w...

前端監(jiān)控通常情況下監(jiān)控的內(nèi)容可以分為三類：第二，用戶行為。用戶行為大體上可以理解為，誰，在什么時(shí)間，做了哪些操作。比如，用戶，登錄了什么應(yīng)用，應(yīng)用的版本是什么，應(yīng)用所在的平臺(tái)信息，頁面的訪問情況，停留時(shí)長(zhǎng)等。第三，應(yīng)用的性能。應(yīng)用的性能指的是，比如頁面加載時(shí)長(zhǎng)，接口請(qǐng)求時(shí)長(zhǎng)，資源大小等等。 以哪種方式進(jìn)行監(jiān)控監(jiān)控方式，其實(shí)指的就是我們平常說的埋點(diǎn)方式。通常情況分為自動(dòng)埋點(diǎn)，和手動(dòng)埋點(diǎn)。 自動(dòng)埋點(diǎn)的實(shí)現(xiàn)方式稍微復(fù)雜一些，需要我們?nèi)ack很多內(nèi)容。比如需要重寫XHR對(duì)象，或者以一種更優(yōu)雅的方式實(shí)現(xiàn)fetch等。而手動(dòng)埋點(diǎn)則是我們直接在業(yè)務(wù)代碼中需要監(jiān)控的地方，直接調(diào)用接口上報(bào)所需...

搭建前端監(jiān)控系統(tǒng)（六）之接口性能分析篇，如何監(jiān)控前端接口的性能。二、單個(gè)接口分析很多時(shí)候，前端出現(xiàn)接口問題的肯定某一個(gè)接口出現(xiàn)異常，如果是大面積異常，前端同學(xué)的電話肯定被老板打爆了，也不需要監(jiān)控了。那么針對(duì)單個(gè)接口我們應(yīng)該分析哪些指標(biāo)呢？超時(shí)接口數(shù)量、單個(gè)接口的平均耗時(shí)、影響用戶數(shù)量、發(fā)生頁面?zhèn)€數(shù)、可以準(zhǔn)確定位到某個(gè)小時(shí)和某一分鐘發(fā)生的情況。三、分析報(bào)警分析報(bào)警可以分為多個(gè)指標(biāo)：超時(shí)接口數(shù)量、超時(shí)接口占比（百分比），影響用戶數(shù)量。隨著工作的不斷深入，前端工程師應(yīng)該走出舒適圈，關(guān)注更多維度的指標(biāo)，不能再局限在狹義的前端后端了。webfunny前端監(jiān)控系統(tǒng)，自定義埋點(diǎn)功能，更加靈活的自定義埋點(diǎn)，滿...

前端出現(xiàn)異常報(bào)錯(cuò)的時(shí)候，有前端幫后臺(tái)背鍋之前怎么快速優(yōu)雅的"甩鍋"？在做前端程序員的時(shí)候，我之前所在的公司后臺(tái)可是有著完善的監(jiān)控系統(tǒng)，他們都覺得自己的代碼和監(jiān)控都做得非常完善，但是前端的我做了監(jiān)控結(jié)果后來看，事實(shí)并非如此。當(dāng)然，你也許會(huì)說這是開發(fā)和測(cè)試不專業(yè)，這么明顯的問題都沒有發(fā)現(xiàn)，但是，我只能用一句話來解釋：人非圣賢。與其追究是誰的責(zé)任，不如想辦法解決問題。將線上的損失減少到較低的影響。如果作為前端你對(duì)項(xiàng)目做了監(jiān)控，并且能實(shí)時(shí)監(jiān)控到，出現(xiàn)問題的時(shí)候把報(bào)錯(cuò)截圖發(fā)給后臺(tái)小伙伴，你還需要跟他們爭(zhēng)論是誰的鍋嗎？當(dāng)然，如果是前端程序員自己的鍋，那還是趕緊偷偷修改掉吧，在建立webfunny前端監(jiān)控時(shí)...

如何解決前端線上問題？如果你是一位前端工程師，那你一定不止一次去解決一些頑固的線上問題，你也曾想方設(shè)法復(fù)現(xiàn)用戶的bug，結(jié)果可能都不太理想。怎樣定位前端線上問題，一直以來，都是很頭疼的問題，因?yàn)樗l(fā)生于用戶的一系列操作之后。錯(cuò)誤的原因可能源于機(jī)型，網(wǎng)絡(luò)環(huán)境，復(fù)雜的操作行為等等，在我們想要去解決的時(shí)候很難復(fù)現(xiàn)出來，自然也就無法解決。身為一名前端工程師，我每天都要面臨很多線上的問題，一時(shí)間讓我焦頭爛額。雖然公司也有其他的監(jiān)控系統(tǒng)，但是每次解決問題都需要輾轉(zhuǎn)于各種監(jiān)控系統(tǒng)之間，亦是疲憊不堪。所以，一怒之下，基于自己在前端線上監(jiān)控工作時(shí)的這些痛點(diǎn)，我便為自己（前端工程師）量身定做了這樣一款監(jiān)控系統(tǒng)：w...

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇三、用戶細(xì)查具體要分析哪些數(shù)據(jù)，更容易幫助我們定位前端問題呢首先是用戶基本信息，既然是查詢用戶的行為記錄，那么用戶的基本信息肯定是必不可少。正常情況下，我們需要知道用戶的標(biāo)簽、使用設(shè)備型號(hào)、系統(tǒng)版本、IP地址、所在地區(qū)、瀏覽器useragent等；詳細(xì)的信息展示可以通過webfunny前端監(jiān)控系統(tǒng)進(jìn)行demo實(shí)操查看。其次是頁面平均加載時(shí)間，這里可能有人會(huì)問了，既然是用戶行為記錄查詢，為什么又需要查看頁面平均加載時(shí)間呢？如大家所知，造成一個(gè)用戶在我們的應(yīng)用上不可用的情況，有很多種原因，其中網(wǎng)絡(luò)速度是不可以忽略的因素。所以通過頁面的平均加載時(shí)間我們可以判斷用戶當(dāng)...

webfunny前端監(jiān)控項(xiàng)目可實(shí)現(xiàn)：一、統(tǒng)計(jì)前端錯(cuò)誤眾所周知，我們有辦法去統(tǒng)計(jì)前端的錯(cuò)誤，那就是大名鼎鼎的，，以及一些額外的信息。將，就能統(tǒng)計(jì)出每天的錯(cuò)誤量，每個(gè)小時(shí)的錯(cuò)誤量，每天的錯(cuò)誤率變化，來鑒定我們前端線上環(huán)境是否健康。我們按照J(rèn)S錯(cuò)誤數(shù)量進(jìn)行分類排序，按照頁面進(jìn)行錯(cuò)誤分類。通過上邊的數(shù)據(jù)分析，我們能夠清晰地觀察到線上項(xiàng)目的報(bào)錯(cuò)情況。二、分析錯(cuò)誤詳情前端線上的錯(cuò)誤日志統(tǒng)計(jì)出來后，通過webfunny前端監(jiān)控項(xiàng)目可以解析這些錯(cuò)誤日志，解析出用戶的機(jī)型，版本，系統(tǒng)平臺(tái)，影響范圍，以及具體的錯(cuò)誤位置，從而提高前端開發(fā)者解決問題的效率。webfunny前端監(jiān)控系統(tǒng)，數(shù)據(jù)概覽功能可以：實(shí)時(shí)掌握項(xiàng)目...

現(xiàn)有的大部分監(jiān)控方案都是針對(duì)服務(wù)端的，而針對(duì)前端的監(jiān)控很少，諸如線上頁面的白屏?xí)r間是多少、靜態(tài)資源的加載情況如何、接口請(qǐng)求耗時(shí)好久、什么時(shí)候掛掉了、為什么掛掉，這些都不清楚。同時(shí)，在產(chǎn)品推廣過程中，經(jīng)常需要統(tǒng)計(jì)頁面的使用情況及用戶行為，從而可以從運(yùn)營(yíng)和產(chǎn)品的角度去了解用戶群體，進(jìn)而迭代升級(jí)產(chǎn)品，使其更加貼近用戶，為業(yè)務(wù)的擴(kuò)展提供更多可能性。因而，我們需要一個(gè)前端的頁面監(jiān)控系統(tǒng)，持續(xù)監(jiān)控和預(yù)警頁面性能的狀況，并且在發(fā)現(xiàn)瓶頸時(shí)用于指導(dǎo)優(yōu)化工作。通過監(jiān)控來對(duì)線上的流量數(shù)據(jù)、用戶量統(tǒng)計(jì)、頁面訪問趨勢(shì)、用戶活躍量趨勢(shì)等等指標(biāo)有一個(gè)清晰直觀的了解。前端監(jiān)控和js錯(cuò)誤監(jiān)控產(chǎn)品前端程序員如何明確定位、排查前端...

前端出現(xiàn)異常的時(shí)候，前端程序員如何快速甩鍋？特別是前端程序員發(fā)現(xiàn)前端報(bào)錯(cuò)的原因是網(wǎng)絡(luò)問題，雖然很多時(shí)候這種報(bào)錯(cuò)問題是由用戶的網(wǎng)絡(luò)問題導(dǎo)致的。網(wǎng)絡(luò)是跟用戶體驗(yàn)密切相關(guān)的因素，但卻是開發(fā)小伙伴無能為力的因素，因?yàn)檫@取決于用戶當(dāng)時(shí)的網(wǎng)絡(luò)環(huán)境是否良好。如果我們能夠判斷出用戶當(dāng)時(shí)的網(wǎng)絡(luò)情況，對(duì)我們排查問題也是很有幫助的。首先，網(wǎng)絡(luò)環(huán)境對(duì)頁面初次加載影響比較明顯。理論上講，前端是不方便把用戶當(dāng)時(shí)的網(wǎng)絡(luò)情況計(jì)算出來，但是我們可以側(cè)面評(píng)估出用戶當(dāng)時(shí)的網(wǎng)絡(luò)環(huán)境。雖然我們測(cè)不出來網(wǎng)速，但是我們可以計(jì)算出用戶初次加載頁面的時(shí)間，以此來評(píng)估用戶的網(wǎng)絡(luò)環(huán)境。webfunny線上調(diào)試功能，支持實(shí)時(shí)了解用戶的行為、控制臺(tái)打...

前端出現(xiàn)異常的時(shí)候，前端程序員如果發(fā)現(xiàn)是CDN報(bào)錯(cuò)的原因，這個(gè)時(shí)候?yàn)榱吮苊獬霈F(xiàn)替第三方公司背鍋，因?yàn)樽銮岸说亩贾?，這是很憋屈的一種線上Bug，還是替第三方公司背鍋。如果是第三方的東西出了問題，上面領(lǐng)導(dǎo)永遠(yuǎn)都只懷疑是你的代碼有bug，如果你沒有有力的證據(jù)，即使你已經(jīng)排查過了，領(lǐng)導(dǎo)也只會(huì)說一句“你再去好好排查一下你自己的代碼”，這時(shí)候前端可能會(huì)很委屈、有一鍵盤呼他臉上的沖動(dòng)。因?yàn)橹肮ぷ鞯臅r(shí)候出現(xiàn)過這種背鍋的事情，所以在webfunny前端監(jiān)控系統(tǒng)里加入了對(duì)靜態(tài)資源的監(jiān)控功能。前不久，阿里部分區(qū)域的出現(xiàn)了5分鐘無法訪問的情況。我們線上群里頓時(shí)就炸開了鍋，讓我趕緊排查問題。我打開了錯(cuò)誤監(jiān)控，發(fā)現(xiàn)只...

前端程序員如何明確定位、排查前端生產(chǎn)問題？比如在分析錯(cuò)誤詳情時(shí)，遇到線上用戶進(jìn)過了復(fù)雜的鏈接跳轉(zhuǎn)而發(fā)生了錯(cuò)誤；用戶調(diào)用的接口發(fā)生了異常或者超時(shí)；線上的用戶反饋異常根本就跟實(shí)際情況不符等等。這些非直觀型的問題該如何解決？這時(shí)候前端工程師就需要用戶的行為記錄。三、記錄用戶的跳轉(zhuǎn)行為（Demo）有些錯(cuò)誤是前端頁面經(jīng)過復(fù)雜的跳轉(zhuǎn)、回退之后才發(fā)生的，就算測(cè)試人員也很難測(cè)試出這種問題，因?yàn)榫€上的用戶的任何行為都有可能出現(xiàn)。往往我們知道的只是他在后面停留的頁面發(fā)生了錯(cuò)誤。如此，我們通過webfunny前端監(jiān)控系統(tǒng)來記錄下用戶的跳轉(zhuǎn)日志，就能夠復(fù)現(xiàn)出用戶的行為，從而復(fù)現(xiàn)BUG來解決。webfunny前端監(jiān)控系...

前端監(jiān)控系統(tǒng)搭建第三步之購買CA證書或者說是HTTPS證書現(xiàn)在很多網(wǎng)站都是走HTTPS安全協(xié)議，如果我們的服務(wù)器不支持安全協(xié)議，那么日志是無法被上傳到我們的服務(wù)器上的。所以我們也需要給我們的服務(wù)器配置安全證書。有多種方式獲取證書，有不收費(fèi)的，有收費(fèi)的，我的webfunny前端監(jiān)控項(xiàng)目用的是阿里云上未收費(fèi)版本一年的。PS:https證書可能也需要折騰一些時(shí)間，需要有耐心。這樣，我們的阿里云服務(wù)器部署環(huán)境就算搭建完成了，可以開始寫前端日志的監(jiān)控代碼了。webfunny前端監(jiān)控系統(tǒng)，只需簡(jiǎn)單幾步，前端程序員就可以搭建出屬于自己的項(xiàng)目應(yīng)用監(jiān)控。前端監(jiān)控和js文件加載錯(cuò)誤監(jiān)控系統(tǒng)開源 為什么要監(jiān)控頁面...

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇：用戶細(xì)查具體要分析哪些數(shù)據(jù)，更容易幫助我們定位前端問題呢說完用戶基本信息和頁面平均加載時(shí)間，下面就要來說接口耗時(shí)正態(tài)分布。接口耗時(shí)同樣能夠反饋出用戶當(dāng)時(shí)的網(wǎng)絡(luò)狀態(tài)，同時(shí)他也能反饋出服務(wù)端接口的狀態(tài)。比如，頁面平均耗時(shí)表現(xiàn)良好，接口耗時(shí)表現(xiàn)差，則能反映出，當(dāng)時(shí)的后端服務(wù)狀態(tài)不是很好。還有完整的用戶行為記錄，以上是用戶行為中的基本信息，接下來要說的是用戶的完整行為鏈路，通過將頁面訪問、接口請(qǐng)求、代碼報(bào)錯(cuò)、自定義行為等，按照時(shí)間先后順序串聯(lián)起來，可以達(dá)到復(fù)現(xiàn)用戶錯(cuò)誤的目的。其中，接口請(qǐng)求記錄，除了會(huì)記錄接口耗時(shí)，還需要記錄接口的返回值，這樣能夠更加明確的定位數(shù)據(jù)問...

webfunny_monitor到底能夠?yàn)轫?xiàng)目帶來哪些實(shí)用的能力呢？1、你可以通過它來對(duì)線上的流量數(shù)據(jù)、用戶量統(tǒng)計(jì)、頁面訪問趨勢(shì)、用戶活躍量趨勢(shì)等等指標(biāo)有一個(gè)非常清晰直觀的了解。 并且，你還可以深入分析每個(gè)用戶的行為。系統(tǒng)記錄了用戶的所有行為，為了提高查找效率，系統(tǒng)支持使用多種檢索條件進(jìn)行搜索。 2、你可以通過它來分析系統(tǒng)的健康情況包括js報(bào)錯(cuò)趨勢(shì)、自定義異常趨勢(shì)、靜態(tài)資源加載報(bào)錯(cuò)確實(shí)等等指標(biāo)。并且，你還可以清晰地看到報(bào)錯(cuò)的詳細(xì)情況，這樣可以幫助你精細(xì)化分析每個(gè)報(bào)錯(cuò)問題。 3、你可以通過它來分析系統(tǒng)的性能情況包括頁面和接口性能，加載耗時(shí)，成功率、 4、 你還可以使...

很多前端程序員都很難接觸到實(shí)踐前端埋點(diǎn)與監(jiān)控。當(dāng)然，就算有機(jī)會(huì)接觸到前端監(jiān)控的前端，一旦遇到相關(guān)問題也十分令人痛苦了。用戶在實(shí)際場(chǎng)景重的一系列操作，外加一些類似機(jī)型、網(wǎng)絡(luò)環(huán)境的問題，讓前端很難在開發(fā)環(huán)境中復(fù)現(xiàn)出來。特別是前端在沒有監(jiān)控加持的情況下，需要人為手動(dòng)解決問題，還要應(yīng)對(duì)產(chǎn)品的需求轟炸，真是太難了。作為webfunny前端監(jiān)控系統(tǒng)的開發(fā)者，我們深知做好任何一個(gè)產(chǎn)品都不會(huì)那么容易，特別是前端監(jiān)控這種技術(shù)型產(chǎn)品，webfunny前端監(jiān)控系統(tǒng)還有很多需要改進(jìn)和提升的地方，而webfunny前端監(jiān)控一直在不斷的迭代產(chǎn)品。如果你是前端工程師，對(duì)監(jiān)控有興趣，可以來webfunny官網(wǎng)試用demo,只...

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇如何監(jiān)控前端靜態(tài)資源加載情況：前端開發(fā)者可以根據(jù)報(bào)錯(cuò)是的，還是script標(biāo)簽。由于目前暫時(shí)關(guān)注對(duì)前端造成崩潰的錯(cuò)誤，所以目前只監(jiān)控了css，js文件加載錯(cuò)誤的情況。首先，前端工程師要做的實(shí)時(shí)監(jiān)控和預(yù)警，依然關(guān)聯(lián)了7天以前同一時(shí)間端的數(shù)據(jù)，如果某個(gè)時(shí)間段出現(xiàn)錯(cuò)誤量暴增，可以發(fā)出警告，及時(shí)制止。然后，前端開發(fā)者還需要知道更多詳細(xì)的信息，如資源加載報(bào)錯(cuò)、資源失敗列表等等，雖然前端線上環(huán)境并沒有給前端開發(fā)者報(bào)出這么多的問題，但是可以看到，每天還是有很多的靜態(tài)資源加載報(bào)錯(cuò)，有些是很重要的靜態(tài)資源文件，是必然會(huì)導(dǎo)致頁面渲染失敗的，所以必須要解決建立合理...

搭建前端監(jiān)控系統(tǒng)（五）消息隊(duì)列處理并發(fā)，在做webfunny前端監(jiān)控項(xiàng)目之前，作為前端程序員我能夠接觸到的關(guān)于消息隊(duì)列的應(yīng)用場(chǎng)景實(shí)在有限，所以不能介紹更復(fù)雜的內(nèi)容，大致的思維邏輯：有消息進(jìn)來，先存入消息隊(duì)列里，另一端再從隊(duì)列去取出來，完成接下來的工作。從代碼的角度來看：就是一個(gè)生產(chǎn)者和消費(fèi)者的模式，生產(chǎn)者不停的向消息隊(duì)列里生產(chǎn)消息，消費(fèi)者在有需要的時(shí)候，從消息隊(duì)列里取消息，一旦完成消費(fèi)，隊(duì)列里便移除這個(gè)消息。消息的生產(chǎn)者和消費(fèi)者互相沒有感知，生產(chǎn)者產(chǎn)生過剩的消息都存放在消息隊(duì)列里，由消費(fèi)者慢慢消耗。以此來削峰填谷，達(dá)到處理高并發(fā)的目的。通過對(duì)前端消息應(yīng)用場(chǎng)景的淺顯理解，我自己在設(shè)計(jì)webfun...

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇，如何監(jiān)控前端靜態(tài)資源加載情況：解決方案：1、通過前端監(jiān)控建立，統(tǒng)計(jì)出每天報(bào)出的量，列出每天加載報(bào)錯(cuò)的變化，點(diǎn)擊圖表的bar,可以看到每天的數(shù)據(jù)變化，以作對(duì)比。2、分析出靜態(tài)資源加載出錯(cuò)主要發(fā)生在哪些頁面上，縮小排查的范圍。3、分析出影響用戶的人數(shù)，也許很多錯(cuò)誤就發(fā)生在一個(gè)用戶身上，減少盲目排查。靜態(tài)資源加載監(jiān)控就完成了，這里還有一些細(xì)節(jié)需要處理，來幫助排查問題，前端工程師在搭建靜態(tài)資源加載前端監(jiān)控的時(shí)候，可以在深入使用時(shí)來延展。webfunny前端監(jiān)控在錯(cuò)誤分析功能上，可以看到每個(gè)報(bào)錯(cuò)的變化趨勢(shì)，繼而分析出用戶在哪步操作中發(fā)生了問題。怎們做前端監(jiān)控搭建...

搭建前端監(jiān)控系統(tǒng)（六）之接口性能分析篇，如何監(jiān)控前端接口的性能。二、單個(gè)接口分析很多時(shí)候，前端出現(xiàn)接口問題的肯定某一個(gè)接口出現(xiàn)異常，如果是大面積異常，前端同學(xué)的電話肯定被老板打爆了，也不需要監(jiān)控了。那么針對(duì)單個(gè)接口我們應(yīng)該分析哪些指標(biāo)呢？超時(shí)接口數(shù)量、單個(gè)接口的平均耗時(shí)、影響用戶數(shù)量、發(fā)生頁面?zhèn)€數(shù)、可以準(zhǔn)確定位到某個(gè)小時(shí)和某一分鐘發(fā)生的情況。三、分析報(bào)警分析報(bào)警可以分為多個(gè)指標(biāo)：超時(shí)接口數(shù)量、超時(shí)接口占比（百分比），影響用戶數(shù)量。隨著工作的不斷深入，前端工程師應(yīng)該走出舒適圈，關(guān)注更多維度的指標(biāo)，不能再局限在狹義的前端后端了。webfunny前端一體化埋點(diǎn)可實(shí)現(xiàn)漏斗分析，支持業(yè)務(wù)做更深度數(shù)據(jù)分析...

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇：用戶細(xì)查具體要分析哪些數(shù)據(jù)，更容易幫助我們定位前端問題呢說完用戶基本信息和頁面平均加載時(shí)間，下面就要來說接口耗時(shí)正態(tài)分布。接口耗時(shí)同樣能夠反饋出用戶當(dāng)時(shí)的網(wǎng)絡(luò)狀態(tài)，同時(shí)他也能反饋出服務(wù)端接口的狀態(tài)。比如，頁面平均耗時(shí)表現(xiàn)良好，接口耗時(shí)表現(xiàn)差，則能反映出，當(dāng)時(shí)的后端服務(wù)狀態(tài)不是很好。還有完整的用戶行為記錄，以上是用戶行為中的基本信息，接下來要說的是用戶的完整行為鏈路，通過將頁面訪問、接口請(qǐng)求、代碼報(bào)錯(cuò)、自定義行為等，按照時(shí)間先后順序串聯(lián)起來，可以達(dá)到復(fù)現(xiàn)用戶錯(cuò)誤的目的。其中，接口請(qǐng)求記錄，除了會(huì)記錄接口耗時(shí)，還需要記錄接口的返回值，這樣能夠更加明確的定位數(shù)據(jù)問...

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇三、用戶細(xì)查具體要分析哪些數(shù)據(jù)，更容易幫助我們定位前端問題呢首先是用戶基本信息，既然是查詢用戶的行為記錄，那么用戶的基本信息肯定是必不可少。正常情況下，我們需要知道用戶的標(biāo)簽、使用設(shè)備型號(hào)、系統(tǒng)版本、IP地址、所在地區(qū)、瀏覽器useragent等；詳細(xì)的信息展示可以通過webfunny前端監(jiān)控系統(tǒng)進(jìn)行demo實(shí)操查看。其次是頁面平均加載時(shí)間，這里可能有人會(huì)問了，既然是用戶行為記錄查詢，為什么又需要查看頁面平均加載時(shí)間呢？如大家所知，造成一個(gè)用戶在我們的應(yīng)用上不可用的情況，有很多種原因，其中網(wǎng)絡(luò)速度是不可以忽略的因素。所以通過頁面的平均加載時(shí)間我們可以判斷用戶當(dāng)...

webfunny前端監(jiān)控中自定義埋點(diǎn)和漏斗分析7.1、自定埋點(diǎn)：正常情況下，埋點(diǎn)功能應(yīng)該由后端同學(xué)配合完成。在真實(shí)的開發(fā)過程中，我們免不了遇到需要做一些特殊的埋點(diǎn)，但是有時(shí)候又不容易得到后端同學(xué)幫助的情況，那么前端開發(fā)可以自己去完成埋點(diǎn)功能。如下：圖表中展示埋點(diǎn)觸發(fā)的次數(shù)，以及埋點(diǎn)觸發(fā)的人數(shù)。7.2、漏斗分析：在增加自定義埋點(diǎn)的同時(shí)，Webfunny也增加了埋點(diǎn)步驟轉(zhuǎn)化率統(tǒng)計(jì)：埋點(diǎn)1->埋點(diǎn)2的留存率分析。進(jìn)一步強(qiáng)化自定義埋點(diǎn)功能。困擾前端工程師的線上問題難定位的苦惱可以拋開了，webfunny前端監(jiān)控系統(tǒng)針對(duì)程序員量身打造。海南智能化前端監(jiān)控創(chuàng)新搭建前端監(jiān)控系統(tǒng)（三）之靜態(tài)資源加載監(jiān)控篇如何...

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇如何監(jiān)控前端靜態(tài)資源加載情況：前端開發(fā)者可以根據(jù)報(bào)錯(cuò)是的，還是script標(biāo)簽。由于目前暫時(shí)關(guān)注對(duì)前端造成崩潰的錯(cuò)誤，所以目前只監(jiān)控了css，js文件加載錯(cuò)誤的情況。首先，前端工程師要做的實(shí)時(shí)監(jiān)控和預(yù)警，依然關(guān)聯(lián)了7天以前同一時(shí)間端的數(shù)據(jù)，如果某個(gè)時(shí)間段出現(xiàn)錯(cuò)誤量暴增，可以發(fā)出警告，及時(shí)制止。然后，前端開發(fā)者還需要知道更多詳細(xì)的信息，如資源加載報(bào)錯(cuò)、資源失敗列表等等，雖然前端線上環(huán)境并沒有給前端開發(fā)者報(bào)出這么多的問題，但是可以看到，每天還是有很多的靜態(tài)資源加載報(bào)錯(cuò)，有些是很重要的靜態(tài)資源文件，是必然會(huì)導(dǎo)致頁面渲染失敗的，所以必須要解決建立合理...

搭建前端監(jiān)控系統(tǒng)（六）之接口性能分析篇這是搭建前端監(jiān)控系統(tǒng)的第七章，主要是介紹如何監(jiān)控前端接口的性能?？赡芮岸斯こ處煏?huì)奇怪，接口的性能一直都是由后端的小伙伴來監(jiān)測(cè)的，關(guān)前端鳥事啊。但其實(shí)隨著前端業(yè)務(wù)日益復(fù)雜，前端開始承受著前所未有的重要職責(zé)。因?yàn)榍岸藰I(yè)務(wù)變得復(fù)雜，所以前端工程師必須開始讓前后端分離，前端、后端小伙伴各司其職，同時(shí)也帶來了大量的異步接口請(qǐng)求。所以，原本由后端小伙伴監(jiān)控接口的一部分職責(zé)，便落到了我們前端小伙伴的肩膀上了。那么如何有效的進(jìn)行接口性能的監(jiān)控，通過webfunny前端監(jiān)控、只需要簡(jiǎn)單幾步就可以搭建一套屬于自己的前端監(jiān)控系統(tǒng)。webfunny前端一體化埋點(diǎn)可實(shí)現(xiàn)漏斗分析，支...

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇前端監(jiān)控除了如何做JS錯(cuò)誤監(jiān)控，還有一種錯(cuò)誤是靜態(tài)資源加載報(bào)錯(cuò)，很多時(shí)候資源加載報(bào)錯(cuò)對(duì)前端項(xiàng)目來說是致命的，因?yàn)殪o態(tài)資源加載出錯(cuò)了，有可能就會(huì)導(dǎo)致前端頁面無法渲染，用戶就只能對(duì)著一個(gè)空白屏幕發(fā)呆，不知所措。因?yàn)橥蝗挥刑?，我們的前端線上環(huán)境爆出了大量的白屏錯(cuò)誤，經(jīng)過很長(zhǎng)時(shí)間的排查，終于定位到問題原因：我們使用的CDN路徑不知道怎么的，把我們的https協(xié)議全部指向了http協(xié)議，在安全協(xié)議下無法訪問非安全協(xié)議的資源，導(dǎo)致了大量的白屏。所以我決定增加靜態(tài)資源監(jiān)控功能，以應(yīng)對(duì)未來的未知情況。webfunny通過對(duì)線上項(xiàng)目的實(shí)時(shí)分析，能讓前端工程師對(duì)線上狀況有非...

針對(duì)webfunny整套前端監(jiān)控監(jiān)控系統(tǒng)，前端工程師會(huì)疑問的問題解答：webfunny監(jiān)控這么多東西，不會(huì)影響頁面的性能，首先webfunny這套監(jiān)控系統(tǒng)我們自己和試用購買webfunny的前端工程師已經(jīng)使用很久了，目前沒有遇到性能上的問題。當(dāng)然，也有極個(gè)別的小伙伴反饋說，拖慢了系統(tǒng)。所以我們?cè)黾恿嗽O(shè)置功能，在使用webfunny前端監(jiān)控時(shí)，你可以去除掉大部分的監(jiān)控功能。webfunny前端監(jiān)控居然用node做日志服務(wù)，并發(fā)量高了可以扛得住。因?yàn)閚ode處理并發(fā)有著天然的優(yōu)勢(shì)，目前，如果是單點(diǎn)部署，可以支持10萬+的日活量，如果使用多點(diǎn)部署，效果更佳哦。我們已經(jīng)積極開發(fā)出能夠支持百萬以上日活量...

搭建前端監(jiān)控系統(tǒng)（三）靜態(tài)資源加載監(jiān)控篇如何監(jiān)控前端靜態(tài)資源加載情況：2、利用performance.getEntries()方法，獲取到所有加載成功的資源列表，在onload事件中遍歷出所有頁面資源整合部分，利用排除法，到所有整合部分中過濾掉成功的資源列表，即為加載失敗的資源。此方法看似合理，也確實(shí)能夠排查出加載失敗的靜態(tài)資源，但是檢查的時(shí)機(jī)很難掌握，另外如果遇到異步加載的js也就歇菜了；3、添加一個(gè)Listener（error）來捕獲前端的異常，也是我正在使用的方法，比較靠譜。但是這個(gè)方法會(huì)監(jiān)控到很多的error,所以我們要從中篩選出靜態(tài)資源加載報(bào)錯(cuò)的error。webfunny埋點(diǎn)系統(tǒng)，...