文档章节

window onerror各浏览器下表现总结

GeoffZhu
 GeoffZhu
发布于 2017/09/06 15:22
字数 779
阅读 48
收藏 1

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

  2. Safari 10.0.1 (12602.2.14.0.7)

  3. FireFox 47.0

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

Windows (win7)

  1. Chrome 51.0.2704.106

  2. FireFox 55.0

  3. IE9

  4. IE10

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

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

© 著作权归作者所有

共有 人打赏支持
GeoffZhu
粉丝 22
博文 11
码字总数 12047
作品 0
window.onerror的总结

最近一直在做前端js错误监控的工作,在不断的打磨和完善中,发现里面还是知识点不少,现在就前端js错误监控做一些笔记和总结 我们知道前端js错误监控主要是利用了window.onerror函数来实现,...

牧羊童鞋
2017/10/08
0
0
js的Image对象属性的简单认识

转载自: http://blog.csdn.net/hdchangchang/article/details/9036511 创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图...

ahl123
2017/06/08
0
0
原生JavaScript学习之 window对象(ES5标准)

1 window对象的定义? 对象表示一个包含DOM文档的窗口,其 属性指向窗口中载入的 DOM文档 。使用 属性可以获取指定文档所在窗口。(来自 MDN) 所有浏览器都支持 window 对象,它表示浏览器窗...

w-rain
2016/06/17
1K
12
window.onerror事件

定义:http://www.w3.org/html/wg/drafts/html/master/webappapis.html#onerroreventhandlernonnull [TreatNonCallableAsNull] callback OnErrorEventHandlerNonNull = any ((Event or DOMSt......

一点灵犀
2016/05/26
24
0
JS获取手机经纬度,实现城市定位的方法

通过手机GPS+百度定位 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script> function getLocation() { var options = { enableHighAccuracy : tru......

Terell
2016/12/28
756
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
183
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部