오류 모니터링을 위해 React 응용 프로그램에서 Sentry 가져오기

Sentry는 응용 프로그램에서 오류 로그를 수집하여 응용 프로그램에서 발생한 오류를 일람 형식이나 개별 형식으로 시각화하는 서비스입니다.Slack과 협력하여 오류 모니터링 도구로 사용할 수도 있습니다.
나는 이런 도구가 서버 쪽에서 설정되는 경우가 많다고 생각했지만 이번 전단에도 설정할 기회가 있기 때문에 도입 방법을 총괄해 보았다.

React 응용 프로그램에서 Sentry 가져오기

Sentry의 배치는 매우 간단합니다. 계정을 만들고 여기 문서에 따라 원본 코드를 변경하면 됩니다.
그리고 적절하게 오류가 발생하면 알림이 Sentry로 날아가 오류를 표시합니다.

하지만 기본 설정이라면 가려운 곳을 잡을 수 없는 느낌이 들기 때문에 사용하기 쉽도록 앱을 변경한다.

비동기식 통신 오류 캡처 허용

위의 문서는 componentDidCatch를 사용하여 오류를 처리합니다.(아직componentDidCatch에 해당하는 Hooks가 없기 때문에 함수 구성 요소를 주체로 하는 디자인이라도 이 부분만 클래스 구성 요소가 되어야 한다)
그러나componentDidCatch는react 생명주기에서 발생하는 오류만 포획합니다. 예를 들어aax통신의try/catch절에서 포획된 오류만 포획합니다.
내 생각에는axios통신시 오류를 감시하고 싶은 경우도 있을 것 같아서 비동기통신시 오류도Sentry에 보낼 수 있도록 조금만 수정해 주세요.
가장 간단한 방법은catch절에서Sentry로 보내는 처리입니다. 그러나 이런 방법은 모든 파일에 같은 처리를 퍼뜨리기 때문에 개인적으로 하고 싶지 않은 방법입니다.
따라서 Redux에 오류를 한 번 저장하고 앱 구성 요소를 감싸는 ErrorBoundary 구성 요소를 사용하여 보내는 동작을 정의했습니다.
ErrorBoundary/module.ts

export interface LogData {
  [key: string]: any; // 
}

interface SetErrorAction extends Action {
  type: ActionNames.SET_ERROR;
  payload: {
    error: Error;
    logData?: LogData;
  };
}

export const setError = (error: Error, logData?: LogData): SetErrorAction => ({
  type: ActionNames.SET_ERROR,
  payload: { error, logData }
});

모든 데이터가 Sentry에 함께 전송될 수 있기 때문에logData로 이러한 데이터를 추가할 수 있습니다.그리고 임의의 Container로 상술한 Action을dispatch하여 ErrorBoundaryState에 오류 정보를 저장합니다...
ErrorBoundary/Container.tsx

public submitError(error: Error, errorInfo: ErrorInfo) {
  Sentry.configureScope(scope => {
    if (errorInfo) {
      // logDataを送信パラメータにセット
      scope.setExtras(errorInfo);
    }
  });

  // Sentryへの送信処理
  Sentry.captureException(error);
}

ErrorBoundary/ErroBoundary.tsx

interface State {
  hasError: Boolean;
}

interface Props {
  value: ErrorBoundaryState;
  actions: ActionDispatcher;
}

export class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  componentDidUpdate = () => {
    // ReduxのErrorBoundaryStateにエラー情報が格納されたらActionをdispatchする
    if (this.props.value.error) {
      this.props.actions.submitError(
        this.props.value.error,
        this.props.value.logData
      );
    }
  };

  // Reactのライフサイクル時エラーの場合はこちらが動作する
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.props.actions.submitError(error, errorInfo);
    // コンポーネントエラーの場合はエラー画面を表示させる
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // エラー画面を表示
      return <div>Report feedback</div>;
    }

    return this.props.children;
  }
}

