前端監(jiān)控和js穩(wěn)定性監(jiān)控產(chǎn)品搭建

如何解決前端線上問(wèn)題？如果你是一位前端工程師，那你一定不止一次去解決一些頑固的線上問(wèn)題，你也曾想方設(shè)法復(fù)現(xiàn)用戶的bug，結(jié)果可能都不太理想。怎樣定位前端線上問(wèn)題，一直以來(lái)，都是很頭疼的問(wèn)題，因?yàn)樗l(fā)生于用戶的一系列操作之后。錯(cuò)誤的原因可能源于機(jī)型，網(wǎng)絡(luò)環(huán)境，復(fù)雜的操作行為等等，在我們想要去解決的時(shí)候很難復(fù)現(xiàn)出來(lái)，自然也就無(wú)法解決。身為一名前端工程師，我每天都要面臨很多線上的問(wèn)題，一時(shí)間讓我焦頭爛額。雖然公司也有其他的監(jiān)控系統(tǒng)，但是每次解決問(wèn)題都需要輾轉(zhuǎn)于各種監(jiān)控系統(tǒng)之間，亦是疲憊不堪。所以，一怒之下，基于自己在前端線上監(jiān)控工作時(shí)的這些痛點(diǎn)，我便為自己（前端工程師）量身定做了這樣一款監(jiān)控系統(tǒng)：webfunny前端監(jiān)控，為了讓監(jiān)控項(xiàng)目更加完善、現(xiàn)在埋點(diǎn)系統(tǒng)也推出來(lái)，希望能對(duì)前端工程師們?cè)诮鉀Q線上問(wèn)題，提供一個(gè)好用的前端監(jiān)控系統(tǒng)平臺(tái)。webfunny能夠輕松完成打點(diǎn)業(yè)務(wù)需求。webfunny還對(duì)埋點(diǎn)數(shù)據(jù)進(jìn)行了漏斗分析，清晰查看兩個(gè)埋點(diǎn)的留存率。前端監(jiān)控和js穩(wěn)定性監(jiān)控產(chǎn)品搭建

搭建前端監(jiān)控系統(tǒng)（七）之用戶細(xì)查篇前端程序員都知道搭建監(jiān)控系統(tǒng)，主要涉及幾大指標(biāo)，流量數(shù)據(jù)、錯(cuò)誤數(shù)據(jù)、接口數(shù)據(jù)、性能數(shù)據(jù)等；這些數(shù)據(jù)統(tǒng)計(jì)出來(lái)以后，除了他們本身的作用外，怎么利用這幾大類(lèi)型數(shù)據(jù)來(lái)幫我們排查問(wèn)題呢，那就涉及到「用戶細(xì)查」的部分了。「用戶細(xì)查」顧名思義就是把用戶所有的行為記錄統(tǒng)計(jì)出來(lái)，幫助前端開(kāi)發(fā)者來(lái)定位，或者復(fù)現(xiàn)用戶所產(chǎn)生的問(wèn)題。如果一套前端監(jiān)控系統(tǒng)沒(méi)有用戶細(xì)查的能力，光能看問(wèn)題，卻不能解決問(wèn)題，那也就是失去了監(jiān)控系統(tǒng)的靈魂了。而作為監(jiān)控系統(tǒng)之一的webfunny前端監(jiān)控，因?yàn)殚_(kāi)發(fā)者也就是我本人就是從事前端多年，深深知道監(jiān)控的痛點(diǎn)，所以在設(shè)計(jì)「用戶細(xì)查」的時(shí)候做了很多維度的細(xì)分功能。前端監(jiān)控和js文件加載錯(cuò)誤監(jiān)控方案開(kāi)源前端工程師需要一個(gè)性能監(jiān)控系統(tǒng)，持續(xù)監(jiān)控和預(yù)警頁(yè)面性能的狀況，并且在發(fā)現(xiàn)瓶頸的時(shí)候指導(dǎo)優(yōu)化工作。

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

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

