How can I detect client's network error through @sentry/browser ?

[Taewa]

• [o] Review the documentation: https://docs.sentry.io/
• [o] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [o] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• [o] @sentry/browser
• @sentry/node
• raven-js
• 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!

[pascaliske]

@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. 🙂

[Taewa]

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

[HazAT]

Closing this issue since it seems to be resolved.