Sentry-javascript: ¿Cómo puedo detectar el error de red del cliente a través de @sentry/browser?

Creado en 19 dic. 2018  ·  3Comentarios  ·  Fuente: getsentry/sentry-javascript

Paquete + Versión

  • [o] @sentry/browser
  • [x] @sentry/node
  • [ ] raven-js
  • [x] raven-node _(cuervo para el nodo)_
  • [ ] otro: Angular6 + Ngrx6

Versión:

@sentry/browser": "4.4.2"

Descripción

Hola a todos,
Como describí anteriormente, estoy usando Angular6 + Ngrx6.
Lo que quiero hacer es enviar un error a Sentry cuando la aplicación web falla en la llamada a la API.
Digamos que llamo a una API llamada /abc/3 que no existe.
Luego, el cliente recibe un error 404 Not Found .
Y este es el que quiero enviar a Sentry a través @sentry/browser .

He creado un servicio simple.

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

y he creado SentryErrorHandler que extiende los ErrorHandler de 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 bien el error js normal como
abcdefg(); // <- this function doesn't exist so it occurs an error and sent to Sentry.

Sin embargo, descubrí que el código anterior no detecta un error de red. (Como dije /abc/3 )

Así que he creado ErrorInterceptor que extiende HttpInterceptor de 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);
                }
            })
        );
    }
}

Entonces pude detectar el error de red.
Pero el problema es que no puedo ver ninguno en mi tablero Sentry.
Revisé mi pestaña de red de Chrome. Y pude encontrar un mensaje:
"Excepción sin error capturada con claves: error, encabezados, mensaje, nombre, ok..."

Así que supongo que @sentry/browser no cree que esto sea un error.

También descubrí esto que hablando de Non-Error exception captured with keys: error, headers, message, name, ok…

Así que aquí están mis preguntas.

  1. @sentry/browser está destinado a detectar un error de red del cliente?
  2. Si 1 es verdadero, ¿cómo puedo hacer que funcione? (Con suerte forma angular)
  3. Si 2 es falso, ¿el backend debe manejar el error de red?

¡Gracias!

Comentario más útil

@Taewa El objeto de error lanzado por Angular no tiene el mismo formato que SentryEvent .

Una forma sería simplemente usar captureMessage(message: string) con parte de la información de error. Esa es la forma más sencilla que he elegido también: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Otra forma sería crear un objeto de evento de Sentry usted mismo y usar el método captureEvent(event: SentryEvent) para enviarlo a Sentry.

Espero que esto ayude. 🙂

Todos 3 comentarios

@Taewa El objeto de error lanzado por Angular no tiene el mismo formato que SentryEvent .

Una forma sería simplemente usar captureMessage(message: string) con parte de la información de error. Esa es la forma más sencilla que he elegido también: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Otra forma sería crear un objeto de evento de Sentry usted mismo y usar el método captureEvent(event: SentryEvent) para enviarlo a Sentry.

Espero que esto ayude. 🙂

Gracias @pascaliske
De hecho, lo resolví usando captureMessage(message: string) que mencionaste.
Sería útil para los futuros visitantes :)

Cerrando este tema ya que parece estar resuelto.

¿Fue útil esta página
0 / 5 - 0 calificaciones