DEV Community: George Knap

The catch in the RxJS catchError

George Knap — Fri, 09 Jun 2023 05:01:04 +0000

Hi friends, George here.

Catching errors in rxjs streams can be troublesome.

Let's explain 3 different options and outcomes for our demo use case:
Let's imagine we have a component that fetch data for different entities from the database. Fetch requests come in time in a form of rxjs stream - for our case let us mock it with rxjs interval

const interval$ = interval(1000).pipe(skip(1));

Also, we have an API service which is responsible for getting a data. However, our API is not reliable and from time to time throws an error

@Injectable(
  providedIn: 'root',
})
export class DemoService {
  /**
   * mock of an api endpoint which throws an error on each even call
   */
  getData(counter: number): Observable<any> {
    if (counter % 2 === 0) {
      return throwError(() => new Error());
    }


    return of(`some demo data ${counter}`);
  }
}

Let's get the data from the API service in ngOnInit

  ngOnInit() {
    const interval$ = interval(1000).pipe(skip(1));


    this.data$ = interval$.pipe(
      tap((i) => console.log(i)),
      switchMap((i) => this.demoService.getData(i)),
    );

Now, how do we handle these errors incoming from the API?

1. catchError and returning new observable

In my team this is what we have done many time without thinking it through

this.data$ = interval$.pipe(
      switchMap((i) => this.demoService.getData(i)),
      catchError(() => of('error is cought from api'))
    );

What we did not realize is that we are re-emitting new observable - the one created by of() function and the data$ will subscribe to it. Hence returning the caught value and completing the stream.
This is what happens

> 1
> 2 //cought

streamed was unsubscribed

2. catchError while returning the cought observable

If you look at the catchError documentation you can see the callback actually takes two parameters: error itself and the cought observable

catchError<T, O extends ObservableInput<any>>(selector: (err: any, caught: Observable<T>) => O): OperatorFunction<T, T | ObservedValueOf<O>>

we can use this to re-emit the original observable

this.data$ = interval$.pipe(
      switchMap((i) => this.demoService.getData(i)),
      catchError((err, cought$) => cought$)
    );

this way the stream will start emitting values again

> 1
> 2//cought
> 1
> 2//cought
> 1
> ...

3. catchError inside service stream

In order to continue the original stream with new incoming values we have to move the catch to the inner observable

    this.data$ = interval$.pipe (
      switchMap((i) =>
        this.demoService.getData(i).pipe(catchError(() => of('cought')))
      )
    );

this way we get a stream with cought values

> 1
> 2 //cought
> 3
> 4 //cought
> 5
> 6 //cought
> 7
> ...

If you're lazy like me feel free to see the demo in Stackblitz

Happy catching!

takeUntilDestroyed() - How I got disappointed

George Knap — Thu, 08 Jun 2023 16:44:45 +0000

Hi Friends, George here.

It was a big surprise for me - takeUntilDestroyed - finally something natively supported by Angular coming to version 16.

When it arrived I was disapponted. Why?
Well let's say I was hoping for something more seamless to use.

Let's have a look at how this new pipe is implemented:

export function takeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T> {
  if (!destroyRef) {
    assertInInjectionContext(takeUntilDestroyed);
    destroyRef = inject(DestroyRef);
  }

  const destroyed$ = new Observable<void>(observer => {
    const unregisterFn = destroyRef!.onDestroy(observer.next.bind(observer));
    return unregisterFn;
  });

  return <T>(source: Observable<T>) => {
    return source.pipe(takeUntil(destroyed$));
  };
}

What is that weird destroyRef parameter?

DestroyRef is an injectable token which can take a callback onDestroy and this callback will be executed right before it's scope is destroyed. Angular needs this reference object to know when the to clean up your sbscription.

And that's the little annoying thing about this pipe. It's not magic! It doesn't work by itself! It always needs to have this destroyRef object.

How does it get it? There are two ways you can see in the code:

 if (!destroyRef) {
    assertInInjectionContext(takeUntilDestroyed);
    destroyRef = inject(DestroyRef);
  }

You can provide destroyRef manually as a pipe parameter
You can let Angular to inject it by itself

This second option seems easy, right? No, because you need to be in the injection context.

Wait a sec, don't we have injection context everywhere?

No.

Here's where injection context works:

inject() must be called from an injection context 
such as a constructor, a factory function, a field initializer, 
or a function used with `runInInjectionContext`.

Get it?
You want to subscribe to an observable in ngOnInit and use takeUntilDestroyed to handle unsubscribe? Tough luck! You're not in the injection context.

How do we do it then?

We do it by injecting destroyRef in the injection context and passing it as a parameter to the pipe.
Example:

class MyComponent {
  destroyRef = inject(DestroyRef);
  ngOnInit() {
    timer(0, 1000).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(n => console.log('timer', n));
  }
}

And here we are. The amount of code to do it is now quite similar to well known method of declaring an unsubscribe subject by yourself.

As we see this is not magic solution to all world's problems. In fact we should still keep in mind to try not to subscribe manually.

I was really looking forward to a future to discard our typescript mixin that handles unsubscribe logic inside a base class that you have to extend if needed. I might share it with you in another post so stay tuned.

Enjoy coding

To learn more about DestroyRef provider I highly recommend this video from Dmytro on Decoded Fronted Youtube channel

Dark/Light mode for apps based on Windows system theme as a keyboard shortcut

George Knap — Wed, 07 Jun 2023 09:06:10 +0000

Hi friends, George here.

Have you ever taken your laptop from your dark programmer's office to a sunny rooftop to enjoy some fresh air, grab a beer and do some work?

Sure George, sounds like a great idea however, I can't see anything on my screen on that sunny rooftop!

Well, could the problem be that you have a dark mode active in all your apps? What if there was a way to quickly toggle system settings to light mode and all the apps will adjust their themes?

That exactly is what we are going to do!

Step 1

create a PowerShell script .ps1 file with following code (thanks chatGPT!):

$RegKeyPath = "HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize"
$AppsUseLightTheme = Get-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme"
$SystemUsesLightTheme = Get-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme"
if ($AppsUseLightTheme.AppsUseLightTheme -eq 1 -and $SystemUsesLightTheme.SystemUsesLightTheme -eq 1) {
Set-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme" -Value 0
Set-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme" -Value 0
} else {
Set-ItemProperty -Path $RegKeyPath -Name "AppsUseLightTheme" -Value 1
Set-ItemProperty -Path $RegKeyPath -Name "SystemUsesLightTheme" -Value 1
}
Restart-Process -ProcessName explorer

Step 2

create a shorcut file in a convenient location and name it toggle.exe

Step 3

Open your shortcut's file properties.
Add a target for your shortcut like this:
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy Bypass -File "C:\path\to\your\theme\toggle\script.ps1"
Also add a keyboard shortut you'd like to switch your themes.

Now half of the work is done! Let's test it. Press the keyboard shortcut and your Windows theme will toggle beteween dark/light mode.

Step 4

Set your apps to follow System theme. Many windows apps supports this options in their settings. For example: vscode allows you to set preffered light and dark themes when you turn on Auto Detect Color Scheme:

As a web developer how do I support this?

CSS has very handy prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  .theme {
    background: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  .theme {
    background: white;
    color: black;
  }
}

In Angular, you can create service that will expose a signal like this

@Injectable({
  providedIn: 'root',
})
export class SystemMediaService {
  #query = '(prefers-color-scheme: dark)';
  #prefersColorScheme = signal<'dark' | 'light'>(window.matchMedia(this.#query).matches ? 'dark' : 'light');
  prefersColorScheme = computed(() => this.#prefersColorScheme());

  constructor() {
    window.matchMedia(this.#query).addEventListener('change', event => {
      this.#prefersColorScheme.set(event.matches ? 'dark' : 'light');
    });
  }
}