https://www.lxchuan12.cn/sentry/#captureevent
1、文章介紹了常用的異常捕獲方式?
同步類(lèi)型:
try catch
window.onerror
異步類(lèi)型:
Promise.catch
Window. onunhandledrejection
資源類(lèi)型:
element.onerror
performance.getEntries()進(jìn)行分析
這些error事件不會(huì)向上冒泡到window疼约,但能被window.addEventListener在捕獲階段捕獲。
但這里需要注意懂诗,由于上面提到了addEventListener也能夠捕獲js錯(cuò)誤腰奋,因此需要過(guò)濾避免重復(fù)上報(bào),判斷為資源錯(cuò)誤的時(shí)候才進(jìn)行上報(bào)东囚。)
2之剧、上報(bào)原理
Ajax 或者 img 對(duì)象進(jìn)行上報(bào)(據(jù)說(shuō)是主流方式郭卫,原因查到的有1、避免重復(fù)上報(bào) 2背稼、所有瀏覽器都支持 Image 對(duì)象 3贰军、避免庫(kù)本身的問(wèn)題)
3、sentry-javascript庫(kù)的基本思路
sentry使用的是window.onerror蟹肘、window.onunhandledrejection词疼,以及支持用戶的主動(dòng)上報(bào)俯树。
用fetch(backup xmr)進(jìn)行上報(bào)。
4贰盗、sentry-javascript庫(kù)的基本源碼分析
A.從 sentry 的初始化邏輯作為入口聘萨,分析client 與 hub 的構(gòu)造過(guò)程。
b.BrowserBackend繼承自BaseBackend童太,繼承過(guò)程實(shí)現(xiàn)抽象的_setupTransport方法。從而提供了請(qǐng)求相關(guān)的功能實(shí)現(xiàn)胸完。BrowserClient繼承自BaseClient(BrowserBackend)书释,通過(guò)實(shí)例化BrowserClient可以得到一個(gè)擁有發(fā)送請(qǐng)求等能里的client實(shí)例。
d.從getCurrentHub分析hub實(shí)例對(duì)象的構(gòu)造赊窥,hub的構(gòu)造采用了單例爆惧,從初在全局對(duì)象的__sentry__.hub? 上,主要包含的屬性有scope和client锨能。client及上文提到的BrowserClient的實(shí)例扯再。scope主要通過(guò)暴露的api,供用戶設(shè)置一些全局的信息址遇。如setExtra熄阻,setUser等。
e.最后分析了兩個(gè)主要apicaptureMessage與captureEvent在源碼中的完整運(yùn)行流程倔约。
總的來(lái)看秃殉,sentry-javascript? 源碼中大量使用了繼承從而實(shí)現(xiàn)了基類(lèi)功能抽象和不同端的具體功能實(shí)現(xiàn)。整體并沒(méi)有太復(fù)雜浸剩。