window onerror 各浏览器下表现总结

做前端错误上报,必然离不开window onerror,但window onerror在不同设备上表现并不一致,浏览器为避免信息泄露,在一些情况下并不会给出详细的错误信息,本文的目的就是通过跑一些简单的小例子,验证onerror在不同浏览器下的具体表现。

准备

我会在Mac, Windows, Android和IOS平台下分别进行测试并记录。为了模拟真实线上环境,我利用GitHub Page模拟线上静态文件服务器,通过其他设备访问此地址即可。

测试用例

预期得到错误Uncaught ReferenceError: Name is not defined,并打印onerror中的所有参数,其中包括行列号,Error对象中存在错误的堆栈信息等。

window.onerror = function(msg, url, line, col, error) {
// 直接将错误打印到控制台
console.log(arguments) // 方便在未打开控制台的时候,记录错误对象
window.demoError = arguments } function makeError () {
var name = "geoff"
var msg = "Hi, " + Name
console.log(msg)
} makeError()

.
.
.
测试结果在最后,,,各个浏览器下执行的截图
.
.
.

先看结论

大多数现代浏览器对window onerror都支持良好。需要注意的点如下:

  1. IE10以下只有行号,没有列号, IE10有行号列号,但无堆栈信息。IE10以下,可以通过在onerror事件中访问window.event对象,其中有errorCharacter,也就是列号了。但不知为何,列号总是比真实列号小一些。

  2. IOS下onerror表现非常统一,包含所有标准信息

  3. 安卓部分机型没有堆栈信息

总之,浏览器关于onerror这件事,是这样的一个演化过程,最早因为页面中的js并不会很复杂,所以定位错误只需要一个行号就很容易找到,后面加上了列号,最后又加上了堆栈信息。

实验数据

Mac (10.12.1)

  1. Chrome 60.0.3112.90

  1. Safari 10.0.1 (12602.2.14.0.7)

  1. FireFox 47.0

  2. QQ浏览器 (内核Chromium 48.0.2564.82)

Windows (win7)

  1. Chrome 51.0.2704.106

  2. FireFox 55.0

  3. IE9

  4. IE10

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

Android (5.1)

  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": {}
    }
  2. UC

        {
    "0": "Uncaught ReferenceError: Name is not defined",
    "1": "http://geoffzhu.cn/error-report/index.js",
    "2": 14,
    "3": 22,
    "4": {}
    }
  3. 微信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)

  1. 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"
    }
    }
  2. 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"
}
}
  1. 微信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"
    }
    }

关于代码压缩和source-map

我通过uglifyJs模拟webpack压缩的配置将上文中的index.js压缩,得到source-map,通过mozilla/source-map的SourceMapConsumer接口,可以通过将转换后的行号列号传入Consumer得到原始错误位置信息。相应的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); // 打印出真实错误位置
console.log(consumer.originalPositionFor({line: 1, column: 220}))

window onerror 各浏览器下表现总结的更多相关文章

  1. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  2. placeholder在不同浏览器下的表现及兼容方法(转)

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  3. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  4. window.close(); 关闭浏览器窗口js代码的分析总结

    序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

  5. window.close(); 关闭浏览器窗口js代码

    序号 关闭代码 需要确认 无任何作用 无需确认 测试 1 window.close() IE7 firefox,chrome,safari Opera Close 2 window.opener=nu ...

  6. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. window.open被浏览器拦截的解决方案

    现象 最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,搞得人无比郁闷啊,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截.何况当出现拦截时,很多小白根 ...

  8. 基于window.onerror事件 建立前端错误日志

    QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...

  9. firefox的window.onerror没有详细的出错提示

    当在firefox浏览器的a.htm页面中使用script标签加载某a.js出错时,如果放置window.onerror事件处理方法时,此方法获取到的错误信息都是固定的: {0:"Scrip ...

随机推荐

  1. idea教程--如何申请免费的ideaIDE

    开始申请前请先到 https://www.jetbrains.com/zh/student/ 阅读免费学生授权的介绍和常见问题,再依照下方流程进行申请. (1)到 https://www.jetbra ...

  2. Linux CentOS7.X-目录切换

    一.cd 命令 在Linux中,进行目录的切换需要使用cd命令. 二.Linux目录结构  三.Linux CentOS7中几个常用目录切换方式 1.cd usr 切换到当前目录下的usr目录. 2. ...

  3. 矩池云上安装yolov4 darknet教程

    这里我是用PyTorch 1.8.1来安装的 拉取仓库 官方仓库 git clone https://github.com/AlexeyAB/darknet 镜像仓库 git clone https: ...

  4. 【SpringMVC从入门到精通】00-SpringMVC 简介

    笔记来源:[尚硅谷]SpringMVC教程丨一套快速上手spring mvc 目录 SpringMVC 简介 1.课程介绍 2.什么是 MVC? 3.什么是 SpringMVC? 4.SpringMV ...

  5. DBScan聚类,打破形状的限制,使用密度聚类

    如何用花盆摆放成国庆字,并且包围这两个字. 在DBSCAN中衡量密度主要使用的指标:半径.最少样本量 算法原理 *直接密度可达 如果一个点在核心对象的半径区域内,那么这个点和核心对象称为直接密度可达, ...

  6. LGP5795题解

    首先 \(k\) 大容易让我们想到 主席树&树套树&整体二分,而异或又让我们想到 01-Trie. 所以就有一个很明显的二分,二分一个 mid 看有多少个数不大于 mid. 然后发现 ...

  7. Objects.equals有坑

    前言 最近review别人代码的时候,发现有个同事,在某个业务场景下,使用Objects.equals方法判断两个值相等时,返回了跟预期不一致的结果,引起了我的兴趣. 原本以为判断结果会返回true的 ...

  8. Numpy库基础___三

    ndarray一个强大的N维数组对象Array •ndarray的操作 索引 a = np.arange(24).reshape((2,3,4)) print(a) #[[[ 0 1 2 3] # [ ...

  9. 搭建Loki、Promtail、Grafana轻量级日志系统(centos7)

    搭建Loki.Promtail.Grafana轻量级日志系统(centos7)--简称PLG 需求 公司项目采用微服务的架构,服务很多,每个服务都有自己的日志,分别存放在不同的服务器上.当查找日志时需 ...

  10. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...