이런 느낌으로 ErrorBoundary 구성 요소에서 Sentry로 전송 처리를 합니다.
오류 정보가 Redux의 ErrorBoundaryState에 저장되면 ErrorBoundary 구성 요소에 componentDidUpdate를 실행하고 Sentry에 오류 메시지를 보냅니다.이렇게 하면 비동기 통신 때의 오류를 포착할 수 있다.
React 생명주기 오류는componentDidUpdate에서 포착할 수 없지만 componentDidCatch가 포착을 대체하기 때문에 문제가 없습니다.

소스 매핑을 Sentry로 전송

Sentry가 StackTrace를 표시하기 때문에 소스 코드의 어느 부분에서 오류가 발생했는지 확인할 수 있습니다.
하지만 묶음 파일이 미니파이로 처리되면 바로 보이기 때문에 무슨 뜻인지 모르겠다.나는 생산 환경에서 minify가 발표되는 것은 매우 정상적이라고 생각한다. 그러다가 Sentry의 장점 중 하나를 잃게 될 것이다...
이럴 때 유용한 것은 SourceMap이다.SourceMap이 있으면 파일을 minify로 묶더라도 StackTrace를 원본 소스 코드로 출력할 수 있습니다.
미리 Sentry에 SourceMap을 보내면 생산 환경에서도 자세한 StackTrace 정보를 얻을 수 있으므로 설정해야 합니다.
SourceMap 생성 자체는 Webpack 설정에 추가devtool: "source-map"만 하면 됩니다.이렇게,build를 만들 때 묶은 파일과 함께bundle입니다.js.맵 같은 파일도 출력됩니다.
다음은 Sentry에 SourceMap을 보내는 방법입니다. 하지만 몇 가지 방법이 있습니다.응용 프로그램을 배치할 때마다 옆에 있는 명령줄에서 수동으로 보내는 방법도 있는데, 가능하다면 자동화하고 싶습니다.
다행히도 Netlify에서 보낸 상황에서 Netlify.루트 디렉터리 바로 아래에 toml을 설치하면 구축할 때의 옵션을 설정할 수 있기 때문에 이 방법에 따라 진행할 수 있습니다.
사전 준비로 루트 디렉터리 바로 아래에 .sentryclirc 을 만들고 Sentry 측에 등록된 Organization 이름, 프로젝트 이름을 기록합니다.

[defaults]
org=XXXXXXXXXXXX
project=XXXXXXXXXXXX

또한 명령줄에서 Sentry에 액세스하려면 인증 토큰이 필요합니다.Netlify는 환경 변수를 설정할 수 있으므로 키 이름을 SENTRY_ 로 설정합니다.AUTH_토큰으로 설정하세요.토큰은 Sentry 관리 화면에 게시할 수 있습니다.
마지막으로, netlify.toml 설명은 다음과 같습니다.
netlify.toml

[context.production]
  command = """
yarn build:prod && 
npx sentry-cli releases files 1.0 upload-sourcemaps -i bundle --ext js --ext map ./dist --rewrite &&
rm ./dist/js/bundle.js.map
"""

context.제품 수준으로서 제품 수준 환경 (master 지점) 에 배치될 때만 상술한 명령을 실행할 수 있습니다.sentry-cli 라이브러리를 미리 설치합시다.명령 프로세스로
어플리케이션 구축
· Sentry에 SourceMap 보내기
• 생성된 소스 매핑 파일 삭제
이런 느낌.SourceMap 파일을 삭제하는 것은 클라이언트에게 SourceMap을 보내기 싫기 때문입니다(파일을 배포하는 크기와 보안의 관점에서).
이제 소스 매핑이 자동으로 Sentry로 전송됩니다.

총결산

Sentry에 SourceMap을 보내는 방법에 대한 정보는 매우 적고 매우 힘들다.같은 어려운 사람을 도울 수 있다면 좋겠다.