보초 각도 추적 오차

최초로 nils-mehlhorn.de에 출판되었다
너는 너의 Angular 응용 프로그램이 출시되었을 때 무슨 일이 일어났는지 아니?비록
서버에서 로그를 설정하는 것은 흔하지만 클라이언트에서는 무시됩니다.그러나 사용자 브라우저에 점점 더 많은 논리가 등장함에 따라 우리는 코드가 생산 과정에서 나타날 수 있는 괴벽을 파악하기를 원할 것이다.

사용자는 너에게 연락하지 않을 것이다. 그들은 떠날 것이다

비록 매우 엄격하게 들리지만, 만약 감시가 없다면, 다른 설명이 없으면, 너는 사실상 모든 것이 정상이라고 가정하고 있다.솔직히 말해봐요.당신의 핸드폰에 있는 응용 프로그램이 붕괴된 후, 마지막으로'오류 보고서 제출'을 클릭한 것은 언제입니까?언제 이런 보고 메커니즘이 없습니까?사용자가 이전에 무엇을 했는지, 그리고 그들이 사용한 브라우저 버전을 포함한 상세한 전자메일을 작성하기를 바란다. 이것은 매우 낙관적이다.만약 어떤 물건이 쓸모가 없다면, 너는 다른 것을 시험해 보아라.응용 프로그램은 대부분 생산력 도구이다.사용자는 시간을 절약해야 할 일에 1초를 더 쓰지 않을 것이다.

위로하다일지는 너를 얼마나 멀리 가게 하지 않을 것이다

비록 약간의 논쟁이 있지만, 브라우저 컨트롤러는 개발 과정에서 절대적으로 유용한 도구이다.그러나 console.log의 모든 내용은 브라우저에 남아 있으며, 프로그램이 배치되면 브라우저에서만 실행되지 않습니다.사람들의 브라우저 컨트롤러에 접근할 수 없기 때문에 귀중한 창고 흔적을 잃었습니다. 이 흔적들은 심각한 버그를 복구하는 데 도움이 될 것입니다.

Angular 응용 프로그램에서 Sentry 사용

Sentry은 open-source 오류 추적 솔루션으로 브라우저 컨트롤러 밖에서 오류를 기록할 수 있습니다.run your own server 또는 hosted variant(무료층이 하나 있고 학생이라면 GitHub Student Pack)을 사용할 수 있습니다.
모든 변체가 준비된 후에 실행할 수 있다

npm i --save @sentry/browser

그리고 다음과 같이 Angular의 ErrorHandler 인터페이스를 구현합니다.이를 위해 프로젝트의 데이터 소스 이름(DSN)이 필요합니다. 이 이름은 Sentry가 오류를 어디로 전송하는지 알려 줍니다.

import { Injectable, ErrorHandler} from '@angular/core'
import * as Sentry from '@sentry/browser'

@Injectable()
export class SentryErrorHandler implements ErrorHandler {

  constructor() {
    Sentry.init({
      dsn: '<your-sentry-project-dsn>'
    })
  }

  handleError(error) {
    Sentry.captureException(error.originalError || error)
  }
}

이 인터페이스를 실현함으로써 우리는 하나의 중심점에서 응용 프로그램에서 발생하는 모든 오류를 포착할 수 있다.이것은 zone.js에서 활성화된 것입니다. Angular는 응용 프로그램 코드를 포장해서 던진 오류를 연결합니다.이제 Angular가 기본 오류 처리 프로그램이 아니라 오류 처리 프로그램을 사용한다고 알려주면 기본 오류 처리 프로그램은 컨트롤러에만 로그인합니다.이를 위해 app.module.ts에서 오류 처리 프로그램을 제공했습니다.

import { ErrorHandler } from '@angular/core'
import { SentryErrorHandler} from './error-handler'

@NgModule({
  ...
  providers: [
    {provide: ErrorHandler, useClass: SentryErrorHandler}
  ]
})
export class AppModule { }

이제 실행할 때 발생하는 모든 오류가 Sentry에 표시됩니다.ngOnInit의 app.component.ts에서 다음과 같이 코드의 어느 곳에서 오류를 던져 이를 테스트하려고 할 수 있습니다.

@Component({...})
export class AppComponent implements OnInit {

    ngOnInit(): void {
        throw new Error('Sentry Test Error') // TODO: remove
    }
}

다음과 같이 보초 대시보드에 표시되어야 합니다.

Sentry 대시보드에서 테스트 오류

환경에 대응하다

우리는 간단한 절차를 완성할 수 있다. 이것은 우리의 처리를 더욱 복잡하게 할 것이다.기본 오류 처리 프로그램을 바꾸면 더 이상 컨트롤러에 오류가 표시되지 않는다는 것을 알 수 있습니다.발전 목적에서 우리는 아마도 이 자금을 회수하기를 희망할 것이다.따라서 우리는 공급업체 공장을 이용하여 생산 environments에서만 오류 처리 프로그램을 제공할 것이다.

import { ErrorHandler } from '@angular/core'
import * as Sentry from '@sentry/browser'
import { environment } from './../environments/environment'

class SentryErrorHandler implements ErrorHandler { ... }

