React 프론트엔드 애플리케이션의 버그에 대한 Sentry 원격 모니터링

우리는 React와 함께 Sentry를 사용하는 방법을 모색하고 있습니다.

이 기사는 다음 예제를 사용하여 Sentry 오류 보고로 시작하는 시리즈의 일부입니다. Часть 1.

반응 구현

먼저 이 애플리케이션에 대한 새 Sentry 프로젝트를 추가해야 합니다. 센트리 홈페이지에서 이 경우 React를 선택합니다.

React를 사용하여 애플리케이션에서 Hello와 Error라는 두 개의 버튼을 다시 구현하겠습니다. 시작 애플리케이션을 만드는 것부터 시작합니다.

npx create-react-app react-app

그런 다음 Sentry 패키지를 가져옵니다.

yarn add @sentry/browser

초기화합니다.

반응 앱/src/index.js

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

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

관찰 :

• 개발 중에는 콘솔과 같이 문제를 모니터링하기 위한 다른 메커니즘이 있으므로 프로덕션 빌드에만 Sentry를 활성화합니다.

다음으로 Hello 및 Error 버튼을 구현하고 이를 애플리케이션에 추가합니다.

반응 앱/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);
    }
  }
}

반응 앱/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');
  }
}

반응 앱/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 페이지 서비스(무료)를 사용하기 위한 간단한 응답 버튼 XNUMX개. 사용 단계는 일반적으로 다음과 같습니다.

1. 폴더의 내용을 복사하세요. 빌드 폴더로 문서 저장소의 루트 디렉터리에 있습니다.

2. 켜다 GitHub 페이지 저장소(GitHub의)에서 docs 폴더를 사용합니다. 석사 가지

3. GitHub에 변경 사항 푸시

주의: 무엇을 사용해야 하는지 파악한 후 생성-생성-앱 애플리케이션을 실행하는 홈 페이지 기능. package.json에 다음을 추가했습니다.

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

실행 중인 애플리케이션의 최종 버전은 다음 위치에서 구할 수 있습니다.

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

잡힌 벌레의 그림

Hello 버튼을 클릭하는 과정을 살펴보겠습니다.

다음과 같은 오류가 표시됩니다.

관찰 :

• 이 버그 보고서는 이보다 더 명확할 수 없습니다. 브라보.

설명되지 않은 오류에 대한 예시

마찬가지로 버튼 클릭에 대해서도 살펴보겠습니다. 오류.

다음과 같은 오류가 표시됩니다.

설명되지 않은 오류 처리 개선(렌더링)

오류 한계 소개

사용자 인터페이스 일부의 JavaScript 오류로 인해 전체 애플리케이션이 중단되어서는 안 됩니다. React 사용자의 이 문제를 해결하기 위해 React 16에서는 "오류 범위"라는 새로운 개념을 도입했습니다.

오류 경계는 하위 구성 요소 트리의 어디에서나 JavaScript 오류를 포착하고 해당 오류를 기록하며 충돌이 발생한 구성 요소 트리 대신 대체 UI를 렌더링하는 React 구성 요소입니다. 오류 경계는 렌더링 중, 수명 주기 메서드 및 그 아래에 있는 전체 트리의 생성자에서 오류를 포착합니다.

...

감지되지 않은 오류에 대한 새로운 동작

이 변화는 중요합니다. React 16부터 오류 경계에 의해 포착되지 않은 오류로 인해 전체 React 구성 요소 트리가 마운트 해제됩니다.

- 댄 아브라모프 - React 16의 오류 처리

내가 이것을 깨닫기까지 시간이 좀 걸렸던 중요한 설명은 다음과 같습니다. 위의 동작은 렌더링 메서드(또는 수명 주기 메서드에서 발생할 가능성이 더 높음)에서 발생한 오류에서만 작동합니다.. 예를 들어 오류 경계를 사용하면 버튼에 아무 소용이 없습니다. 오류; 이 오류는 클릭 핸들러에 있었습니다.

예제 렌더링 오류를 만든 다음 오류 범위를 사용하여 오류를 보다 적절하게 처리해 보겠습니다.

반응 앱/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,
    });
  }
}

관찰 :

• 버튼을 누르면, 반응 표시됩니다 깃발.파괴.가짜, 오류가 발생합니다.

• 오류 경계가 없으면 전체 구성 요소 트리가 마운트 해제됩니다.

그런 다음 오류 경계 코드를 작성합니다(새로운 수명 주기 메서드 사용). 컴포넌트DidCatch); 이것은 본질적으로 Dan Abramov의 기사에 제공된 예입니다.

반응 앱/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;
  }
}

마지막으로 다음 구성요소를 사용합니다.

반응 앱/src/App.js

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

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

그러나 Render Error 버튼을 클릭하면 fallback UI가 표시되고 Sentry에 오류가 보고됩니다.

완성

이 정보가 도움이 되었기를 바랍니다.

PS 원본 링크

Sentry를 통한 PS Telegram 채팅 https://t.me/sentry_ru

출처 : habr.com