How to pick last n number of distinct messages using rxjs from stream

0
votes

I have been working on a piece in my ReactJs app where I will log all the client errors to the server. The idea I have is as most of the time duplicate client error can come on client side, pick the latest distinct one by "error message" and then send it to server.

Below is the error message object that I will be using:

{
"errorMessage":
"errorDescription":
"stackTrace":
}

Then I created a service class to save the message in a Subject:

import { Subject } from "rxjs";

export class ErrorHandlingService {
    #dataStreamSubject = new Subject();
    dataStream$ = this.#dataStreamSubject.asObservable();

    addData(data) {
        this.#dataStreamSubject.next(data)
    }
}

Then somewhere in my component I added below code:

const subscription = errorService.dataStream$.pipe(
      map(data => data),
      debounceTime(2000),
      distinct()
    ).subscribe({
      next: function (value) {
        console.log(value); //Send to server
      }
    });

If I use this code then I will get the last most single error message that was distinct and I will send to server. But while the server is processing the request there can be lets say 2 more distinct error message coming in. So now I need to get the 2 new messages coming in the stream. The above code returns me last 1 message. Just confused how I can handle this with rxjs operators.

javascriptreactjsexceptionrxjsreactive-programming