당신의 React 응용 프로그램은 무엇을 하고 있습니까? 우리는 어떻게 그것을 감시합니까?🤔

내가 문의할 때, 많은 프로젝트들이 초기에 한 일은 모니터링/로그 플랫폼을 통합하는 것이다.이것은 IO 소모 시간, 응용 프로그램 내의 데이터 흐름을 추적하거나 예상과 의외의 오류를 처리하는 등 흔히 볼 수 있는 장면을 깊이 있게 이해하는 데 도움이 될 것이다.이 모든 것은 우리의 API 노드에 베이킹되고 통상적으로 순조롭게 실행될 것이다.
하지만 우선순위가 없는 곳이 있다. 바로 브라우저다.때때로 Google Analytics는 통합되거나 (또는 진정한 즐거움을 원한다면) 공공 사이트/마케팅 사이트이고 진정한 모니터링이 아니라 데이터의 출처에만 관심을 갖는다면 더욱 중요하다.
오늘 React 설정Azure AppInsights의 모니터링 솔루션을 어떻게 사용하는지 보고 싶습니다.

AppInsights란 무엇입니까?

AppInsights(긴 형식의 Application Insights)는 Azure Monitor 플랫폼의 일부분으로 성능 모니터링 플랫폼으로 웹에서 이동까지 다양한 언어의 응용 프로그램에 사용할 수 있다.
비록 나는 여기에서 그것의 모든 기능을 소개하지는 않지만, 웹 응용 프로그램 (SPA 또는 기타) 에 대한 가장 재미있는 기능은 페이지 보기, 오류 (처리되고 처리되지 않음), AJAX 호출 (XML HTTP 요청과 얻기) 과 같은 정보를 포착하는 것이다.클라이언트와 서버를 결합하면 사용자가 사이트에서 상호작용하는 완전한 보기를 제공할 수 있다.

입문

이 프레젠테이션에 대해 저는 Gatsbye-commerce starter kit을 사용했습니다. 당신은 완전한 프레젠테이션on my GitHub을 찾을 수 있습니다.
나는 그것을 사용JavaScript SDK for AppInsights으로 확장했는데, 마침 하나React extension가 있었다.

AppInsights 구성

우선, 우리는 사용할 수 있는 App Insights 실례가 필요합니다. 이 점을 하려면 create a resource in Azure (Azure 계정이 없으면 sign up for a free trial 과 복사 instrumentation key 가 필요합니다.
플러그 키가 있으면 .env.development 파일을 만들어서 게츠비가 찾을 환경 변수를 설정합니다.

APPINSIGHTS_KEY=<instrumentation key here>

이제 AppInsights를 어플리케이션에 통합하기 위해 먼저 도구를 설정하는 서비스를 만들 예정입니다.

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'
import { globalHistory } from "@reach/router"

const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.APPINSIGHTS_KEY,
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: globalHistory }
        }
    }
})
ai.loadAppInsights()

export default (Component) => withAITracking(reactPlugin, Component)
export const appInsights = ai.appInsights

