一、为什么需要前端监控

在日常研发工作中，完成了功能特性的开发后，在通过了研发自测、QA验证后才准许上线运行。但是即使在各种测试环节的加持下，我们还是很难保证上线的软件是bug-free的，因为在测试环节很难做到100%覆盖，而且用户也不会总是按照我们所预期的进行操作，在上线后也会出现一些意料不到的问题。

想要减少线上的问题，一种就是从源头上解决，通过加强对前期需求的评审- 提升需求质量、增加技术方案的复议- 提升工程师开发质量，减少产生bug的可能性；另一种就是快速试错、小步迭代，短平快的给用户推送新的功能feature，通过被动和主动的手段，发现用户使用软件过程中遇到的问题，快速解决用户的问题，迭代软件给功能。这里的被动的手动比如是用户的反馈机制，比如工单系统、或者是开源社区的issue讨论区；而主动的手动就是监控工具的使用，在保证用户隐私的前提下，在对用户使用的软件中插入监控代码，主动收集并上报用户软件中产生的报错，监控系统在采集到报错信息后可以通知给对应的研发人员，方便研发人员主动发现并修复问题，减少用户负反馈，提升用户使用软件的体验。

由于端特性的问题(后端软件通常运行在中心化的服务器上而前端软件通常运行在客户的终端上)，前端遇到的问题可能性更大（由于设备的异构特性导致，同样一份代码可能在不同版本的浏览器上运行效果不同、在不同的浏览器上运行效果也不一致、在不同终端效果也不可能不一致）、排查难度更大（由于前端软件运行在客户的终端上，涉及到客户的隐私，想要debug难上加难， 连续debug几次客户可能对软件就开始产生怀疑）。因此对于前端软件而言，更需要一套监控系统，可以帮助我们主动上报客户问题、复现并解决客户问题。

二、常见前端监控手段

这里的前端监控手段的范围主要指的是web前端，实际上native软件的监控思路大同小异，都是利用语言的特性实现逻辑无关的异常捕获并上报的机制。随着Electron、RN等技术方案的普及，web前端的监控的适用的范围更广。

在前端领域，常见的错误捕获的方式如下：

• try-catch:在javascript中最常见的异常捕获机制就是try-catch代码块：

  try {
      let name = 'karmada-bot';
      console.log(nam);
  } catch (e) {
      console.log('capture error', e)
  }
  

  对应报错如下：

  

• 监听error事件: 全局兜底错误捕获，当js代码抛错时会触发:

  window.addEventListener('error', function (e) {
      console.log('error', e)
  })
  // 执行会抛出异常的方法
  a.xxx()
  

  报错如下：

  

  需要注意以下两点:

  1. 如果手动使用try-catch捕获错误，那么window的error事件就不会触发，可以理解为错误冒泡被阻止了。

  2. 资源（js，css，img）的加载失败，不会触发window的error事件，而是触发它们自己的error事件。想要监听资源加载失败可以按照如下形式实现：

     var script = document.createElement('script');
     script.src = 'path/to/your/script.js';
     script.addEventListener('error', function (e) {
         console.log('Script加载失败: ' + e.target.src);
     });
     document.head.appendChild(script);
     

     报错信息如下：

     

• 监听unhandledrejection事件: 当Promise被reject且没有reject处理器的时候，会触发unhandledrejection事件

  new Promise((resolve, reject) => {
  	setTimeout(() => {
  		reject('not Found')
  	},1000)
  });
  window.addEventListener('unhandledrejection', event => {
  	console.log(event)
  })
  

三、什么是Sentry & 为什么选择Sentry?

<aside> 💡

Sentry is a developer-first error tracking and performance monitoring platform.

</aside>

Sentry 是一个支持错误捕获、应用性能监的平台。利用Sentry可以搜集到客户端非常详细的信息，对于我们排查线上bug非常有帮助。

类似于Sentry的平台：

• BugSnag
• RollBar
• fundebug