阿颛

V1

2022/05/27阅读:24主题:橙心

Sentry分享

Sentry

Sentry简介

Sentry 是一个开源的实时错误监控的项目,它支持很多端的配置,也可以应用到各种不同的框架上面,Sentry可以帮助有效的及时的排查到线上的问题,及时进行上报到平台,开发人员就可以根据错误信息收集平台快速定位到问题代码,进行修改,甚至于可以避免在客户发现bug之前修复掉一些隐藏问题

前端错误

分类

  • 代码错误
  • 资源加载错误

错误捕获

代码运行报错

当 JS 运行时错误发生时,window 会触发一个 ErrorEvent 接口的 error 事件,并执行window.onerror()

静态资源加载错误

静态资源加载错误抛出我们可以通过给标签添加onerror方法来进行监听

<script>
  function errorHandler(error{
    console.log("捕获到静态资源加载异常", error);
  }
</script>
<script src="http://cdn.xxx.com/js/test.js" onerror="errorHandler(this)"></script>
<link rel="stylesheet" href="http://cdn.xxx.com/styles/test.css" onerror="errorHandler(this)">

但是这样是需要给每一个静态资源的标签加上onerror方法,较为繁琐,我们可以通过另外一种方式来实现。

  window.addEventListener('error', (error) => {
    console.log('捕获到异常:', error);
  }, true)

Promise 异常

Promise 中的异常不能被 try-catch 和 window.onerror 捕获,当然也有对应的方法进行监听。

window.onunhandledrejection = function(){
  console.log(arguments'onunhandledrejection-args');
}

React 异常

React 处理异常的方式不同,React 实现了所谓的错误边界。错误边界是 React 组件,它“捕获子组件树中的任何地方的 JavaScript 错误”,同时还记录错误并显示回退用户界面。组件生命周期中有提供componentDidCatch这样的一个方法。我们可以基于此简单实现一个错误抛出组件。

// 声明
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasErrorfalseinfo"" };
  }

  componentDidCatch(error, info) {
    this.setState({ hasErrortrueinfo: info });
  }

  render() {
    if (this.state.hasError) {
      return <h1>{{ this.state.info }}</h1>;
    }
    return this.props.children;
  }
}

// 使用
<ErrorBoundary>
  <App />
</ErrorBoundary>

Sentry上报

通过前面的错误捕获方式,我们很容易能想到sentry的上报错误方式,那么其实也就是捕获错误方法进行拦截错误信息,将信息上报至对应地址的平台。 通过Sentry一处源码部分我们可以看到,对onerror进行了重写。

GlobalHandlers.prototype._installGlobalOnErrorHandler = function ({
 this._oldOnErrorHandler = this._global.onerror;
 this._global.onerror = function (msg, url, line, column, error{
   // sentry额外的一些操作
 }
}

sentry在react中的使用

  • 安装依赖"@sentry/react"
  • 初始化配置
    // 项目入口文件内初始化 sentry
    import * as Sentry from "@sentry/react";

    Sentry.init({ dsn"https://" });
  • 根组件用sentry内置ErrorBoundary组件包裹
function App({
  return (
    <Sentry.ErrorBoundary fallback={<div>div</div>}>
      <div className="App">
        <Test />
      </div>
    </Sentry.ErrorBoundary>

  );
}

总结

此次分享主要介绍了一下几种前端的错误,以及捕获,当然sentry的捕获上报原理就是基于他们。当然Sentry平台的功能监控远不止简单的错误捕获以及展示,它还提供了比如对接口情况的监控,可以下次进行一个分享

分类:

前端

标签:

前端

作者介绍

阿颛
V1