手动上报错误

  • Sentry 的 SDK 会自动上报错误、未捕获的异常和 unhandled rejections 以及其他类型的错误。
  • 对于未捕获的异常，我们可以手动上报。 官方文档
    ```javascript import * as Sentry from “@sentry/react”;

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

  2. -  我们同样可以在 `Sentry管理界面 -> Issues` 中查看手动上报的异常 
  3. -  另外我们还可以手动上报一些纯文本信息  
  4. ```javascript
  5. Sentry.captureMessage("Something went wrong");

设置上报等级

  • 我们可以对上报的信息定义等级，主要包括: 

    1. export declare enum Severity {
    2. Fatal = "fatal",
    3. Error = "error",
    4. Warning = "warning",
    5. Log = "log",
    6. Info = "info",
    7. Debug = "debug",
    8. Critical = "critical"
    9. }

  • 手动上报错误定义 level 

    1. try {
    2. aFunctionThatMightFail();
    3. } catch (err) {
    4. Sentry.captureException(err, {
    5.  level: Sentry.Severity.Warning,
    6. });
    7. }

  • 手动上报纯文本定义 level 

    1. Sentry.captureMessage("this is a debug message", Sentry.Severity.Warning);

  • 定义一个范围，在范围内容统一定义 level 

    1. Sentry.configureScope(function(scope) {
    2. scope.setLevel(Sentry.Severity.Warning);
    3. aFunctionThatMightFail();
    4. bFunctionThatMightFail();
    5. });

Sentry错误边界组件

Sentry提供了错误边界组件，当 react 组件发生错误，可以上报相关信息

  • 使用 Sentry.ErrorBoundary 组件
    ```jsx // index.js const App = () => { return ( <> { error && new Error(‘error’) } </> ); } const WithSentryErrorBoundaryApp = () => { return ( error boundary error} showDialog> ); }

ReactDOM.render( , document.getElementById(‘root’) );

  2.    -  点击按钮，页面会展示 `fallback` 内容，并且弹出反馈弹窗，向 `Sentry` 提交反馈，反馈内容可以在 `Sentry管理界面` 的 `User Feedback` 中查看 
  3.    -  而在 `Sentry管理界面` 的 `Issues` 中，我们可以看到上报了名称为 `Error` 错误，他的描述是以 `React ErrorBoundary Error` 开头的<br />![](../img/react-errorBoundary-error.jpg#crop=0&crop=0&crop=1&crop=1&id=mAKYH&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  4. -  也可以使用Sentry提供的高阶组件 `withErrorBoundary` 实现同样效果  
  5. ```jsx
  6. const WithSentryApp = Sentry.withErrorBoundary(App, { fallback: <p>an error has occurred</p>, showDialog: true });

image.png
image.png

集成 redux

  • 安装 redux 

    1. npm i redux -S

  • 集成 redux
    通过 sentryReduxEnhancer 中的 actionTransformer 和 stateTransformer 过滤不需要在sentry管理界面中展示的 action 和 state
    ```typescript // index.js import React from ‘react’; import ReactDOM from ‘react-dom’;

import * as Sentry from ‘@sentry/react’; import { Integrations } from ‘@sentry/tracing’;

import { createStore } from ‘redux’;

Sentry.init({ dsn: “http://c96e4ce910524463a4e6a655a7eb054f@10.10.8.46:9000/3“, environment: ‘localhost’, integrations: [new Integrations.BrowserTracing()], tracesSampleRate: 1.0, release: ‘0.0.1’, });

const initialState = { a: ‘init’, b: ‘init’, c: ‘init’, };

const rootReducer = (state = initialState, action) => { if (action.type === ‘SET_A’) { return { …state, a: ‘a_changed’, } } if (action.type === ‘SET_B’) { return { …state, b: ‘b_changed’, } } if (action.type === ‘SET_C’) { return { …state, c: ‘c_changed’, } } return state; }

const sentryReduxEnhancer = Sentry.createReduxEnhancer({ actionTransformer: action => { if (action.type === ‘SET_B’) { return null; } return action; }, stateTransformer: state => { return { …state, c: null, } }, });

const store = createStore( rootReducer, sentryReduxEnhancer, );

const App = () => { function fn() { console.log(window.a.b); // axios.get(‘/dddd’).catch(() => {}); } return ( <> </> ); }

ReactDOM.render( , document.getElementById(‘root’) );

  2. -  访问 `localhost:9000`，有4个按钮 `dispatch SET_A`、`dispatch SET_B`、`dispatch SET_C`、`Break the world`，依次点击，则报错 
  3. -  在 `Sentry管理界面 -> issues`菜单中找到刚才错误上报详情 
  4. -  在 `BREADCRUMBS` 中，可以看到有三条 `redux` 相关的 `CATEGORY`，分别表示 `redux init`、`dispatch SET_A`、`dispatch SET_C`。`dispatch SET_B`没有，是因为在 `actionTransformer` 中将其过滤掉了<br />![](../img/redux.jpg#crop=0&crop=0&crop=1&crop=1&id=ZhV8c&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  5. -  页面往下翻，可以看到 `REDIX.STATE` 中记录了报错前最后的 `state`，有 `a`、`b` 值，但没有 `c` 的值，是因为在 `stateTransformer` 中过滤了 `c` 的值<br />![](../img/redux-state.jpg#crop=0&crop=0&crop=1&crop=1&id=fgvI6&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  6. -  [官方文档](https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/redux/) 
  8. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/735369/1637738174199-2c5a4312-7379-4a98-813a-b244941918c0.png#clientId=u08d95270-cdf7-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=642&id=uf688957d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1284&originWidth=2880&originalType=binary&ratio=1&rotation=0&showTitle=false&size=508175&status=done&style=none&taskId=u0773138a-45f7-4d8a-a695-d4860d288a8&title=&width=1440)
  9. <a name="DohcI"></a>
  10. # `rrweb` 重播
  12. `rrweb` 是一个开源的 `Web` 会话回放库，它提供易于使用的 `API` 来记录用户的交互并远程回放。
  14. 可以记录鼠标移动轨迹、交互动作和页面变化，并播放。
  16. `@sentry/rrweb` 是 `rrweb` 的 `sentry` 插件。
  18. -  安装  
  19. ```bash
  20. npm install -S @sentry/rrweb rrweb
  • 使用
    ```javascript import SentryRRWeb from ‘@sentry/rrweb’;

Sentry.init({ integrations: [ new SentryRRWeb({ checkoutEveryNms: 10 1000, // 每10秒重新制作快照 checkoutEveryNth: 200, // 每 200 个 event 重新制作快照 maskAllInputs: false, // 将所有输入内容记录为 }), ], }); ```

  • 在页面中点击各个按钮，直到报错，在 Sentry管理界面 -> Isseues 中找到相关错误详情，在页面最底部有一个 REPLAY 模块，点击播放可以回放错误发生前的一系列操作
  • 查看效果
    错误边界 - 图3 image.png