firebasefirebase-storageangularfire5

Catch in Angularfire2 v5 error


I am converting the use of Firebase Storage to use the Angularfire2 library (currently v5.0.0-rc.5-next) which means I am now using observables rather than promises.

How can I catch error such as storage/object-not-found and react accordingly?

This is currently my code but I cannot add a catch to it as some examples I found.

const avatarRef =  this.afStorage.ref('${userId}/avatar/${this.avatarThumbnail}${user.avatar}');

avatarRef.getDownloadURL()
    .take(1)
    .subscribe((avatarUrl) => {
        resolve(avatarUrl);
    });

Solution

  • At its most basic, observers take an error callback to receive any unhandled errors in an observable stream. getDownloadURL() returns Observable that is why you need to subscribe. If you get an error (file not found or other) you will invoke code from error callback only.

    avatarRef.getDownloadURL()
    .take(1)
    .subscribe((avatarUrl) => {
        // Do something with avatarUrl here
       console.log(avatarUrl);
    }, (error) => {
       // Handle error here
       // Show popup with errors or just console.error
       console.error(error);
    });
    

    Also I suggest you to read articles about error handling using RxJS and difference between Observable and Promise: link1, link2