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

近日，一位玩家反馈在玩2048游戏时遇到了问题，游戏打开后无法正常运行，只有游戏面板显示，数字无法初始化，也无法移动。设备是iPhone 4S，操作系统是iOS 5.1。尝试通过微信调起Safari打开游戏，问题依然存在。由于游戏中使用了大量的HTML5特性，因此我猜测可能是JS报错导致的。那么，如何捕获这种错误信息呢？答案是使用window.onerror。

window.onerror是一个强大的方法，可以用来捕获JavaScript中的错误。它的参数包括错误信息、出错的文件、出错代码的行号、出错代码的列号以及错误的详细信息。我们可以这样定义window.onerror函数：

```javascript

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

// TODO

}

```

在使用过程中，需要注意兼容性问题。不是所有浏览器都会提供所有参数，但像Chrome这样的浏览器通常会遵循浏览器标准草案，因此这些参数可以放心使用。

为了测试这个方法，我们可以写一个小Demo。下面是一个简单的HTML页面，其中包含了一个使用window.onerror的脚本：

```html

```

在error.js文件中，我们可以简单地写一句来触发错误：

```javascript

throw new Error("出错了！");

```

当您在浏览器中运行这个页面并打开控制台时，您会看到上述的window.onerror函数捕获到的错误信息。这样，我们就可以将捕获到的数据上报了。需要注意的是，如果error.js文件不在和html页面同一域名下，window.onerror将无法捕获到完整的错误信息。在这种情况下，我们只会得到一个固定的errorMessage，缺乏参考价值。确保脚本的跨域策略正确设置是非常重要的。经过深入研究资料，我发现了浏览器在处理脚本资源加载时，会进行同源策略的判断。如果尝试加载非同源的资源，错误信息会被固定为“Script error”，无法获取详细的错误详情。这给我们的开发调试带来了不小的困扰。

幸运的是，script标签有一个名为crossorigin的属性。通过设置这个属性，我们可以获取到更详细的错误信息。例如，将script标签修改如下：

```html

```

刷新页面后，我们可以在浏览器的控制台(console)看到更详细的错误信息输出。不过要注意，使用crossorigin属性时，需要在服务器上进行相应的配置，让该资源允许跨域访问。为了方便配置，我们将原本的error.js改名为error-js.php。然后在PHP文件中设置HTTP响应头：

```php

header('Access-Control-Allow-Origin: '); // 允许所有来源访问

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

throw new Error('出错了');

?>

```

这样设置后，再次刷新页面，控制台中的错误信息输出就正常了，我们可以正常捕获所有的错误信息。这对于我们开发过程中调试问题非常有帮助。

以我的2048游戏为例，静态资源是放在静态域（非同源）下的。如果想要通过window.onerror捕获错误信息，就需要按照上述步骤操作：

1. 在引入脚本的script标签中添加crossorigin属性；

2. 配置服务器，设置静态资源JavaScript的响应头为Access-Control-Allow-Origin。这样就可以确保我们能够获取到详细的错误信息，方便我们进行问题定位和调试。用cambrian.render('body')结束技术细节的分析和分享。