文档章节

window onerror各浏览器下表现总结

GeoffZhu
 GeoffZhu
发布于 2017/09/06 15:22
字数 779
阅读 37
收藏 1
点赞 0
评论 0

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

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

原生JavaScript学习之 window对象(ES5标准)

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

w-rain ⋅ 2016/06/17 ⋅ 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 ⋅ 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 ⋅ 0

恶意网页逃避JavaScript沙盒过滤技术及应对介绍

ZDNET安全频道时间 :2009-07-26作者 : | CSDN 意网页是目前木马传播的一个主要途径,沙盒 过滤技术是检测恶意网页 的一个可行的方法,而且理论上检测率是很高的,但在现实实现这种检测方案...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

手机网页前端调试面板--Eruda

前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改...

surunzi ⋅ 2016/05/05 ⋅ 12

js调用可执行性(exe)文件(仅IE可用)

jQuery: $(function(){ $('#exsp').click(function(exe){ exe.value=$('.exsp').attr('val'); try { var objShell = new ActiveXObject("wscript.shell"); objShell.Run($('.exsp').attr('va......

BearCatYN ⋅ 2014/07/15 ⋅ 0

【HTML5】HTML5 Web Worker

  基础介绍:Introduction to the HTML5 Web Workers: the JavaScript multithreading approach   首先本文只讨论 window.Worker 而不包含SharedWorker .毕竟这玩意连firefox4 beta7 都还......

小小M ⋅ 2013/05/14 ⋅ 0

编译器错误~写JS还是谨慎点好

写JS还是谨慎点好,为什么这样说,首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现 黄色的叹号,这是正常的,这也不是最...

mcy247 ⋅ 2017/12/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 45分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 55分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部