整體大致可以分四個(gè)階段：信息采集、存儲(chǔ)、分析、監(jiān)控。采集階段：收集異常日志，先在本地做一定的處理，采取一定的方案上報(bào)到服務(wù)器。存儲(chǔ)階段：后端接收前端上報(bào)的異常日志，經(jīng)過(guò)一定處理，按照一定的存儲(chǔ)方案存儲(chǔ)。分析階段：分為機(jī)器自動(dòng)分析和人工分析。機(jī)器自動(dòng)分析，通過(guò)預(yù)設(shè)的條件和算法，對(duì)存儲(chǔ)的日志信息進(jìn)行統(tǒng)計(jì)和篩選，發(fā)現(xiàn)問(wèn)題，觸發(fā)報(bào)警。人工分析，通過(guò)提供一個(gè)可視化的數(shù)據(jù)面板，讓系統(tǒng)用戶可以看到具體的日志數(shù)據(jù)，根據(jù)信息，發(fā)現(xiàn)異常問(wèn)題根源。報(bào)警階段：分為告警和預(yù)警。告警按照一定的級(jí)別自動(dòng)報(bào)警，通過(guò)設(shè)定的渠道，按照一定的觸發(fā)規(guī)則進(jìn)行。預(yù)警則在異常發(fā)生前，提前預(yù)判，給出警告。性能監(jiān)控：使用ResourceTimingAPI和PerformanceTimingAPI，可以計(jì)算許多重要的指標(biāo)，比如頁(yè)面性能統(tǒng)計(jì)的起始點(diǎn)時(shí)間、首屏?xí)r間等。異常監(jiān)控：前端捕獲異常分為全局捕獲和局部捕獲。局部捕獲作為補(bǔ)充，對(duì)某些特殊情況進(jìn)行捕獲，但分散，不利于管理。所以，我會(huì)選擇全局捕獲的方式，即通過(guò)全局的接口，將捕獲代碼集中寫(xiě)在一個(gè)地方。具體在實(shí)現(xiàn)項(xiàng)目中，我應(yīng)該會(huì)采用badjs-report，它重寫(xiě)了進(jìn)行上報(bào)異常，無(wú)需編寫(xiě)任何捕獲錯(cuò)誤的代碼。webfunny前端一體化埋點(diǎn)系統(tǒng)，支持多場(chǎng)景搭建分析，更全的支持業(yè)務(wù)的多角度分析。前端監(jiān)控和js穩(wěn)定性監(jiān)控產(chǎn)品搭建

webfunny前端監(jiān)控系統(tǒng)的功能：性能分析，通過(guò)分析頁(yè)面和接口性能，加載耗時(shí)，成功率。前端監(jiān)控和js穩(wěn)定性監(jiān)控產(chǎn)品搭建

webfunny整套前端監(jiān)控監(jiān)控系統(tǒng)的流程是比較簡(jiǎn)單的：手機(jī)端-用戶訪問(wèn)頁(yè)面會(huì)產(chǎn)生錯(cuò)誤日志、產(chǎn)生的日志會(huì)存入瀏覽器緩存，瀏覽器本地緩存會(huì)定時(shí)向Node服務(wù)推送日志信息，NodeJs日志服務(wù)會(huì)分類(lèi)處理后，存入到mysql數(shù)據(jù)庫(kù)中，數(shù)據(jù)可視化系統(tǒng)會(huì)展示日志數(shù)據(jù)。webfunny前端監(jiān)控用mysql數(shù)據(jù)庫(kù)來(lái)存數(shù)據(jù)庫(kù)，目前沒(méi)有遇到卡死的情況。webfunny前端監(jiān)控系統(tǒng)的數(shù)據(jù)庫(kù)，采用了每日分表的模式，目前千萬(wàn)級(jí)別的日志量是沒(méi)有問(wèn)題的哦，請(qǐng)放心使用吧。Webfunny前端監(jiān)控系統(tǒng)支持的項(xiàng)目有H5前端、PC前端、微信小程序、uni-APP。前端監(jiān)控和js穩(wěn)定性監(jiān)控產(chǎn)品搭建

上海觀縱科技有限公司位于上海市奉賢區(qū)望園南路1288弄80號(hào)1904、1909室。公司自成立以來(lái)，以質(zhì)量為發(fā)展，讓匠心彌散在每個(gè)細(xì)節(jié)，公司旗下webfunny前端監(jiān)控，webfunny前端埋點(diǎn)，全鏈路應(yīng)用性能監(jiān)控，Argus-IT運(yùn)維監(jiān)控深受客戶的喜愛(ài)。公司秉持誠(chéng)信為本的經(jīng)營(yíng)理念，在傳媒、廣電深耕多年，以技術(shù)為先導(dǎo)，以自主產(chǎn)品為重點(diǎn)，發(fā)揮人才優(yōu)勢(shì)，打造傳媒、廣電良好品牌。觀縱科技憑借創(chuàng)新的產(chǎn)品、專(zhuān)業(yè)的服務(wù)、眾多的成功案例積累起來(lái)的聲譽(yù)和口碑，讓企業(yè)發(fā)展再上新高。