👩🏼‍💼 🧑🏽 🤛🏻 前端React应用中的Sentry远程错误监控 🔺 👌🏼 👨🏾‍🎤

我们正在探索将Sentry与React结合使用。

本文是从一个Sentry错误消息开始的系列文章的一部分，其中包括一个示例：第1部分。

反应实施

首先，我们需要为此应用程序添加一个新的Sentry项目。从哨兵网站。在这种情况下，我们选择React。

我们将在React应用程序中重新实现两个按钮Hello和Error。我们首先创建启动程序：

npx create-react-app react-app

然后，我们导入Sentry包：

yarn add @sentry/browser

并初始化它：

react-app / src / index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

观察结果：

在开发期间，我们还有其他监视问题的机制，例如控制台，因此我们仅启用Sentry进行生产装配

然后，我们实现Hello和Error按钮，并将它们添加到应用程序中：

react-app / src / Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app / src / MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

react-app / src / App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

问题（源映射）

我们可以通过输入以下内容来测试带有生产版本的Sentry：

yarn build

然后从构建文件夹输入：

npx http-server -c-1

我们将立即面对的问题是，Sentry错误记录引用了缩小包中的行号。不是很有帮助。

Sentry , . localhost ( Sentry).

( )

-. , GitHub Pages (). :

build docs .
GitHub Pages ( GitHub), docs master
GitHub

: , , create-create-app . package.json:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

https://larkintuckerllc.github.io/hello-sentry/

Hello.

, :

, BRAVO.

, Error.

, :

()

JavaScript . React, React 16 " ".

– React, JavaScript , , . , .

…

. React 16, , - , React.

— Dan Abramov — Error Handling in React 16

, , , , , (, , ). , Error; .

, .

react-app / src / MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

, React flag.busted.bogus,

( componentDidCatch); , , , :

react-app / src / ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

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

, :

react-app / src / App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

Render Error Sentry.

, .

P.S.

P.S. Sentry https://t.me/sentry_ru

前端React应用中的Sentry远程错误监控

More articles: