Sentry를 사용하여 React 애플리케이션의 오류 추적

오늘은 React 애플리케이션의 실시간 오류 추적에 대해 설명하겠습니다. 프런트엔드 애플리케이션은 일반적으로 오류 추적에 사용되지 않습니다. 일부 회사에서는 종종 버그 추적을 미루고 문서화, 테스트 등을 마친 후에 버그 추적을 다시 시작합니다. 그러나 제품을 더 나은 방향으로 변경할 수 있다면 그렇게 하십시오!

1. 센트리가 필요한 이유는 무엇입니까?

나는 당신이 생산 과정에서 버그를 추적하는 데 관심이 있다고 가정합니다.

이것이 충분하지 않다고 생각하십니까?

좋아요, 세부 사항을 살펴보겠습니다.

개발자가 Sentry를 사용하는 주요 이유:

• 오류가 있는 코드를 배포할 때 위험을 방지할 수 있습니다.
• 코드 테스트로 QA 지원
• 문제에 대한 빠른 알림 받기
• 오류를 빠르게 수정하는 능력
• 관리자 패널에서 오류를 편리하게 표시하기
• 사용자/브라우저 세그먼트별로 오류 정렬

CEO/리드 프로젝트의 주요 이유

• 비용 절감(Sentry는 서버에 설치 가능)
• 사용자 피드백 받기
• 실시간으로 프로젝트의 문제점 파악
• 사람들이 앱과 관련해 겪고 있는 문제의 수를 이해하세요.
• 개발자가 실수한 부분을 찾는 데 도움이 됩니다.

개발자들이 이 글에 먼저 관심을 가질 것이라고 생각합니다. 또한 이 이유 목록을 사용하여 상사가 Sentry를 통합하도록 설득할 수도 있습니다.

업체 목록의 마지막 항목에 주의하세요.

이미 관심이 있으신가요?

센트리란 무엇인가요?

Sentry는 개발자가 실시간으로 충돌을 추적하고 수정하는 데 도움이 되는 오픈 소스 버그 추적 애플리케이션입니다. 이 애플리케이션을 사용하면 효율성을 높이고 사용자 경험을 향상시킬 수 있다는 점을 잊지 마십시오. Sentry는 JavaScript, Node, Python, PHP, Ruby, Java 및 기타 프로그래밍 언어를 지원합니다.

2. 로그인 후 프로젝트 생성

• Sentry 계정을 개설하세요. 로그인해야 할 수도 있습니다. (Sentry는 서버에 설치할 수 있습니다.)
• 다음 단계는 프로젝트를 생성하는 것입니다.
• 목록에서 언어를 선택하세요. (우리는 React를 선택하겠습니다. "Create Project"를 클릭하세요)

애플리케이션을 맞춤설정하세요. Sentry를 컨테이너에 통합하는 방법에 대한 기본 예는 아래에서 볼 수 있습니다.

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

Sentry에는 다음에 수행해야 할 작업을 파악하는 데 도움이 되는 유용한 마법사가 있습니다. 다음 단계를 수행할 수 있습니다. 첫 번째 오류 처리기를 만드는 방법을 보여 드리고 싶습니다. 좋습니다. 프로젝트를 만들었습니다! 다음 단계로 넘어가자

3. React와 Sentry 통합

프로젝트에 npm 패키지를 설치해야 합니다.

npm i @sentry/browser

컨테이너에서 Sentry를 초기화합니다.

Sentry.init({
 // dsn: #dsnUrl,
});

DSN은 프로젝트 -> 설정 -> 클라이언트 키에 있습니다. 검색창에서 클라이언트 키를 찾을 수 있습니다.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. 첫 번째 오류 추적

예를 들어 Deezer API와 함께 간단한 음악 애플리케이션을 사용했습니다. 당신은 그것을 볼 수 있습니다 여기에. 오류를 생성해야 합니다. 한 가지 방법은 "정의되지 않은" 속성에 액세스하는 것입니다.

호출하는 버튼을 만들어야 합니다. console.log с 사용자.이메일. 이 작업 후에는 다음과 같은 오류 메시지가 표시됩니다. 잡히지 않은 TypeError(정의되지 않은 속성을 읽을 수 없습니다) email) 사용자 개체가 누락되었기 때문입니다. 당신은 또한 사용할 수 있습니다 자바스크립트 예외.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

전체 컨테이너는 다음과 같습니다.

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

이 버튼을 통합한 후 브라우저에서 테스트해야 합니다.

첫 번째 오류가 발생했습니다.

우후!

헤더 오류를 클릭하면 스택 추적이 표시됩니다.

메시지가 좋지 않은 것 같습니다. 물론 우리는 코드가 어디에 있는지 이해하지 못한 채 오류 메시지를 보았습니다. 기본적으로 ReactJS의 소스 맵은 구성되지 않았기 때문에 이에 대해 이야기하고 있습니다.

또한 소스 맵 설정에 대한 지침도 제공하고 싶지만 그렇게 하면 이 글이 의도한 것보다 훨씬 길어질 것입니다.

이 주제를 공부할 수 있습니다 여기에. 이 기사에 관심이 있으시면, 드미트리 노젠코 소스 맵 통합에 대한 두 번째 부분을 게시합니다. 그럼 좋아요와 구독을 더 많이 눌러주세요 드미트리 노젠코두 번째 부분을 놓치지 않도록.

5. 사용 보초 끝점 있음 API

좋아요. 우리는 이전 단락에서 자바스크립트 예외를 다루었습니다. 그러나 XHR 오류에 대해서는 어떻게 해야 할까요?

Sentry에는 사용자 정의 오류 처리 기능도 있습니다. API 오류를 추적하는 데 사용했습니다.

Sentry.captureException(err)

오류 이름, 수준, 데이터 추가, 애플리케이션, 이메일 등을 사용하여 고유한 사용자 데이터를 사용자 정의할 수 있습니다.

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

catch API에 일반 함수를 사용하고 싶습니다.

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

API 호출에서 이 함수를 가져옵니다.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

방법을 확인해 봅시다:

• 세트레벨 센트리 대시보드에 레벨 오류를 삽입할 수 있습니다. 여기에는 '치명적', '오류', '경고', '로그', '정보, '디버그', '중요') 속성이 있습니다.
• 사용자 설정 모든 사용자 데이터(ID, 이메일 주소, 결제 계획 등)를 저장하는 데 도움이 됩니다.
• 세트엑스트라 예를 들어 저장과 같이 필요한 데이터를 지정할 수 있습니다.

버그에 대한 사용자 피드백을 얻으려면 showReportDialog 기능을 사용해야 합니다.

Sentry.showReportDialog();

결론 :

오늘 우리는 Sentry를 React 애플리케이션에 통합하는 한 가지 방법을 설명했습니다.

→ 텔레그램 채팅 보초

출처 : habr.com