이 서류는 두 가지 일을 맡고 있는데,첫 번째 작업은 제공된 키를 사용하여 AppInsights 연결을 설정하는 것입니다. (우리는 environment variable 을 사용하여 저장합니다. 이것은 환경마다 다른 연결을 사용할 수 있도록 합니다. 두 번째 작업은 React 확장에 제공된 HOC에 AppInsights 실례를 제공하는 Higher Order Component (HOC) 를 내보내는 것입니다.(이것은 단지 편리한 방법일 뿐, 다른 구성 요소를 추가하고 싶지 않으면 HOC를 포장할 필요가 없다.)
여기에서 React 확장 문서와 가장 큰 차이점은 history 정보를 제공했다는 것입니다.Gatsby는 @reach/router 대신 react-router 을 사용합니다. 따라서 우리는 역사적 대상을 만들지 않습니다. 우리는 공유기를 사용하여 정의된 대상globalHistory 패키지에서 @reach/router 으로 공개합니다.

추적 페이지

응용 프로그램에 현재 App Insights가 있습니다. 모든 페이지에서 그것을 사용하기 시작하면 페이지 접근과 처리되지 않은 오류를 추적할 수 있습니다.우리에게 가장 좋은 점은 우리가 접근할 수 있는 맨 위의 구성 요소입니다. 보통 DOM에 들어가는 <App /> 구성 요소입니다.게이츠비는 이 구성 요소에 접근할 수 있는 권한이 없습니다. 반대로, 우리는 pages 디렉터리의 파일을 사용할 것입니다. 그러나 이 템플릿이 있으면, 우리가 수정한 것은 components/Layout 페이지가 아니라 <Layout /> 페이지마다 가장 높은 구성 요소이기 때문입니다.
다음과 같이 HOC로 구성 요소를 패키지화합니다.

import React from 'react'
import Headroom from 'react-headroom'
import { Container } from 'semantic-ui-react'
import Footer from '../Footer'
import Header from '../Header'
import withAppInsights from '../../AppInsights';
import 'semantic-ui-css/semantic.min.css'

const Layout = ({ location, children }) => (
  <>
    <Headroom
      upTolerance={10}
      downTolerance={10}
      style={{ zIndex: '20', height: '6.5em' }}
    >
      <Header location={location} />
    </Headroom>
    <Container text>{children}</Container>
    <Footer />
  </>
)

export default withAppInsights(Layout)

여기저기 탐색을 시작하고 개발자 도구 네트워크 옵션을 보시면 AppInsights에 대한 요청을 보실 수 있습니다!

위의 화면 캡처에서 출력 부하 중 몇 개의 대상(AppInsights 대량 요청은 15000ms의 속도로 지표를 업로드합니다. 즉, configurable 중 하나는 우리의 이전 페이지의 지표 정보(구성 요소가 설치된 시간)이고 다른 하나는 내비게이션 이벤트입니다.
주의해야 할 것은 전체 페이지를 포장할 필요가 없고, 추적하고 싶은 특정 구성 요소만 포장하면 된다는 것이다.React 확장에서 제공하는 HOC는 구성 요소를 하나의 <div> 에 봉인하고 이벤트 핸들을 사용자 상호작용 이벤트 (예를 들어 클릭, 마우스 이동, 터치) 에 추가하여 구성 요소와 상호작용할 때의 이벤트를 추적할 수 있도록 합니다.HOC를 제거하면 AppInsights에 어셈블리 상호 작용 시간에 대한 지표가 전송됩니다.여기서 우리는 페이지 보기와 구성 요소의 상호작용을 하나의 예시에 결합시킨다.
이제 우리는 사용자가 한 페이지에서 소비하는 시간과 그들이 어떤 페이지를 방문했는지 추적하기 시작하여 전문적인 모니터링을 보여 드리겠습니다.

특정 사용자 상호 작용 모니터링

사이트에서 사용자의 행동을 이해하고 구체적인 동작을 알고 싶다면, 예를 들어'쇼핑카에 추가'단추를 누르십시오.이를 위해 trackEvent 사용자 정의 메트릭 추적을 사용할 수 있습니다.

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })
    // snip
  }

여기서 우리가 사용하는 것은 appInsights 대상이다. 우리는 그 중에서 App Insights 실례를 내보내고 일부 데이터를 trackEvent, 우리가 추적하고 있는 사건의 이름 (Azure 포털에서 필터할 수 있음), 그리고 우리가 사건에 포함하고자 하는 모든 사용자 정의 속성에 전달한다.여기에서 설명 productId 을 참조하십시오. 따라서 특정 제품이 카트에 추가되는 빈도를 확인할 수 있지만, 이벤트 컨텍스트를 이해하고 제공하는 데 도움이 되는 정보를 추가할 수 있습니다.

고장 모니터링

