文： http://www.jb51.net/article/78764.htm

用window.onerror捕获并上报Js错误的方法

前两天有个2048游戏的用户反馈说，打开游戏后不能玩儿，只有一个游戏面板，数字无法初始化，更无法移动，设备为iPhone 4S、iOS 5.1。尝试从微信调起Safari打开，依然不好使。由于游戏中运用了比较多的HTML5特性，所以粗略估计是有JS报错导致。不过这样的信息该如何捕获到呢？当然是传说中的window.onerror。

从W3C找到关于window.onerror的方法体介绍：

这个意思，基本可以就是说，window.onerror方法，我们可以写成：

/**

 * @param {String} errorMessage  错误信息

 * @param {String} scriptURI   出错的文件

 * @param {Long}  lineNumber   出错代码的行号

 * @param {Long}  columnNumber  出错代码的列号

 * @param {Object} errorObj    错误的详细信息，Anything

 */

window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {

  // TODO

}

不过使用过程中还得注意兼容性问题，不是所有浏览器都有参数列表中的所有参数，chrome之类的，都是浏览器标准草案的领跑者，这些个参数用就是了！

于是，可以写一个小Demo来尝试一下：

<!DOCTYPE html>

<html>

<head>

  <title>Js错误捕获</title>

  <script type="text/javascript">

  /**

   * @param {String} errorMessage  错误信息

   * @param {String} scriptURI   出错的文件

   * @param {Long}  lineNumber   出错代码的行号

   * @param {Long}  columnNumber  出错代码的列号

   * @param {Object} errorObj    错误的详细信息，Anything

   */

  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {

    console.log("错误信息：" , errorMessage);

    console.log("出错文件：" , scriptURI);

    console.log("出错行号：" , lineNumber);

    console.log("出错列号：" , columnNumber);

    console.log("错误详情：" , errorObj);

  }

  </script>

</head>

<body>

  <script type="text/javascript" src="error.js"></script>

</body>

</html>

其中error.js文件中的内容，简单的这样写一句：

throw new Error("出错了！");
用浏览器跑起来以后，打开console，基本就是这样的了：

所以，这些数据都是可以做上报的了。
当然了，上面的error.js是和html页面同域名下，如果error.js不在同域下，会是怎样的？我们把error.js的引用改一下：

<script type="text/javascript" src="//doitbegin.duapp.com/error.js"></script>
再来打开console，我们看到的是这样的：

相当于window.onerror方法只捕获到了一个errorMessage，而且是固定字符串，毫无参考价值。查了点资料（Webkit源码），发现在浏览器实现script资源加载的地方，是进行了同源策略判断的，如果是非同源资源，errorMessage就被写死为“Script error”了：

好在script标签有一个crossorigin属性，设置它可以显示比较详细的错误信息，我们试着将script标签改一下：

<script type="text/javascript" src="//doitbegin.duapp.com/error.js" crossorigin></script>
刷新页面，这个时候看到console中的输出是这样的：

出现这个error也不意外，既然设置了error.js为crossorigin，那error.js的HTTP Response Header也必须设置非同源可访问。为了方便设置Header，把error.js做一个小改动，更名为：error-js.php。

<?php

  header('Access-Control-Allow-Origin:*');

  header('Content-type:text/javascript');

?>

throw new Error('出错了');

此时刷新页面，看到console中的输出就已经正常了，所有信息都能正常捕获：

OK，技术细节分析结束！我2048游戏静态资源是放到静态域（非同源）下的，所以要想通过window.onerror捕获错误信息，就得按照上面的最后一种情况来操作了：

1、添加script的crossorigin属性

2、配置一下服务器，设置静态资源Javascript的Response为Access-Control-Allow-Origin

js捕获错误的更多相关文章

  1. Yii2 捕获错误日志

    在技术开发中,捕获程序框架错误,是非常必要的一件事情,我们公司使用Yii2框架,简单说下Yii2的错误捕获处理 Yii2 web应用 1 配置如下 其中errorHandler就是错误处理配置,执行E ...

  2. Node.js之错误处理与断言处理

    Node.js之错误处理与断言处理 1. 使用 domain 模块处理错误 try..catch 多用于捕捉同步方法中的抛出错误,但不能用try..catch捕捉异步方法中抛出de错误 如: 1 va ...

  3. Node.js之错误处理

    Node.js之错误处理 1. 使用 domain 模块处理错误 try..catch 多用于捕捉同步方法中的抛出错误,但不能用try..catch捕捉异步方法中抛出de错误 如: 1 var htt ...

  4. js基础——错误处理

    一:错误捕获 1.try-catch 语句(错误捕获) try{ //这里放置可能出现问题的代码 }catch(error){ //错误发生时执行的代码 console.log(error.name) ...

  5. js中错误处理机制

    1.基本知识 1. 错误对象 Error,SyntaxError,RangeError, ReferenceError,TypeError,URIError 上面的都是构造函数: new 命令可以生成 ...

  6. JS 捕获 input 中 键盘按键

    JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...

  7. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  8. eval 捕获错误

    eval 捕获错误: [root@dr-mysql01 ~]# cat t1.pl use DBI; my $dbUser='zabbix'; my $user="root"; m ...

  9. Error js内置错误 js处理错误流程 Throw语句

    Exceptional Exception Handling in JavaScript       MDN资料 Anything that can go wrong, will go wrong. ...

随机推荐

  1. 阿里云自定义镜像可以免费保存,ECS实例到期后自定义镜像手动快照不会被删除

    阿里云自定义镜像可以免费保存,ECS实例到期后自定义镜像手动快照不会被删除 4. ECS 实例释放后,自定义镜像是否还存在? 存在. 5. ECS 实例释放后,快照是否还存在? 保留手动快照,清除自动 ...

  2. Java 高级开发必修知识---内部类

    摘自:http://www.cnblogs.com/lsy131479/p/8798912.html Java 内部类分为: 1)成员内部类 2)静态嵌套类 3)方法内部类 4)匿名内部类 内部类的共 ...

  3. 为什么List.add()所增加的数据都是一样的

    1. 先上代码: List<Person> list = new ArrayList<>(); Person p = new Person(); try { Class.for ...

  4. 合并两个JsonArray

    //合并两个JSONArray public static String joinJSONArray(JSONArray mData, JSONArray array) { StringBuffer ...

  5. centos7.2 开机启动脚本

    vim ~/.bashrc 然后最后一行添加 source /etc/profile 一.添加开机自启服务 在CentOS 7中添加开机自启服务非常方便,只需要两条命令(以Jenkins为例):sys ...

  6. python简说（二十三）发邮件

    import yagmailusername='uitestp4p@163.com'password='houyafan123'#生成授权码,qq.163.126都是授权码 mail_server = ...

  7. zabbix配置短信告警

    zabbix版本:3.0.7 短信服务商:云片网 首先在云片网添加相应签名和模板 参照格式 签名:xxx告警 模板: [xxx告警]故障:#status# 服务器:#host# 发生:#trigger ...

  8. opencv学习之路（5）、鼠标和滑动条操作

    一.鼠标事件 #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespa ...

  9. Thinkphp5 分页带参数

    原文链接:http://www.zhaisui.com/article/51.html

  10. Bugku-CTF之web2-听说聪明的人都能找到答案

    Day1   听说聪明的人都能找到答案   http://123.206.87.240:8002/yanzhengma/