如何解決前端線上問(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)以后，除了他們本身的作用外,，怎么利用這幾大類型數(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ì)分類處理后,，存入到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)品、專業(yè)的服務(wù),、眾多的成功案例積累起來(lái)的聲譽(yù)和口碑,，讓企業(yè)發(fā)展再上新高。