export function getErrorHandler(): ErrorHandler {
  if (environment.production) {
    return new SentryErrorHandler()
  }
  return new ErrorHandler()
}

우리는 지금 공장을 이용하여 처리 절차 규정을 봉인할 수 있다. 아래와 같다.

import { ErrorHandler } from '@angular/core'
import { getErrorHandler} from './error-handler'

@NgModule({
  ...
  providers: [
    {provide: ErrorHandler, useFactory: getErrorHandler}
  ]
})
export class AppModule { }

또한 여러 환경이 있다면, 이 환경들은 Sentry에 오류를 전달해야 하지만, 헷갈리지 않기를 원하지 않는다면, 초기화 기간에 tell Sentry about the environment을 실행할 수 있습니다.이를 위해 우리는 environment.<name>.ts에서 환경 이름의 속성을 유지하고 이를 전달할 수 있다.

class SentryErrorHandler implements ErrorHandler { 

  constructor() {
    Sentry.init({
      dsn: '<your-sentry-project-dsn>',
      environment: environment.name
    })
  }

...

컨텍스트 제공

창고 추적 자체가 때때로 오류의 원인을 찾기에 부족하다.Sentry는 사용자 브라우저, 운영체제, IP 주소에 대한 정보도 제공합니다.오류가 발생했을 때 사용자가 있는 URL을 표시합니다.
더 많은 정보를 추가하려면 Sentry의 scope을 수정할 수 있습니다.이러한 방법으로 오류 보고서에 현재 인증된 사용자를 포함할 수 있습니다.

const user = this.getUser() // get's user from some service
Sentry.configureScope(scope => {
  scope.setUser({
    id: user.id,
    username: user.name,
    email: user.mail,
  })
})

사용자를 오류 처리 프로그램에 들어가게 하는 곤경에 빠뜨릴 수 있는 일이 있다.보통 주입 서비스를 통해 이 점을 실현할 수 있습니다 (예를 들어 NgRx Store).그러나 오류 처리 프로그램을 주입하려고 시도하면 다음과 같은 오류가 발생합니다. Provider parse errors: Cannot instantiate cyclic dependency!오류 처리 프로그램은 모든 각도에서 프로그램의 구성 부분이기 때문에 일반적인 서비스가 시작되기 전에 불러옵니다.따라서 이 서비스에 직접 의존할 수는 없다.handleError 방법 중 Angular의 Injector과 fetching the required service lazily에 의존하여 이 문제를 해결할 수 있습니다.그러나 역할 영역 설정을 우리의 처리 프로그램에서 완전히 옮기는 것이 더 깨끗할 수 있습니다.따라서 로그인에 응답하기 위해 역할 영역을 직접 설정합니다.이것은 순환 의존을 해결할 수 있을 뿐만 아니라 오류 처리 프로그램의 코드도 최소화할 수 있다.이런 방식을 통해 우리는 오류를 보고할 때 추가적인 오류를 초래할 수 없으며 끊임없는 순환을 초래할 수 있다.다음과 같이 모니터링 서비스를 만들 수 있습니다.

import { Injectable} from '@angular/core'
import * as Sentry from '@sentry/browser'

@Injectable({providedIn: 'root'})
export class MonitoringService {

  monitorUser(user: User): void {
    Sentry.configureScope(scope => {
      scope.setUser({
        id: user.id,
        username: user.name,
        email: user.mail,
      })
    })
  }
}

이 설정이 있으면 monitorUser과 범위 설정을 쉽게 테스트할 수 있습니다. 다른 서비스에서 dependency injection을 통해 호출되었습니다.
부가용 외에도 key-value pairs을 범위에 넣거나 severity level을 설치할 수 있다.또한 사용자의 워크플로우를 재현하는 데 도움이 될 수 있는 extra content을 제공할 수 있습니다.그러나 전체 응용 프로그램의 상태를 저장하기 전에 조심해야 한다. 왜냐하면 이 필드는 최대 200kB만 수용할 수 있기 때문이다.

피드백 수집

Sentry는 오류가 발생했을 때 사용자 피드백을 수집할 수도 있습니다.비록 대부분의 경우 무시될 수 있지만, 어떤 경우에는 유용한 정보원이 될 수 있다.다음과 같이 오류 처리 프로그램에서 시작할 수 있습니다.

const eventId = Sentry.captureException(error.originalError || error);
Sentry.showReportDialog({ eventId });

다음과 같은 모드 대화 상자가 열립니다.

보초 보고 대화 상자

끝내다

응용 프로그램에 대해 어떤 감시를 하는 것은 통상적으로 상식이다.그러나 브라우저 응용 프로그램에 있어서 이것은 약간 무시되었다. 아마도 로컬 모바일 응용 프로그램(예를 들어 Crashlytics)처럼 성숙한 해결 방안이 없기 때문이다.
Sentry와 유사한 소프트웨어는 Angular 응용 프로그램에서 발생하는 일을 깊이 있게 이해하고 자신 있게 개발할 수 있습니다.그리고 제시된 고려에 따라 우리는 각도의 방식으로 이를 적분할 수 있다.
그리고 bunch of other stuff을 사용하면 Sentry로 할 수 있습니다. 예를 들어 발표 추적 오류에 따라 버그를 자동으로 압축할 수 있습니다.