GatbsyJS와 Sentry.io 통합

웹 애플리케이션에 들어오는 트래픽이 많은 경우 애플리케이션이 최상의 성능을 발휘할 수 있도록 도메인 전체에서 오류를 모니터링하기 위해 어떤 형태의 로깅이 필요합니다. 이 기사에서는 GatsbyJS로 Sentry를 구현하는 방법을 보여드리겠습니다.

시작하기

튜토리얼을 따라하고 싶다면 여기에서 내가 설정하는 데 사용한 것입니다.

개츠비 설정

npm i gatsby -g

npm init gatsby

센트리 설정

Sentry에 무료 계정 등록

install @sentry/gatsby --save-dev - link

@sentry/react --save 설치

gatsby-config.js에서 다음 코드를 작성합니다.

plugins: [
  {
    resolve: "gatsby-plugin-sentry",
    options: {
      dsn: "YOUR_SENTRY_DSN_URL",
    }
  }

];

일부 코드를 보려면 gatsby new my-apphttps://github.com/code-mattclaffey/sentry-gatsby-example를 실행할 수 있습니다.

무언가 잘못되었을 때 더 나은 사용자 경험 제공

고객은 일반적으로 오류가 발생하고 고객의 여정이 완전히 중지될 때 "죽음의 흰색 화면"을 보게 됩니다. 이는 고객이 귀하의 제품을 구매하지 않을 가능성이 매우 높으며 오류가 적절하게 처리되지 않으면 실제로 나쁜 리뷰를 남길 수 있습니다.

React에는 예를 들어 트리에서 위치하는 범위 내의 오류를 포함하는 오류 경계라는 패턴이 있습니다. 앱 수준에서 오류 경계를 배치하면 앱 구성 요소 내에서 발생하는 모든 오류를 처리합니다. Gatsby에서 우리는 Gatsby 애플리케이션의 루트에 이 오류 경계를 적용하려고 합니다. 우리가 사용할 API는 wrapPageElement 입니다.

오류 경계 만들기

가장 먼저 해야 할 일은 사이트에서 오류가 발생할 때 처리하는 React 구성 요소를 만드는 것입니다. 우리는 로깅에 Sentry를 사용하고 있기 때문에 npm에 이미 있는 것이 있는지 확인하고 싶기 때문에 Sentry와의 맞춤형 통합을 작성할 필요가 없습니다. 운 좋게! Sentry에는 이미 사용하고 있는 오류 경계 구성 요소를 제공하는 npm 패키지@sentry/react가 있습니다. 다음은 Sentry의 ErrorBoundary 구성 요소에 전달되는 일부 UI 구성 요소의 예입니다.

import React from "react"

import { ErrorBoundary } from "@sentry/react"

import { Link } from "gatsby"



const Fallback = ({ error, resetError }) => (

  <div role="alert">

    <p>Something went wrong</p>

    <pre>{error.message}</pre>

    <Link to="/" onClick={resetError}><a>Try again</a></Link>

  </div>

)



const ErrorBoundaryContainer = ({ children }) => <ErrorBoundary fallback={FallBack}>{children}</ErrorBoundary>



export default ErrorBoundaryContainer

구성 요소가 있으면 gatsby-browser.js의 페이지 루트에 추가해야 합니다.

import React from "react"

import ErrorBoundary from "`./src/components/error-boundary"

export const wrapPageElement = ({ element }) => (

  <ErrorBoundary>

    {element}

  </ErrorBoundary>

)

작동 테스트

이 간단한 작업을 테스트하려면 다음과 같이 반응 애플리케이션에서 오류를 발생시킵니다.

import React from "react"

const Component = () => {

  const [toggleError, setToggleError] = useState(false)

  if (toggleError) {

    throw Error('Component Error')

  }

  return <button type="button" onClick={() => setToggleError(true)}>Toggle error</button>

}

Sentry.io의 오류 시각화

Sentry에는 사이트에서 오류가 발생했을 때 표시되는 매우 간단한 UI가 있습니다. 해당 오류가 캡처되면 문제 섹션에 표시됩니다.



오류를 클릭하면 발생한 브라우저, 운영 체제 및 오류 세부 정보와 같은 오류에 대한 많은 정보를 제공합니다. 나는 이 섹션이 작업하고 이해하기에 정말 좋다는 것을 알았습니다.

오류가 발생했을 때 알려주는 경고 설정

다음으로 하고 싶은 일은 오류가 발생했을 때 누군가에게 알리는 것입니다. Sentry에는 그룹 구성원에게 이메일을 보내는 알림을 설정할 수 있는 기능이 있습니다.



예제에서 "I crashed!"라는 메시지로 오류를 만들었습니다. 5분 속도 제한 내에 오류가 발생하면 이에 대한 알림을 받을 수 있도록 나에게 이메일을 보내고 싶었습니다.

결론

요약하면 반응 애플리케이션에 로깅/오류 처리를 추가하는 것은 정말 쉽습니다. Sentry는 우리를 위해 많은 이동을 처리하고 Gatsby는 구성 요소의 루트에 오류 경계를 고정하는 API를 제공합니다. 아주 적은 노력과 매우 높은 가치로 고객 대면 웹사이트를 구축할 때 사용할 수 있는 좋은 도구라고 생각합니다.

자원

How to add an error boundary to Gatsby root

Getting started with Sentryio

Gatsby Sentry plugin

React Error Boundaries