浅谈javaScript异常的捕获

浏览器

1.可疑区域增加 try...catch,无法处理异步代码
2.全局监控JS异常： window.onerror
3.全局监控静态资源异常： window.addEventListener
4.全局捕获没有 catch 的 promise 异常：unhandledrejection

window.addEventListener("unhandledrejection", function(e){
  // e.preventDefault(); // 阻止异常向上抛出
  console.log('捕获到异常：', e);
});
Promise.reject('promise error').then();

5.iframe 异常：window.error
6.VUE errorHandler 和 React componentDidCatch
7.监控网页崩溃：window 对象的 load 和 beforeunload

window.addEventListener('load', function () {
    sessionStorage.setItem('good_exit', 'pending');
    setInterval(function () {
        sessionStorage.setItem('time_before_crash', new Date().toString());
    }, 1000);
  });

  window.addEventListener('beforeunload', function () {
    sessionStorage.setItem('good_exit', 'true');
  });

  if(sessionStorage.getItem('good_exit') &&
    sessionStorage.getItem('good_exit') !== 'true') {
    /*
        insert crash logging code here
    */
    alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
  }

8.Script Error跨域 crossOrigin 解决

<script src="xxx.js" crossorigin></script>

nodejs

1.可疑区域增加 try…catch,无法处理异步代码

try {
  setTimeout(() => {
    throw new Error('error');
  })
} catch(e) {
  console.log('异常被捕获了，我现在还可以继续执行了');
  console.log(e);
}

2.使用event方式来处理异常

const events = require('events');

// 创建一个事件监听对象
const emitter = new events.EventEmitter();

// 监听error事件
emitter.addListener('error', (e) => {
  // 处理异常信息
  console.log(11122222); // 能打印 1112222 说明异常捕获到了
  console.log(e);
});

// 触发 error事件
emitter.emit('error', new Error('你代码出错了'))

3.callback的方式

const fs = require('fs');

fs.mkdir('/dir', (e) => {
  if (e) {
    console.log('异常信息处理');
    console.log(e);
  } else {
    console.log('创建目录成功');
  }
});

4.Promise方式
正常情况下,对于没有捕获的 promise的reject 会直接静默的吃掉.而这不是我们想要的.

new Promise((resolve, reject) => {
  throw new Error('error');
}).then(() => {
  // 。。。。
}).catch((e) => {
  console.log('能进来说明可以处理异常信息了');
  console.log(e);
});
//或者
process.on('unhandledRejection', (reason, p) => {
    console.log("Unhandled Rejection at: Promise ", p, " reason: ", reason);
    // application specific logging, throwing an error, or other logic here
});

5.Async/Await 方式

const testFunc = function() {
  return new Promise((resolve, reject) => {
    throw new Error('error');
  });
};

async function testAsync() {
  try {
    await testFunc();
  } catch (e) {
    console.log('能进来，说明异常能处理');
    console.log(e);
  }
}

testAsync();

6.process 方式(该方式可以处理所有异常)。

process.on('uncaughtException', (e) => {
  console.log('我能进来，说明可以处理异常');
  console.log(e);
});

function testFunc() {
  throw new Error('error');
}

testFunc();

7.domain 方式
domain也可以处理任何类型异常的信息，包含同步和异步。

const domain = require('domain');
const d = domain.create();

d.on('error', (e) => {
  console.log('我能进来，说明能处理异常');
  console.log(e);
});

d.run(() => {
  throw new Error('同步代码处理');
});