javascript的异常处理

先了解一下javascript原生的异常类型

1、SyntaxError //解析代码时发生的语法错误
2、ReferenceError //引用一个不存在的变量时发生的错误
3、RangeError //当一个值超出有效范围时发生的错误
4、TypeError //变量或参数不是预期类型时发生的错误
5、URIError //URI相关函数的参数不正确时抛出的错误
6、EvalError //eval函数没有被正确执行时，会抛出EvalError错误
7、Error：最普通的异常

Error对象

JavaScript原生提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例。Error对象的实例必须含有message属性，提示出错的信息：

var err = new Error('出错了');
err.message // "出错了"

此外，部分javascript引擎还提供了其他两个非标准的属性
1.name ： 错误名称
2.stack ： 错误的堆栈

自定义异常

除了上述提到的原生异常类型，javascript还允许我们自己定制异常，通过创建一个异常对象，然后让其继承Error对象即可

function newError(message){
  this.message = message;
  this.name = "newError";
}
newError.prototype = new Error();
newError.prototype.constructor = newError;
var demo = new newError("自定义异常");

try-catch结构

try {
  //...
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log(e.stack);
}

try语句内存放的是需要检测异常的代码段，catch代码块捕获错误之后，程序不会中断，会按照正常流程继续执行下去。
比如：

openFile();
try{
  writeFile(); //检测函数运行是否异常
}catch(e){
  handleError(e); //捕获到异常后处理
}

try-catch-finally结构

引入finally的目的是为了让代码更加健壮，finally内的代码段是必须执行的部分，不过在代码运行出现异常和没有异常的场合下执行的方式不同：假如try语句内代码未出现异常，那么正常执行finally内的代码段；如果出现了异常，那么先执行catch内的异常处理，后执行finally内的语句。
接着上面的例子：

openFile();
try{
  writeFile(); //检测函数运行是否异常
}catch(e){
  handleError(e); //捕获到异常后处理
}finally{
  closeFile();
}

注意：如果catch内含有return，那么出现异常时先执行catch内位于return之前的代码，catch内return语句后的代码不会执行，然后跳转到finally。

抛出异常-throw

throw语句的作用是中断程序执行，抛出一个意外或错误。它接受一个表达式作为参数，可以抛出各种值。

function throwIt(exception) {
 try {
   throw exception;
 } catch (e) {
   console.log('Caught: '+ e);
 }
}

throwIt(3);
// Caught: 3
throwIt('hello');
// Caught: hello
throwIt(new Error('An error happened'));
// Caught: Error: An error happened

加入判断语句：

var n = 100;

try {
  throw n;
} catch (e) {
  if (e <= 50) {
    // ...
  } else {
    throw e;
  }
}

catch在捕获到throw抛出的异常后，还是按照原本方式执行

异常类型的检测

上述我们已经有了在try-catch语句内加入判断的例子，生活中有时我们需要针对不同的异常做不同的处理，就可以借鉴前面的方式。

try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    console.log(e.name + ": " + e.message);
  } else if (e instanceof RangeError) {
    console.log(e.name + ": " + e.message);
  }
  // ...
}

全局异常处理window.onerror

上述提到的try-catch(finally)结构只适合在代码块内执行，无法做到全局异常检测，window.onerror可以做到。
结构：

window.onerror = function (message, source, lineno, colno, error) { }

message：异常信息（字符串）
source：发生异常的脚本URL（字符串）
lineno：发生异常的行号（数字）
colno：发生异常的列号（数字）
error：Error对象（对象）

兼容性：IE9及以下只支持前面3个参数
Chrome 13+
Firefox 6.1+
Safari 5.1+
Opera 11.61+
IE10+
都支持全部

try {
    setTimeout(() => {
        throw new Error("some message");
    }, 0);
} catch (err) {
    console.log(err);
}
/*******/
window.onerror = (msg, url, line, col, err) => {
    console.log(err);
}
setTimeout(() => {
    throw new Error("some message");
}, 0);
// Error: some message

列出一个window.onerror的兼容性写法：

window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
    var errorStr = '', error = {};
    error.errorMessage = errorMessage;
    error.scriptURI = scriptURI;
    error.lineNumber = lineNumber;
    error.columnNumber = columnNumber || '';
    error.errorObj = errorObj || '';
    error.userAgent = window.navigator.userAgent;
    error.pageUrl = window.location.href;
    errorStr = ' errorMessage: ' + error.errorMessage + '\n scriptURI: ' + error.scriptURI
                + '\n lineNumber: ' + error.lineNumber + '\n columnNumber: ' + error.columnNumber
                + '\n errorDescription: ' + error.errorDescription + '\n userAgent: ' + error.userAgent
                + '\n pageUrl: ' + error.pageUrl;
    
    console.log(errorStr);
    new Image().src = '/errorLog/index';
}

在chrome中，window.onerror能检测从别的域引用的脚本文件中的异常，并且将这些异常标记为Script error，如果不想处理其他域的脚本文件，可以在代码中用Script error标记将其过滤。然而如果异常被try-catch包裹，chrome也无法检测到异常。在其他浏览器中不会引入跨域js异常，也只能获取到一个简单的 Script Error信息，没有什么实际意义。

解决方案：

1.给应用内所需的<script>标签添加 crossorigin 属性，比如：<script type=”text/javascript” src=”/error.js” crossorigin></script>；
2.在 js 所在的 cdn 服务器上添加 Access-Control-Allow-Origin: *HTTP 头；
3.使用 throw new Error(“error message here”)。

<script>
    window.onerror = function () {
        console.log(arguments)
        return true;
    }
    throw new Error('show error');
</script>

Paste_Image.png

值得一提的是，页面中可能有好几个 script 标签， window.onerror 这个错误监听一定要放到最前头，否则将监听不到错误。如果将throw new Error放前头，throw new Error('show error');将直接报错，也就无法往下执行

参考：http://javascript.ruanyifeng.com/grammar/error.html
https://segmentfault.com/a/1190000011481099#articleHeader4
https://github.com/hawx1993/tech-blog/issues/13
http://www.frontfans.com/archives/139
http://caibaojian.com/toutiao/7963