成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

window onerror 各瀏覽器下表現(xiàn)總結(jié)

xiongzenghui / 3498人閱讀

摘要：各瀏覽器下表現(xiàn)總結(jié)做前端錯(cuò)誤上報(bào)，必然離不開(kāi)，但在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，在一些情況下并不會(huì)給出詳細(xì)的錯(cuò)誤信息，本文的目的就是通過(guò)跑一些簡(jiǎn)單的小例子，驗(yàn)證在不同瀏覽器下的具體表現(xiàn)。

window onerror 各瀏覽器下表現(xiàn)總結(jié) 
做前端錯(cuò)誤上報(bào)，必然離不開(kāi)window onerror，但window onerror在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，在一些情況下并不會(huì)給出詳細(xì)的錯(cuò)誤信息，本文的目的就是通過(guò)跑一些簡(jiǎn)單的小例子，驗(yàn)證onerror在不同瀏覽器下的具體表現(xiàn)。
準(zhǔn)備

我會(huì)在Mac, Windows, Android和IOS平臺(tái)下分別進(jìn)行測(cè)試并記錄。為了模擬真實(shí)線上環(huán)境，我利用GitHub Page模擬線上靜態(tài)文件服務(wù)器，通過(guò)其他設(shè)備訪問(wèn)此地址即可。

測(cè)試用例

預(yù)期得到錯(cuò)誤Uncaught ReferenceError: Name is not defined，并打印onerror中的所有參數(shù)，其中包括行列號(hào)，Error對(duì)象中存在錯(cuò)誤的堆棧信息等。

window.onerror = function(msg, url, line, col, error) {
  // 直接將錯(cuò)誤打印到控制臺(tái)
  console.log(arguments)

  // 方便在未打開(kāi)控制臺(tái)的時(shí)候，記錄錯(cuò)誤對(duì)象
  window.demoError = arguments

}

function makeError () {
  var name = "geoff"
  var msg = "Hi, " + Name
  console.log(msg)
}

makeError()

.
.
.
測(cè)試結(jié)果在最后，，，各個(gè)瀏覽器下執(zhí)行的截圖
.
.
.

先看結(jié)論

大多數(shù)現(xiàn)代瀏覽器對(duì)window onerror都支持良好。需要注意的點(diǎn)如下：

IE10以下只有行號(hào)，沒(méi)有列號(hào)， IE10有行號(hào)列號(hào)，但無(wú)堆棧信息。IE10以下，可以通過(guò)在onerror事件中訪問(wèn)window.event對(duì)象，其中有errorCharacter，也就是列號(hào)了。但不知為何，列號(hào)總是比真實(shí)列號(hào)小一些。

IOS下onerror表現(xiàn)非常統(tǒng)一，包含所有標(biāo)準(zhǔn)信息

安卓部分機(jī)型沒(méi)有堆棧信息

總之，瀏覽器關(guān)于onerror這件事，是這樣的一個(gè)演化過(guò)程，最早因?yàn)轫?yè)面中的js并不會(huì)很復(fù)雜，所以定位錯(cuò)誤只需要一個(gè)行號(hào)就很容易找到，后面加上了列號(hào)，最后又加上了堆棧信息。

實(shí)驗(yàn)數(shù)據(jù) Mac (10.12.1)

Chrome 60.0.3112.90

Safari 10.0.1 (12602.2.14.0.7)

FireFox 47.0

QQ瀏覽器 （內(nèi)核Chromium 48.0.2564.82）

Windows (win7)

Chrome 51.0.2704.106

FireFox 55.0

IE9

IE10

