如何跟踪错误、计数并将其发送到 Google Analytics

Question

我有一个拦截器，可以在每个 api 错误时重定向到路由

/page-error

    return next.handle(request.clone()).pipe(
      catchError((err: any) => {
        this.router.navigate(['/page-error']);
        return throwError(error);
      })
    )

AppComponent 用于跟踪

page-error

    router.events.pipe(
      distinctUntilChanged((previous: any, current: any) => {
        if (current instanceof NavigationEnd) {
          return previous.url === current.url;
        }
        return true;
      }),
      filter(current => current.url === '/page-error')
    )
    .subscribe((current: any) => {
      //count as error and send it to GA
    });

我想统计如果出现API错误，页面错误被登陆了多少次。

但我有一个问题，例如：

用户当前在首页（这里没有发生API错误），然后返回上一页（这是错误页面），算作错误。当下一页是错误页时也会出现这种情况；

有办法防止在这些情况下不计为错误吗？

Answer 1

利用 Angular 的 NavigationExtras，它允许您在路由期间传递附加信息。您可以执行以下操作：

return next.handle(request.clone()).pipe(
  catchError((err: any) => {
    this.router.navigate(['/page-error'], { state: { fromInterceptor: true } });
    return throwError(err);
  })
)

应用程序组件

router.events.pipe(
  filter(event => event instanceof NavigationEnd),
  map(() => this.router.getCurrentNavigation()),
  filter(navigation => {
    return navigation && navigation.extras && navigation.extras.state && navigation.extras.state.fromInterceptor;
  }),
  filter(current => current.finalUrl && current.finalUrl.toString() === '/page-error')
)
.subscribe((current: any) => {
  // count as error and send it to GA
});