处理JavaScript异常的正确姿式

译者按： 错误是没法避免的，妥善处理它才是最重要的！

• 原文: A Guide to Proper Error Handling in JavaScript Related Topics:
• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。

若是你相信墨菲定律的话，任何事情若是会出问题，那么就必定会出问题。对于代码，即便咱们有100%的自信没有问题，依然有可能出问题。在这篇文章，咱们来研究如何处理JavaScript的错误。我会先介绍坏的处理方式、好的处理方式，最终介绍异步代码和Ajax。

我的感受，事件驱动的编程设计使得JavaScript语言很是的丰富灵活。咱们设想浏览器就是事件驱动机器，错误一样由它的驱动产生。当一个错误触发，致使某个事件被抛出。从理论上说，错误在JavaScript中就是事件。

若是你对此感到陌生，那么暂且无论它。在这篇文章中，我主要关注浏览器端的JavaScript。

这篇文章基于JavaScript中的错误处理部分的概念。若是你还不熟悉，我建议你先阅读一下。

Demo演示

咱们使用的Demo能够在GitHub下载，程序运行起来会呈现以下页面：

误，抛出TypeError。下面是该模块的定义：

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

在error()中定义了一个空对象foo，所以调用foo.bar()会由于未被定义而报错。咱们使用单元测试来验证一下：

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

咱们使用了Mocha配合Should.js作单元测试。

当你克隆了代码库并安装了依赖包之后，你能够使用npm t来执行测试。固然，你也能够执行某个测试文件，好比：./node_modules/mocha/bin/mocha tests/scripts/errorTest.js

相信我，像JavaScript这样的动态语言来讲，无论谁都很容易遇到这样的错误。

坏的处理方式

我已经将按钮对应的处理事件函数抽象得简单一点，以下所示：

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

badHandler接收一个fn做为回调函数，该回调函数在badHandler中被调用。咱们编写相应的单元测试：

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});

你会发现，若是出现异常，badHandler只是简单的返回null。若是配合完整的代码，你会发现问题所在：

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));

若是出错的时候将其try-catch，而后仅仅返回null，我根本找不到哪里出错了。这种安静失败(fail-silent)策略可能致使UI紊乱也可能致使数据错乱，而且在Debug的时候可能花了几个小时却忽略了try-catch里面的代码才是致祸根源。若是代码复杂到有多层次的调用，简直不可能找到哪里出了错。所以，咱们不建议使用安静失败策略，咱们须要更加优雅的方式。

不坏但很烂的方式

// scripts/uglyHandler.js

function uglyHandler(fn) {
  try {
    return fn();
  } catch (e) {
    throw new Error('a new error');
  }
}

它处理错误的方式是抓到错误e，而后抛出一个新的错误。这样作的确优于以前安静失败的策略。若是出了错，我能够一层层找回去，直到找到本来抛出的错误e。简单的抛出一个Error('a new error')信息量比较有限，不精确，咱们来自定义错误对象，传出更多信息：

// scripts/specifiedError.js

// Create a custom error
var SpecifiedError = function SpecifiedError(message) {
  this.name = 'SpecifiedError';
  this.message = message || '';
  this.stack = (new Error()).stack;
};

SpecifiedError.prototype = new Error();
SpecifiedError.prototype.constructor = SpecifiedError;

// scripts/uglyHandlerImproved.js

function uglyHandlerImproved(fn) {
  try {
    return fn();
  } catch (e) {
    throw new SpecifiedError(e.message);
  }
}

// tests/scripts/uglyHandlerImprovedTest.js

it('returns a specified error with errors', function () {
  var fn = function () {
    throw new TypeError('type error');
  };

  should.throws(function () {
    uglyHandlerImproved(fn);
  }, SpecifiedError);
});

如今，这个自定义的错误对象包含了本来错误的信息，所以变得更加有用。可是由于再度抛出来，依然是未处理的错误。

截获异常

一个思路是对全部的函数用try...catch包围起来：

function main(bomb) {
  try {
    bomb();
  } catch (e) {
    // Handle all the error things
  }
}

可是，这样的代码将会变得很是臃肿、不可读，并且效率低下。是否还记得？在本文开始咱们有提到在JavaScript中异常不过也是一个事件而已，幸运的是，有一个全局的异常事件处理方法(onerror)。

// scripts/errorHandlerDom.js

window.addEventListener('error', function (e) {
  var error = e.error;
  console.log(error);
});

获取堆栈信息

你能够将错误信息发送到服务器：

// scripts/errorAjaxHandlerDom.js

window.addEventListener('error', function (e) {
  var stack = e.error.stack;
  var message = e.error.toString();

  if (stack) {
    message += '\n' + stack;
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/log', true);
  // Fire an Ajax request with error details
  xhr.send(message);
});

为了获取更详细的报错信息，而且省去处理数据的麻烦，你也能够使用fundebug的JavaScript监控插件三分钟快速接入bug监控服务。

下面是服务器接收到的报错消息：

若是你的脚本是放在另外一个域名下，若是你不开启CORS，除了Script error.，你将看不到任何有用的报错信息。若是想知道具体解法，请参考：Script error.全面解析。

异步错误处理

因为setTimeout异步执行，下面的代码异常将不会被try...catch捕获：

// scripts/asyncHandler.js

function asyncHandler(fn) {
  try {
    // This rips the potential bomb from the current context
    setTimeout(function () {
      fn();
    }, 1);
  } catch (e) { }
}

try...catch语句只会捕获当前执行环境下的异常。可是在上面异常抛出的时候，JavaScript解释器已经不在try...catch中了，所以没法被捕获。全部的Ajax请求也是这样。

咱们能够稍微改进一下，将try...catch写到异步函数的回调中：

setTimeout(function () {
  try {
    fn();
  } catch (e) {
    // Handle this async error
  }
}, 1);

不过，这样的套路会致使项目中充满了try...catch，代码很是不简洁。而且，执行JavaScript的V8引擎不鼓励在函数中使用try...catch。好在，咱们不须要这么作，全局的错误处理onerror会捕获这些错误。

结论

个人建议是不要隐藏错误，勇敢地抛出来。没有人会由于代码出现bug致使程序崩溃而羞耻，咱们可让程序中断，让用户重来。错误是没法避免的，如何去处理它才是最重要的。

版权声明:
转载时请注明做者Fundebug以及本文地址：
https://blog.fundebug.com/201...