CODEWITHSUNDEEP
javascripttypescriptrxjsrxjs-pipeable-operators
Ran Lottem
Ran Lottem

Reputation: 486

rxjs operator that adds logging before and after a callback

I'm trying to turn this:

/* ...inside a pipe */
tap(() => logData('my process')),
tap(() => someCallback()),
tap(() => logDataEnd('my process'),
/* pipe continues */

Into a new operator that takes the callback () => someCallback() and adds the logging side-effects before and after it. My logging functions use performance.now() and they work as expected* when I just use the explicit tap version, but none of my operators do the same thing.

Expected Results

A pipe using my operator:

of(null).pipe(
  withLogging(() => callbackA()),
  withLogging(() => callbackB()),
  /* etc. */
)

should produce a log that looks like this:

Action A start
Action A end
Action B start
Action B end
...

However I'm getting this:

Action A start
Action B start
/* ... rest of the pipe */
Action A end
Action B end

By looking at the timestamps I can see that the end logs are timestamped correctly but the begin ones are too early.

I've tried using defer in different ways but the outcome doesn't change.

What I've tried

withLogging<T, R>(project: (value :T) => R): OperatorFunction<T, R> {
  return (source: Observable<T>) =>
  defer(() => of(startLogging())).pipe(
    flatMap(() => source),
    tap(() => stopLogging())
  );
}

I've tried wrapping the entire pipe with a defer or just the start of the logging process, or doing of(null).pipe and then putting all of the effects together. I've even tried not using defer at all and just returning a pipe starting with null. Nothing has produced the desired behavior.

Upvotes: 1

Views: 484

Answers (1)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175028

Unless your someCallback() is itself asynchronous and/or you would want to flatMap it in the future, I wouldn't implement a new operator here. A simple vanilla higher order function will do what you need nicely.

function withLogging<A extends unknown[], C>(
  cb: (this: C, ...args: A) => void
) {
  return function(this: C, ...args: A) {
    console.log("before");
    cb.call(this, ...args);
    console.log("after");
  };
}

// snip

function someCallback() {
    console.log('Hello!');
}

someObs$.tap(withLogging(someCallback)); // before, Hello!, after for each pushed element

Upvotes: 1

Related Questions