React - sentry와 componentDidCatch연동

sentry와 componentDidCatch연동

지금 같은 경우에는 ErrorBoundary에서 별도의 작업을 하지 않아도 어디서 어떤 에러가 있는지 확인이 가능하다.
하지만 production 환경에서는 이미 componentDidCatch로 에러를 잡아준 상태라면 해당 에러에 대한 정보가 sentry로 안날라가기 때문에 추가적인 작업을 해야한다.

//ErrorBoundary.js

import React, { Component } from "react";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

class ErrorBoundary extends Component {
  state = {
    error: false
  };

  componentDidCatch(error, info) {
    console.log("에러가 발생했습니다");
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
    if (process.env.NODE_ENV === 'production') {
      Sentry.captureException(error, {extra : info});
    }
  }

  render() {
    if (this.state.error) {
      return <h1>에러발생!</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

와 같이 설정을 해준 다음에 vscode 에서 terminal을 켜준다음에
npm build를 입력해서 최적화를 해준 다음에
npx serve ./build를 입력하여 완료를 하고 다시 sentry에 들어가보면 새롭게 Issue가 생긴것을 볼 수 있다.