我将如何使用 RXJS 实现 "lazy execution timer"

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

Emits a value from the source Observable only after a particular time span has passed without another source emission.

我怎么能看到，您在调用 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);
       };
    };

}

我将如何使用 RXJS 实现 "lazy execution timer"

How would I implement "lazy execution timer" using RXJS

settimeout

rxjs

angular