详解JavaScript错误捕获和上报流程

时间 2019-11-21

标签详解 javascript 错误捕获上报流程栏目 JavaScript 繁體版

原文原文链接

怎么捕获错误而且处理，是一门语言必备的知识。在JavaScript中也是如此。javascript

那怎么捕获错误呢？初看好像很简单，try-catch就能够了嘛！可是有的时候咱们发现状况却繁多复杂。java

Q1: 同步能够try-catch,但一个异步回调，好比setTimeOut里的函数还能够try-catch吗？node
Q2: Promise的错误捕获怎么作？webpack
Q3: async/await怎么捕获错误？web
Q4: 我可以在全局环境下捕获错误而且处理吗？npm
Q5: React16有什么新的错误捕获方式吗？promise
Q6: 捕获以后怎么上报和处理？异步

问题有点多，咱们一个一个来。async

Q1. 同步代码里的错误捕获方式

在同步代码里，咱们是最简单的，只要try-catch就完了 ide

function test1 () {
  try {
    throw Error ('callback err');
  } catch (error) {
    console.log ('test1:catch err successfully');
  }
}
test1();

输出结果以下，显然是正常的

Q2. 普通的异步回调里的错误捕获方式（Promise时代之前）

上面的问题来了，咱们还能经过直接的try-catch在异步回调外部捕获错误吗？咱们试一试

// 尝试在异步回调外部捕获错误的结果
function test2 () {
  try {
    setTimeout (function () {
      throw Error ('callback err');
    });
  } catch (error) {
    console.log ('test2:catch err successfully');
  }
}
test2();

输出

注意这里的Uncaught Error的文本，它告诉咱们错误没有被成功捕捉。

为何呢？由于try-catch的是属于同步代码，它执行的时候，setTimeOut内部的的匿名函数尚未执行呢。而内部的那个匿名函数执行的时候，try-catch早就执行完了。（ error的心里想法：哈哈，只要我跑的够慢，try-catch仍是追不上我！）

可是咱们简单想想，诶咱们把try-catch写到函数里面不就完事了嘛！

function test2_1 () {
  setTimeout (function () {
    try {
      throw Error ('callback err');
    } catch (error) {
      console.log ('test2_1:catch err successfully');
    }
  });
}
test2_1();

输出结果以下，告诉咱们这方法可行

总结下Promise时代之前，异步回调中捕获和处理错误的方法

在异步回调内部编写try-catch去捕获和处理，不要在外部哦
不少异步操做会开放error事件，咱们根据事件去操做就能够了

Q3. Promise里的错误捕获方式

可经过Promise.catch方法捕获

function test3 () {
  new Promise ((resolve, reject) => {
    throw Error ('promise error');
  }).catch (err => {
    console.log ('promise error');
  });
}

输出结果

>> reject方法调用和throw Error均可以经过Promise.catch方法捕获

function test4 () {
  new Promise ((resolve, reject) => {
    reject ('promise reject error');
  }).catch (err => {
    console.log (err);
  });
}

输出结果

>> then方法中的失败回调和Promise.catch的关系

若是前面的then方法没写失败回调，失败时后面的catch是会被调用的
若是前面的then方法写了失败回调，又没抛出，那么后面的catch就不会被调用了

// then方法没写失败回调
function test5 () {
  new Promise ((resolve, reject) => {
    throw Error ('promise error');
  })
    .then (success => {})
    .catch (err => {
      console.log ('the error has not been swallowed up');
    });
}
// then方法写了失败回调
function test5 () {
  new Promise ((resolve, reject) => {
    throw Error ('promise error');
  })
    .then (success => {},err => {})
    .catch (err => {
      console.log ('the error has not been swallowed up');
    });
}

输出分别为

1.the error has not been swallowed up

2.无输出

Q4.async/await里的错误捕获方式

对于async/await这种类型的异步，咱们能够经过try-catch去解决

async function test6 () {
  try {
    await getErrorP ();
  } catch (error) {
    console.log ('async/await error with throw error');
  }
}
 
function getErrorP () {
  return new Promise ((resolve, reject) => {
    throw Error ('promise error');
  });
}
test6();

输出结果以下

>> 若是被await修饰的Promise由于reject调用而变化，它也是能被try-catch的

（我已经证实了这一点，可是这里位置不够，我写不下了）

Q5.在全局环境下如何监听错误

window.onerror能够监听全局错误，可是很显然错误仍是会抛出

