我将如何使用 RXJS 实现“延迟执行计时器”

Question

我有一个用例，由于模板问题，Angular 的错误处理程序被 25 多条错误消息轰炸。由于我的自定义错误处理程序正在使用远程记录器 (sentry.io)，因此应用程序因对 sentry.io 的 API 请求过多而无响应。

现在我使用“懒惰的计时器”方法解决了这个问题，如下所示：

import { ErrorHandler, Injectable } from '@angular/core';
import { LoggingService } from './sentry.provider';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    private errorBuffer: Array<any>;
    private lazyTimer: any;

    constructor(private logger: LoggingService) {

        this.errorBuffer = [];

    };

    handleError(error) {

        this.errorBuffer.push(error);
        this.processErrorBuffer();

    };

    private processErrorBuffer() {

        if (this.lazyTimer) { clearTimeout(this.lazyTimer) };

        this.lazyTimer = setTimeout(() => {

            if (this.errorBuffer.length === 1) {

                let error = this.errorBuffer.pop();
                this.logger.reportError(error);

            } else if (this.errorBuffer.length > 1) {

                this.logger.reportError(this.errorBuffer);
                this.errorBuffer = [];

            };

        }, 300)
        
    };

}

所以基本上在每个错误之后而不是处理它我 setTimeout 它将执行错误处理逻辑或将被清除和更新（如果新错误在 300 毫秒内出现）。

这样我可以将单个错误发送到 Sentry 或批处理（数组）。

我尝试使用 RXJS 实现相同的逻辑，但未能找到方法。 我似乎不明白是哪个运营商执行这种定时器的更新。

那么我需要使用哪个运算符来使用 RXJS 复制此行为？

Answer 1

DebounceTime 描述（来自 RXJS 文档）：

https://rxjs-dev.firebaseapp.com/api/operators/debounceTime

仅在特定时间后从源 Observable 发出一个值 span 已经过去，没有其他源排放。

我怎么看，在调用 this.logger.reportError 函数后，您正在删除所有错误，因此无需使用 ReplaySubject。

取决于你的功能逻辑我是这样做的。请检查示例。

import { ErrorHandler, Injectable } from '@angular/core';
import { LoggingService } from './sentry.provider';
import { debounceTime, scan } from 'rxjs/operators'

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    private errorListener = new Subject();   // <-- you need to import subject from RXJS

    constructor(private logger: LoggingService) {
        this.errorListener
           .pipe(
              // scan operator will collect all of the responses in one array 
              scan((acc, curr) => [...acc, curr], []), 
              // debounceTime operator will trigger event for the listeners only once when after the last action passed 400 ms 
              debounceTime(400)
            ).subscribe(errorBuffer => { 
                // errorBuffer is the collected errors list
                this.processErrorBuffer(errorBuffer);
            })
    };

    handleError(error) {
        this.errorListener.next(error);
    };

    private processErrorBuffer(errorBuffer) {
      if (errorBuffer.length === 1) {

          this.logger.reportError(errorBuffer[0]);
       } else if (this.errorBuffer.length > 1) {

           this.logger.reportError(errorBuffer);
       };
    };

}