淺談前端中的錯(cuò)誤捕獲

li21 發(fā)布于2019-08-22 18:21 / 2758人閱讀

摘要：淺談前端中的錯(cuò)誤捕獲某一天用戶反饋打開的頁(yè)面白屏幕，怎么定位到產(chǎn)生錯(cuò)誤的原因呢日常某次發(fā)布怎么確定發(fā)布會(huì)沒(méi)有引入呢此時(shí)捕獲到代碼運(yùn)行的并上報(bào)是多么的重要。

淺談前端中的錯(cuò)誤捕獲

某一天用戶反饋打開的頁(yè)面白屏幕，怎么定位到產(chǎn)生錯(cuò)誤的原因呢？日常某次發(fā)布怎么確定發(fā)布會(huì)沒(méi)有引入bug呢？此時(shí)捕獲到代碼運(yùn)行的bug并上報(bào)是多么的重要。

既然捕獲錯(cuò)誤并上報(bào)是日常開發(fā)中不可缺少的一環(huán)，那怎么捕獲到錯(cuò)誤呢？萬(wàn)能的try...catch

try{
  throw new Error()
} catch(e) {
  // handle error
}

看上去錯(cuò)誤捕獲是多么的簡(jiǎn)單，然而下面的場(chǎng)景下就不能捕獲到了

try {
    setTimeout(() => {
        throw new Error("error")
    })
} catch (e) {
    // handle error
}

你會(huì)發(fā)現(xiàn)上面的例子中的錯(cuò)誤不能正常捕獲，看來(lái)錯(cuò)誤捕獲并不是這樣簡(jiǎn)單try...catch就能搞定,當(dāng)然你也可以為異步函數(shù)包裹一層try...catch來(lái)處理。

瀏覽器中，window.onerror來(lái)捕獲你的錯(cuò)誤

window.onerror = function (msg, url, row, col, error) {
    console.log("error");
    console.log({
        msg,  url,  row, col, error
    })
};

捕獲到錯(cuò)誤后就可以將錯(cuò)誤上報(bào)，上報(bào)方式很簡(jiǎn)單，你可以通過(guò)創(chuàng)建簡(jiǎn)單的img,通過(guò)src指定上報(bào)的地址，當(dāng)然為了避免上報(bào)發(fā)送過(guò)多的請(qǐng)求，可以對(duì)上報(bào)進(jìn)行合并，合并上報(bào)。

但但你去看錯(cuò)誤上報(bào)的信息的時(shí)候，你會(huì)發(fā)現(xiàn)一些這樣的錯(cuò)誤Script error

因?yàn)闉g覽器的同源策略，對(duì)于不同域名的錯(cuò)誤，都拋出了Script error，怎么解決這個(gè)問(wèn)題呢？特別是現(xiàn)在基本上js資源都會(huì)放在cdn上面。

解決方案

1：所有的資源都放在同一個(gè)域名下。但是這樣也會(huì)存在問(wèn)題是不能利用cdn的優(yōu)勢(shì)。

2：增加跨域資源支持，在cdn 上增加支持主域的跨域請(qǐng)求支持，在script 標(biāo)簽加crossorigin屬性

GPU云服務(wù)器云服務(wù)器捕獲錯(cuò)誤 php捕獲錯(cuò)誤 js 捕獲錯(cuò)誤 php捕獲錯(cuò)誤信息

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95777.html

相關(guān)文章

淺談前端中的錯(cuò)誤處理

摘要：如何避免內(nèi)存泄露內(nèi)存泄漏很常見，特別是前端去寫后端程序，閉包運(yùn)用不當(dāng)，循環(huán)引用等都會(huì)導(dǎo)致內(nèi)存泄漏。有的時(shí)候很難避免一些可能產(chǎn)生內(nèi)存泄漏的問(wèn)題，可以利用每次調(diào)用都在一個(gè)沙箱環(huán)境下調(diào)用，用完回收調(diào)。某一天用戶反饋打開的頁(yè)面白屏幕，怎么定位到產(chǎn)生錯(cuò)誤的原因呢？日常某次發(fā)布怎么確定發(fā)布會(huì)沒(méi)有引入bug呢？此時(shí)捕獲到代碼運(yùn)行的bug并上報(bào)是多么的重要。既然捕獲錯(cuò)誤并上報(bào)是日常開發(fā)中不可缺少的...

ShowerSun 2019-08-22 18:34 評(píng)論0 收藏0
淺談前端中的錯(cuò)誤處理

摘要：如何避免內(nèi)存泄露內(nèi)存泄漏很常見，特別是前端去寫后端程序，閉包運(yùn)用不當(dāng)，循環(huán)引用等都會(huì)導(dǎo)致內(nèi)存泄漏。有的時(shí)候很難避免一些可能產(chǎn)生內(nèi)存泄漏的問(wèn)題，可以利用每次調(diào)用都在一個(gè)沙箱環(huán)境下調(diào)用，用完回收調(diào)。某一天用戶反饋打開的頁(yè)面白屏幕，怎么定位到產(chǎn)生錯(cuò)誤的原因呢？日常某次發(fā)布怎么確定發(fā)布會(huì)沒(méi)有引入bug呢？此時(shí)捕獲到代碼運(yùn)行的bug并上報(bào)是多么的重要。既然捕獲錯(cuò)誤并上報(bào)是日常開發(fā)中不可缺少的...

BothEyes1993 2019-05-28 17:09 評(píng)論0 收藏0
淺談---事件冒泡--事件捕獲--Vue2.0中的capture

摘要：直白點(diǎn)事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標(biāo)準(zhǔn)事件監(jiān)聽標(biāo)準(zhǔn)事件監(jiān)聽其實(shí)是事件冒泡和事件捕獲的混合體任何事件發(fā)生時(shí)，先從頂層開始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)。前言本文主要介紹事件冒泡和事件捕獲以及Vue中的capture 主要內(nèi)容事件捕獲含義:從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象...

Raaabbit 2019-08-20 17:07 評(píng)論0 收藏0
淺談事件冒泡與事件捕獲

摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁(yè)面中事件流事件發(fā)生順序的問(wèn)題。事件冒泡微軟提出了名為事件冒泡的事件流。事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁(yè)面中事件流（事件發(fā)生順序）的問(wèn)題。 Click me! 上面的代碼當(dāng)中一個(gè)div元素當(dāng)中有一個(gè)p子元素，如果兩個(gè)元素都有一個(gè)cli...

zhunjiee 2019-08-21 10:21 評(píng)論0 收藏0
JavaScript-淺談DOM事件流

摘要：事件流指的是從頁(yè)面接收事件的順序。級(jí)事件規(guī)定方法的第三個(gè)參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級(jí)事件規(guī)定，事件流應(yīng)該包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。什么是事件？（敲黑板）事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級(jí)程序設(shè)計(jì)》）比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)... 什么是事件...

haitiancoder 2019-08-20 10:49 評(píng)論0 收藏0