淺談前端中的錯誤捕獲

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

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

淺談前端中的錯誤捕獲

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

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

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

看上去錯誤捕獲是多么的簡單，然而下面的場景下就不能捕獲到了

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

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

瀏覽器中，window.onerror來捕獲你的錯誤

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

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

但但你去看錯誤上報的信息的時候，你會發(fā)現(xiàn)一些這樣的錯誤Script error

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

解決方案

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95777.html

相關(guān)文章

淺談前端中的錯誤處理

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

ShowerSun 2019-08-22 18:34 評論0 收藏0
淺談前端中的錯誤處理

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

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

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

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

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

zhunjiee 2019-08-21 10:21 評論0 收藏0
JavaScript-淺談DOM事件流

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

haitiancoder 2019-08-20 10:49 評論0 收藏0