window.onerror = function (err) {
  console.log ('global error');
};
throw Error ('global error');

输出以下

Q6.在React16以上如何监听错误

>> componentDidCatch和getDerivedStateFromError钩子函数

class Bar extends React.Component {
  // 监听组件错误
  componentDidCatch(error, info) {
    this.setState({ error, info });
  }
  // 更新 state 使下一次渲染可以显示降级后的 UI
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  render() {
  }
}

有错误，那确定要上报啊！不上报就发现不了Bug这个样子。Sentry这位老哥就是我的才，日志记录又好看，每次见面就像回家同样

Sentry简单介绍

Sentry provides open-source and hosted error monitoring that helps all software
teams discover, triage, and prioritize errors in real-time.
One million developers at over fifty thousand companies already ship
better software faster with Sentry. Won’t you join them?
—— Sentry官网

Sentry是一个日志上报系统，Sentry 是一个实时的日志记录和汇总处理的平台。专一于错误监控，发现和数据处理，可让咱们再也不依赖于用户反馈才能发现和解决线上bug。让咱们简单看一下Sentry支持哪些语言和平台吧

在JavaScript领域，Sentry的支持也能够说是面面俱到

参考连接
https://docs.sentry.io/platforms/

Sentry的功能简单说就是，你在代码中catch错误，而后调用Sentry的方法，而后Sentry就会自动帮你分析和整理错误日志，例以下面这张图截取自Sentry的网站中

在JavaScript中使用Sentry

1.首先呢，你固然要注册Sentry的帐号

这个时候Sentry会自动给你分配一个惟一标示，这个标示在Sentry里叫作 dsn

2. 安卓模块并使用基础功能

安装@sentry/browser

npm install @sentry/browser

在项目中初始化并使用

import * as Sentry from '@sentry/browser';
 
Sentry.init ({
  dsn: 'xxxx',
});
 
try {
  throw Error ('我是一个error');
} catch (err) {
    // 捕捉错误
  Sentry.captureException (err);
}

3.上传sourceMap以方便在线上平台阅读出错的源码

// 安装
$ npm install --save-dev @sentry/webpack-plugin
$ yarn add --dev @sentry/webpack-plugin
 
// 配置webpack
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
module.exports = {
  // other configuration
  plugins: [
    new SentryWebpackPlugin({
      include: '.',
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'webpack.config.js'],
      configFile: 'sentry.properties'
    })
  ]
};

4. 为何不是raven.js?

// 已经废弃，虽然你仍是能够用
var Raven = require('raven-js');
Raven
  .config('xxxxxxxxxxx_dsn')
  .install();

Sentry的核心功能总结

捕获错误

try { aFunctionThatMightFail(); } catch (err) { Sentry.captureException(err); }

设置该错误发生的用户信息

下面每一个选项都是可选的，但必须存在一个选项才能使Sentry SDK捕获用户： id

Sentry.setUser({
    id:"penghuwan12314"
  email: "penghuwan@example.com",
  username:"penghuwan",
  ip_addressZ:'xxx.xxx.xxx.xxx'
  });

设置额外数据

Sentry.setExtra("character_name", "Mighty Fighter");

设置做用域

Sentry.withScope(function(scope) {
    // 下面的set的效果只存在于函数的做用域内
  scope.setFingerprint(['Database Connection Error']);
  scope.setUser(someUser);
  Sentry.captureException(err);
});
// 在这里，上面的setUser的设置效果会消失

设置错误的分组

整理日志信息，避免过分冗余

Sentry.configureScope(function(scope) {
  scope.setFingerprint(['my-view-function']);
});

设置错误的级别

在阅读日志时能够肯定各个bug的紧急度，肯定排查的优先书序

Sentry.captureMessage('this is a debug message', 'debug');
//fatal，error，warning，info，debug五个值
// fatal最严重,debug最轻

自动记录某些事件

例以下面的方法，会在每次屏幕调整时完成上报

window.addEventListener('resize', function(event){
  Sentry.addBreadcrumb({
    category: 'ui',
    message: 'New window size:' + window.innerWidth + 'x' + window.innerHeight,
    level: 'info'
  });
})

Sentry实践的运用

根据环境设置不一样的dsn

let dsn;
  if (env === 'test') {
    dsn = '测试环境的dsn';
  } else {
    dsn =
      '正式环境的dsn';
  }
 
Sentry.init ({
  dsn
});