Sentry-javascript: Como posso detectar o erro de rede do cliente através de @sentry/browser ?

Criado em 19 dez. 2018  ·  3Comentários  ·  Fonte: getsentry/sentry-javascript

Pacote + Versão

  • [o] @sentry/browser
  • [x] @sentry/node
  • [ ] raven-js
  • [x] raven-node _(corvo para nó)_
  • [ ] outro: Angular6 + Ngrx6

Versão:

@sentry/browser": "4.4.2"

Descrição

Olá a todos,
Como descrevi acima, estou usando Angular6 + Ngrx6.
O que eu quero fazer é enviar um erro para o Sentry quando o webApp falhar na chamada da API.
Digamos, eu chamo uma api chamada /abc/3 que não existe.
Então o cliente recebe um erro 404 Not Found .
E este é o que eu quero enviar para o Sentinela através @sentry/browser .

Eu criei um serviço simples.

@Injectable({
  providedIn: 'root'
})
export class SentryService {
  constructor() { }
  captureException(error: any) {
    Sentry.captureException(error.originalError || error);
    throw error;
  }
}

e criou SentryErrorHandler que estende o ErrorHandler do Angular

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor(private sentry: SentryService) {}
  handleError(error: any): void {
    this.sentry.captureException(error);
    throw error;
  }
}

Este código detecta erros normais de js, como
abcdefg(); // <- this function doesn't exist so it occurs an error and sent to Sentry.

No entanto, descobri que o código acima não detecta erro de rede. (Como eu disse /abc/3 )

Então eu criei ErrorInterceptor que estende o HttpInterceptor do Angular.

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(
        private _injector: Injector,
        private sentry: SentryService
    ) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
        .pipe(
            tap(event => {}, error => {
                if (error) {
                    this.sentry.captureException(error);
                }
            })
        );
    }
}

Então eu poderia pegar o erro de rede.
Mas o problema é que não consigo ver nenhum no meu painel do Sentry.
Verifiquei minha guia de rede do Chrome. E encontrei uma mensagem:
"Exceção sem erro capturada com chaves: erro, cabeçalhos, mensagem, nome, ok…"

Então eu acho que @sentry/browser não acha que isso é um erro.

Também descobri isso que falando em Non-Error exception captured with keys: error, headers, message, name, ok…

Então aqui vai minhas perguntas.

  1. @sentry/browser deve estar capturando o erro de rede do cliente?
  2. Se 1 for verdadeiro, como posso fazê-lo funcionar? (Espero que de forma angular)
  3. Se 2 for falso, o erro de rede deve ser tratado pelo back-end?

Obrigado!

Comentários muito úteis

@Taewa O objeto de erro lançado pelo Angular não está no mesmo formato que um SentryEvent .

Uma maneira seria usar o captureMessage(message: string) com algumas das informações de erro. Essa é a maneira mais simples que escolhi também: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Outra maneira seria construir um objeto de evento Sentry sozinho e usar o método captureEvent(event: SentryEvent) para enviá-lo ao Sentry.

Espero que isto ajude. 🙂

Todos 3 comentários

@Taewa O objeto de erro lançado pelo Angular não está no mesmo formato que um SentryEvent .

Uma maneira seria usar o captureMessage(message: string) com algumas das informações de erro. Essa é a maneira mais simples que escolhi também: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Outra maneira seria construir um objeto de evento Sentry sozinho e usar o método captureEvent(event: SentryEvent) para enviá-lo ao Sentry.

Espero que isto ajude. 🙂

Obrigado @pascaliske
Eu realmente resolvi usando captureMessage(message: string) que você mencionou.
Seria útil para os futuros visitantes :)

Fechando este problema, pois parece estar resolvido.

Esta página foi útil?
0 / 5 - 0 avaliações