Sentry-javascript: 如何通过 @sentry/browser 检测客户端的网络错误?

创建于 2018-12-19  ·  3评论  ·  资料来源: getsentry/sentry-javascript

  • [o] 查看文档: https ://docs.sentry.io/
  • [o] 搜索现有问题: https ://github.com/getsentry/sentry-javascript/issues
  • [o] 使用最新版本: https ://github.com/getsentry/sentry-javascript/releases

套餐+版本

  • [o] @sentry/browser
  • [x] @sentry/node
  • [ ] raven-js
  • [x] raven-node _(节点乌鸦)_
  • [ ] 其他:Angular6 + Ngrx6

版本:

@sentry/browser": "4.4.2"

描述

大家好,
如上所述,我使用的是 Angular6 + Ngrx6。
我想要做的是当 webApp 调用 api 失败时向 Sentry 发送错误。
假设我调用了一个名为/abc/3的 API,但它并不存在。
然后客户端收到404 Not Found错误。
这是我想通过@sentry/browser发送给 Sentry 的那个。

我创建了一个简单的服务。

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

并创建了SentryErrorHandler扩展了 Angular 的ErrorHandler

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

此代码可以很好地检测到正常的 js 错误,例如
abcdefg(); // <- this function doesn't exist so it occurs an error and sent to Sentry.

但是,我发现上面的代码没有检测到网络错误。 (就像我说/abc/3

所以我创建了ErrorInterceptor ,它扩展了 Angular 的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);
                }
            })
        );
    }
}

然后我可以捕捉到网络错误。
但问题是我在 Sentry 仪表板中看不到任何内容。
我检查了我的 Chrome 网络标签。 我可以找到一条消息:
“使用键捕获的非错误异常:错误、标头、消息、名称、好的……”

所以我猜@sentry/browser 不认为这是一个错误。

我还发现关于Non-Error exception captured with keys: error, headers, message, name, ok…

所以这是我的问题。

  1. @sentry/browser 是为了捕捉客户端网络错误?
  2. 如果 1 为真,我怎样才能使它工作? (希望有角度的方式)
  3. 如果 2 为假,网络错误是否应该由后端处理?

谢谢!

最有用的评论

@Taewa Angular 抛出的错误对象与SentryEvent的格式不同。

一种方法是将captureMessage(message: string)与一些错误信息一起使用。 这也是我选择的更简单的方法: https ://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

另一种方法是自己构建一个 Sentry 事件对象并使用captureEvent(event: SentryEvent)方法将其发送到 Sentry。

希望这可以帮助。 🙂

所有3条评论

@Taewa Angular 抛出的错误对象与SentryEvent的格式不同。

一种方法是将captureMessage(message: string)与一些错误信息一起使用。 这也是我选择的更简单的方法: https ://github.com/pascaliske/ngx-sentry/blob/master/projects/ngx-sentry/src/lib/sentry.interceptor.ts

另一种方法是自己构建一个 Sentry 事件对象并使用captureEvent(event: SentryEvent)方法将其发送到 Sentry。

希望这可以帮助。 🙂

谢谢@pascaliske
我实际上是通过使用您提到的captureMessage(message: string)解决的。
这对未来的访客会有所帮助:)

关闭此问题,因为它似乎已解决。

此页面是否有帮助?
0 / 5 - 0 等级