![](https://static.oschina.net/uploads/img/201709/06152130_7MWq.png)

Android (5.1)

Chrome (59.0.3071.92)

{
    "0": "Uncaught ReferenceError: Name is not defined",
    "1": "http://geoffzhu.cn/error-report/index.js",
    "2": 14,
    "3": 22,
    "4": {}
}

UC

    {
    "0": "Uncaught ReferenceError: Name is not defined",
    "1": "http://geoffzhu.cn/error-report/index.js",
    "2": 14,
    "3": 22,
    "4": {}
    }

微信webview

    {
    "0": "Uncaught ReferenceError: Name is not defined",
    "1": "http://geoffzhu.cn/error-report/index.js",
    "2": 14,
    "3": 22,
    "4": {}
    }

IOS (10.3.2)

Chrome

{
"0": "ReferenceError: Can"t find variable: Name",
"1": "http://geoffzhu.cn/error-report/index.js",
"2": 14,
"3": 26,
"4": {
    "line": 14,
    "column": 26,
    "sourceURL": "http://geoffzhu.cn/error-report/index.js"
 }
}

UC

    {
    "0": "ReferenceError: Can"t find variable: Name",
    "1": "http://geoffzhu.cn/error-report/index.js",
    "2": 14,
    "3": 26,
    "4": {
        "line": 14,
        "column": 26,
        "sourceURL": "http://geoffzhu.cn/error-report/index.js"
     }
    }

微信webview

{
"0": "ReferenceError: Can"t find variable: Name",
"1": "http://geoffzhu.cn/error-report/index.js",
"2": 14,
"3": 26,
"4": {
    "line": 14,
    "column": 26,
    "sourceURL": "http://geoffzhu.cn/error-report/index.js"
 }
}

關(guān)于代碼壓縮和source-map

我通過(guò)uglifyJs模擬webpack壓縮的配置將上文中的index.js壓縮，得到source-map，通過(guò)mozilla/source-map的SourceMapConsumer接口，可以通過(guò)將轉(zhuǎn)換后的行號(hào)列號(hào)傳入Consumer得到原始錯(cuò)誤位置信息。相應(yīng)的node代碼如下

var fs = require("fs")
var sourceMap = require("source-map")

// map文件
var rawSourceMapJsonData = fs.readFileSync("./dist/index.min.js.map", "utf-8")
rawSourceMapJsonData = JSON.parse(rawSourceMapJsonData)

var consumer = new sourceMap.SourceMapConsumer(rawSourceMapJsonData);

// 打印出真實(shí)錯(cuò)誤位置
console.log(consumer.originalPositionFor({line: 1, column: 220}))

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

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

相關(guān)文章

  • window onerror 各瀏覽器下表現(xiàn)總結(jié)

    摘要：各瀏覽器下表現(xiàn)總結(jié)做前端錯(cuò)誤上報(bào)，必然離不開(kāi)，但在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，在一些情況下并不會(huì)給出詳細(xì)的錯(cuò)誤信息，本文的目的就是通過(guò)跑一些簡(jiǎn)單的小例子，驗(yàn)證在不同瀏覽器下的具體表現(xiàn)。 window onerror 各瀏覽器下表現(xiàn)總結(jié) 做前端錯(cuò)誤上報(bào)，必然離不開(kāi)window onerror，但window onerror在不同設(shè)備上表現(xiàn)并不一致，瀏覽器為避免信息泄露，...

    rickchen 評(píng)論0 收藏0

  • 讓前端監(jiān)控?cái)?shù)據(jù)采集更高效

    摘要：如何在新的技術(shù)背景下讓前端數(shù)據(jù)采集工作更加完善高效，是本文討論的重點(diǎn)。具體來(lái)說(shuō)，我們對(duì)前端的數(shù)據(jù)采集具體主要分為路由切換性能資源錯(cuò)誤日志上報(bào)路由切換等前端技術(shù)的快速發(fā)展使單頁(yè)面應(yīng)用盛行。 隨著業(yè)務(wù)的快速發(fā)展，我們對(duì)生產(chǎn)環(huán)境下的問(wèn)題感知能力越來(lái)越關(guān)注。作為距離用戶最近的一層，前端的表現(xiàn)是否可靠、穩(wěn)定、好用，很大程度上決定著用戶對(duì)整個(gè)產(chǎn)品的體驗(yàn)和感受。因此，對(duì)于前端的監(jiān)控不容忽視。 搭建一...

    Half 評(píng)論0 收藏0

  • 前端錯(cuò)誤監(jiān)控與收集探究

    摘要：這樣很容易造成大的損失，提前做好錯(cuò)誤收集和處理，可以減少損失。 編寫(xiě)代碼只是做好項(xiàng)目的一小部分，寫(xiě)代碼難免會(huì)碰到錯(cuò)誤。因此，在項(xiàng)目上線后，我們還需要主動(dòng)對(duì)項(xiàng)目的錯(cuò)誤進(jìn)行收集，不能等用戶發(fā)現(xiàn)錯(cuò)誤，再聯(lián)系我們，我們?cè)偃ヌ幚?。這樣很容易造成大的損失，提前做好錯(cuò)誤收集和處理，可以減少損失。 本人并沒(méi)有做過(guò)相關(guān)的工作，下面的文章只是我在學(xué)習(xí)中的一點(diǎn)思考和總結(jié)，可能有比較多不足和錯(cuò)誤的地方，希望大...

    ZoomQuiet 評(píng)論0 收藏0

  • 一步一步搭建前端監(jiān)控系統(tǒng)：如何定位前端線上問(wèn)題？

    摘要：一直以來(lái)，前端的線上問(wèn)題很難定位，因?yàn)樗l(fā)生于用戶的一系列操作之后。當(dāng)然，這些問(wèn)題并非不能克服，讓我們來(lái)一起看看如何去定位線上的問(wèn)題吧。地址參考一步一步搭建前端監(jiān)控系統(tǒng)錯(cuò)誤監(jiān)控篇一步一步搭建前端監(jiān)控系統(tǒng)接口請(qǐng)求異常監(jiān)控篇 摘要： 記錄用戶行為，排查線上BUG。 作者：一步一個(gè)腳印一個(gè)坑 原文：如何定位前端線上問(wèn)題（如何排查前端生產(chǎn)問(wèn)題） Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所...

    aaron 評(píng)論0 收藏0

  • JS錯(cuò)誤監(jiān)控總結(jié)

    摘要：前言做好錯(cuò)誤監(jiān)控，將用戶使用時(shí)的錯(cuò)誤日志上報(bào)，可以幫助我們更快的解決一些問(wèn)題。一個(gè)變通方案是單獨(dú)處理，告知錯(cuò)誤詳情僅能通過(guò)瀏覽器控制臺(tái)查看，無(wú)法通過(guò)訪問(wèn)。 前言 做好錯(cuò)誤監(jiān)控，將用戶使用時(shí)的錯(cuò)誤日志上報(bào)，可以幫助我們更快的解決一些問(wèn)題。目前開(kāi)源的比較好的前端監(jiān)控有 https://docs.sentry.io/ 那前端監(jiān)控是怎么實(shí)現(xiàn)的呢？要想了解這個(gè)，需要知道前端錯(cuò)誤大概分為哪些以及如...

    wqj97 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<