Error Handling in Signals
In this lesson, we will take a look at how to handle errors in Signals.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Demystifying Reactivity with Angular Signals course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Demystifying Reactivity with Angular Signals, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

[00:00 - 00:23] As can see, we've covered a lot of buying this course, but I would like to end this course by covering a bit of error handling when it comes to signals. To provide more context on this, in one of the discussion channels of the Angela GitHub repo, we're provided with a bit of insight on how to go about these intersections where we have error and completion states.
[00:24 - 00:54] We're provided with a bit of information on how to use the track hash block to undo errors when it comes to signals. On page to observables, which are able to return three types of notifications, which are next, error and completes, signals are only wrap-ups that are able to subscribe to the next notification, which means observables are able to undo errors easily due to the notifications that helps in returning the error compared to signals.
[00:55 - 01:06] For that doesn't mean we can't undo errors in signals. Based on the information provided in this GitHub discussion, we're going to try to replicate the information provided here in our code.
[01:07 - 01:20] To do that, we're going to simulate some form of errors in our product service file. So, it is just a visual studio code in our product.service.ts file, where we have our endpoints, that returns /products.
[01:21 - 01:34] We're going to add an extra S and then save to see what we get in the console. So I'm just going to open up visual studio code and then see if we have any form of errors based on our current implementation.
[01:35 - 01:44] As can see, we have this HTTP error response being returned. But there's no way we can display this currently on the page based on our current implementation.
[01:45 - 01:55] To attempt to do that, what I'm going to do is a straight to a service file and then create a new variable. This variable is going to be called products.
[01:56 - 02:08] And in fact, what I'm going to do is assign that product variable to the value we are getting from our signal. So what I'm going to do is copy this product signal, then play what we have right here.
[02:09 - 02:21] So we have the product variable, then we can now make use of the product signal , which we now hold the entire response as well as the error for this new implementation. So we can just make use of the computed reactive primitives.
[02:22 - 02:32] And within the computed reactive primitives, we can create a try-catch block. So I'm just going to say try and then patch, which is going to take in an argument of error.
[02:33 - 02:41] For the try-block, we're going to return these products. Oh, we can make it products since it's written in an area of products.
[02:42 - 02:54] So without implementation, why would we return this particular set of products coming from our signals? If the request is successful, boy, in the case of an error, we need to return an error message by making use of the return keyword.
[02:55 - 03:15] I'm just going to say return on so.log, error, time we are just going to save and then let's check the console. If we have the signal logging the error in this particular block, as you can see in product service, see as well on line 22, which is where we have this particular log, we get the HTTP error response displaying.
[03:16 - 03:26] What all I would like to do is to display an alert box inside of our project and then display an error message. So to do that, it illustrates to the velocity of code.
[03:27 - 03:40] What I'm going to do is I'm going to say alert, error, and because we want to get the message inside of the object, we can just make use of a bracket notation and then pass in the message. Boy, we have an error that says error is type of unknown.
[03:41 - 03:47] In this situation, we don't know what objects might be returned in the error block. So I'm just going to pass in a type of any.
[03:48 - 03:54] And with that, the error gets discarded. There we can save, it passes the browser with what the products refresh.
[03:55 - 04:07] And then we get an analysis HTTP response for local or products not found. That is, it's letting us know that the URL for this particular API is incorrect .
[04:08 - 04:24] With this, we're able to get an insight into one of the ways in which errors can be handled and signals. Over time, as improvements are made on signals, we'll get to have more ways and more contests on how to fix errors when it comes to signals.
[04:25 - 04:33] For now, we'll get an introductory view on how to undo error with signals. And that's it for this lesson thank you very much for watching.