Sentry-javascript: How can I detect client's network error through @sentry/browser ?

Created on 19 Dec 2018  Â·  3Comments  Â·  Source: getsentry/sentry-javascript

Package + Version

  • [o] @sentry/browser
  • [x] @sentry/node
  • [ ] raven-js
  • [x] raven-node _(raven for node)_
  • [ ] other: Angular6 + Ngrx6

Version:

@sentry/browser": "4.4.2"

Description

Hi all,
As I described above, I am using Angular6 + Ngrx6.
What I want to do is that sending an error to Sentry when webApp fails api call.
Let's say, I call an api called /abc/3 which does not exist.
Then client gets 404 Not Found error.
And this is the one that I want to send to Sentry through @sentry/browser.

I have created a simple service.

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

and have created SentryErrorHandler which extends Angular's ErrorHandler

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

This code detects well normal js error such as
abcdefg(); // <- this function doesn't exist so it occurs an error and sent to Sentry.

However, I figured out that the above code doesn't detect network error. ( Like I said /abc/3 )

So I have created ErrorInterceptor which extends Angular's HttpInterceptor.

@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);
                }
            })
        );
    }
}

Then I could catch the network error.
But the problem is I can't see any in my Sentry dashboard.
I checked my Chrome network tab. And I could find a message :
"Non-Error exception captured with keys: error, headers, message, name, ok…"

So I guess @sentry/browser doesn't think this is an error.

I also found out this that talking about Non-Error exception captured with keys: error, headers, message, name, ok…

So here is my questions.

  1. @sentry/browser is meant to be catching client network error?
  2. If 1 is true, how can I make it work ? (Hopefully Angular way)
  3. If 2 is false, should network error be handled by backend?

Thanks!

Most helpful comment

@Taewa The error object thrown by Angular is not in the same format as an SentryEvent.

One way would be to just use the captureMessage(message: string) with some of the error info. That's the simpler way I've chosen also: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Another way would be to build an Sentry event object by yourself and use the captureEvent(event: SentryEvent) method to send it to Sentry.

Hope this helps. 🙂

All 3 comments

@Taewa The error object thrown by Angular is not in the same format as an SentryEvent.

One way would be to just use the captureMessage(message: string) with some of the error info. That's the simpler way I've chosen also: https://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

Another way would be to build an Sentry event object by yourself and use the captureEvent(event: SentryEvent) method to send it to Sentry.

Hope this helps. 🙂

Thanks @pascaliske
I actually solved by using captureMessage(message: string) which you mentioned.
It'd be helpful for the future visitors :)

Closing this issue since it seems to be resolved.

Was this page helpful?
0 / 5 - 0 ratings