How can I catch errors from callback function

Question

I have a component with this:

      this.loginService.login(this.user, () => {
        this.router.navigateByUrl('/');
      });

And a service with this method:

    login(credentials, callback) {
        const headers = new HttpHeaders(credentials ?
            { authorization: 'Basic ' + btoa(credentials.email + ':' + credentials.password) }
            : {});

        this.http.get(this.API.crudAdmin + 'admin?email=' + credentials.email,
            { headers: headers }).subscribe(response => {
                if (response['name']) {
                    this.authenticated = true;
                } else {
                    this.authenticated = false;
                }
                return callback && callback();
            }, error => {
                throw new Error('Error');
            });
    }

How could I catch the error thrown from login method when I call it from the component?

Amardeep Bhowmick · Accepted Answer · 2020-04-14 02:42:40Z

You can pass in an error callback function along with the success callback. The error callback would be called when the GET request fails:

this.loginService.login(this.user,
  () => this.router.navigateByUrl('/'),
  //handle the error here, log to an error service etc.
  (err) = > console.error(err)
);

On the service side, in the error handler of the Observable, you call the errorCallback you have passed from the component:

login(credentials, successCallback, errorCallback) {
  const headers = new HttpHeaders(credentials ? {
      authorization: 'Basic ' + btoa(credentials.email + ':' + credentials.password)
    } :
    {});

  this.http.get(this.API.crudAdmin + 'admin?email=' + credentials.email, {
    headers: headers
  }).subscribe(response => {
    if (response['name']) {
      this.authenticated = true;
    } else {
      this.authenticated = false;
    }
    successCallback && successCallback();
  }, 
  errorCallback);
}

A traditional try-catch won't work here as this is an asynchronous operation, the catch block won't be able catch the error when the GET fails eventually.

This is because the loginService.login method returns immediately while the GET request is made asynchronously in the background. Any error from the GET won't be handled by the catch block surrounding the loginService.login call.

Josh Hunt · Accepted Answer · 2020-04-14 01:05:42Z

2

It's a common pattern to pass the error as the first argument in the callback function. So your login function would look like:


login(credentuals, callback) {
  this.http.get(options).subscribe((response) => {
    // Logic, assuming it was successfuly, call callback with the first argument as null
    callback(null)
  }, (error) => {
    // in the event of an error, pass error exception as the first argument
    callback(error)
  });
}

so then you can handle this in your component:

this.loginService.login(credentials, (error) => {
  if (error) {
    // show error dialog, etc
  } else {
    this.router.navigateByUrl('/');
  }
})

answered Apr 14, 2020 at 1:05

Josh Hunt

14.5k26 gold badges83 silver badges99 bronze badges

Comments

Alex D · Accepted Answer · 2020-04-14 00:56:53Z

0

You can surround your function call in a try/catch block.

try {
    this.loginService.login(this.user, () => {
        this.router.navigateByUrl('/');
    });
} catch (error) {
    // do something with the thrown error
}

answered Apr 14, 2020 at 0:56

Alex D

6924 silver badges12 bronze badges

2 Comments

user2864740 Over a year ago

Won’t help if the error is thrown from inside the callback (eg. navigateByURL throws).

Alex D Over a year ago

That's true. I didn't see he mentioned the callback in the title, but rather just the error the login method throws in the question body. Either way, the question looks answered already so I'll leave this as is.

Collectives™ on Stack Overflow

How can I catch errors from callback function

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related