응용 프로그램에 확실히 결함이 있다는 것은 생활 속의 사실이지만, 우리는 이러한 고장이 언제 발생했는지 알고 싶다.JavaScript에서 이러한 작업이 발생하면 일반적으로 캡처되지 않으며 사용자가 페이지를 다시 불러올 때까지 완전히 침묵하고 상호작용에 실패할 수 있습니다.AppInsights JavaScript SDK 포획 트리거window.onerror의 처리되지 않은 이상(처리되지 않은 약속이 거부된 경우), 우리가 처리할 수 있는 오류는 어떻습니까?네트워크 요청이 실패했을 수도 있습니다. 클라이언트와 서버 지표를 연결하기 위해 이 이벤트를 추적하려고 시도할 수도 있습니다.
이를 위해 우리는 this PR is merged 방법을 사용할 수 있다.

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })

    const cartId = await localStorage.getItem('mcart')

    const error = validate(quantity)
    setError(error)
    if (!error) {
      setLoading(true)
      Moltin.addToCart(cartId, productId, quantity)
        .then(() => {
          addToCart(quantity, cartId)
          setLoading(false)
          setQuantity(quantity)
          setVisible(true)
          toggleMessage()
        })
        .catch(err => {
          setError(`Error: ${err.errors[0].detail}` || 'Something went wrong')
          setLoading(false)
          appInsights.trackException({ error: new Error(err), severityLevel: SeverityLevel.Error })
        })
    }
  }

약속trackException의 말미에 우리는 catch 을 호출하여 잘못된 정보를 포함하는 대상과 trackException 사건의 severityLevel 를 전달한다.Error 여기서 제어하는 것은 매우 중요합니다. Azure는 AppInsights에 정의된 경보 규칙을 터치할 수 있기 때문입니다. 만약 서버 측의 오류에서 비롯된 것이라면 이중 경보를 터치하고 싶지 않을 수도 있습니다.

심각도 수준 Azure에서 지표 보기

이제 우리는 사이트 주위를 내비게이션할 때 지표를 생성하여 Azure 포털로 돌아가 AppInsights 자원을 내비게이션하고 모니터링 부분 을 선택하도록 한다.
이것은 응용 프로그램에서 포획한 AppInsights 데이터에 대한 조회를 만들 수 있는 곳으로 상당히 쉽게 얻을 수 있다Log (Analytics).우리는 간단한 조회부터 시작하여 일부 페이지 보기를 표시할 것이다.

pageViews
| limit 50

이것은 pageViews 표를 열 것입니다. 우리는 파이프 (| 문자를 사용하여 명령을 표시합니다. 이 예에서 우리가 실행하고 있는 명령 limit 명령의 값은 50 입니다. 이것은 조회에서 되돌아오는 결과 수를 50으로 제한합니다.
query language
화면 캡처는 되돌아오는 결과를 보여 주었는데, 그 중에서 우리는 내가 훑어본 한 무더기의 페이지를 보았다.
"쇼핑카트에 추가"단추의 클릭을 추적하는 사용자 정의 이벤트를 살펴보겠습니다.

customEvents
| where name == "Add To Cart" 
| limit 50

이 조회에 대해 customEvents 테이블을 엽니다. 미리 정의된 도량 형식이 아니기 때문에 where 필터를 추가하여 name 로 제한합니다.

그곳에서 우리는 세 가지 카트에 추가된 조작과 어떤 제품이 카트에 추가되었는지 볼 수 있다.검색을 통해 특정 제품이나 이벤트에서 캡처한 다른 정보를 찾기 위해 조건 자구를 확장할 수 있습니다.

결론

이 글은 우리에게 , 특히 Azure AppInsights 을 소개했다.Azure 포털에서 데이터를 보기 시작하는 방법을 연구하기 전에, 우리는 페이지 보기 추적과 특정한 상호작용에 따라 사용자 정의 지표를 추적하는 방법을 이해했고, 마지막은 오류 추적이다.