268. Handling Errors

Jul 21, 2026 06:00 · 6:38 · English · Whisper Turbo · 1 Дисплей

Ин нусхаи нус 7 рӯзҳо. Навсозии барои захираи доимӣ →

Индекси дарс

0:02

S… Speaker 1 (268. Handling Errors)

Thus far,

0:02

S… Speaker 1 (268. Handling Errors)

our requests always succeeded.

0:05

S… Speaker 1 (268. Handling Errors)

But of course,

0:06

S… Speaker 1 (268. Handling Errors)

when interacting with servers,

0:07

S… Speaker 1 (268. Handling Errors)

things can go wrong.

0:09

S… Speaker 1 (268. Handling Errors)

You might not have an internet connection or you're sending a request

0:13

S… Speaker 1 (268. Handling Errors)

with incorrect data somehow because you have a bug in your program or whatever it

0:17

S… Speaker 1 (268. Handling Errors)

is.

0:18

S… Speaker 1 (268. Handling Errors)

Or your server fails.

0:20

S… Speaker 1 (268. Handling Errors)

Maybe it's offline or there's an error on the server or

0:24

S… Speaker 1 (268. Handling Errors)

you're not authenticated.

0:25

S… Speaker 1 (268. Handling Errors)

There are dozens of things that can go wrong.

0:28

S… Speaker 1 (268. Handling Errors)

And we can simulate such a thing that can go wrong by

0:32

S… Speaker 1 (268. Handling Errors)

going to Firebase and there in the database,

0:35

S… Speaker 1 (268. Handling Errors)

let's go to rules.

0:36

S… Speaker 1 (268. Handling Errors)

And remember that when we created that database,

0:39

S… Speaker 1 (268. Handling Errors)

we enabled test mode,

0:41

S… Speaker 1 (268. Handling Errors)

which essentially means that read and write access to this database is

0:45

S… Speaker 1 (268. Handling Errors)

granted to everyone.

0:46

S… Speaker 1 (268. Handling Errors)

You don't need to authenticate yourself.

0:49

S… Speaker 1 (268. Handling Errors)

Now, we will add authentication in the authentication module later

0:54

S… Speaker 1 (268. Handling Errors)

in the course.

0:54

S… Speaker 1 (268. Handling Errors)

And therefore,

0:55

S… Speaker 1 (268. Handling Errors)

for now, we open this up to everyone.

0:57

S… Speaker 1 (268. Handling Errors)

Now,

0:58

S… Speaker 1 (268. Handling Errors)

if I lock this down,

1:00

S… Speaker 1 (268. Handling Errors)

though, so if I say you're not allowed to read,

1:02

S… Speaker 1 (268. Handling Errors)

for example,

1:03

S… Speaker 1 (268. Handling Errors)

you can still write,

1:04

S… Speaker 1 (268. Handling Errors)

but you're not allowed to read.

1:06

S… Speaker 1 (268. Handling Errors)

And by setting this to false,

1:07

S… Speaker 1 (268. Handling Errors)

there is no condition under which you would ever be allowed,

1:10

S… Speaker 1 (268. Handling Errors)

not even if you are authenticated.

1:12

S… Speaker 1 (268. Handling Errors)

So if I lock this down,

1:14

S… Speaker 1 (268. Handling Errors)

what happens is that if I now try to fetch posts

1:18

S… Speaker 1 (268. Handling Errors)

here,

1:19

S… Speaker 1 (268. Handling Errors)

you see we get an error.

1:20

S… Speaker 1 (268. Handling Errors)

And that of course happens,

1:23

S… Speaker 1 (268. Handling Errors)

errors occur,

1:24

S… Speaker 1 (268. Handling Errors)

but it is important how we react to that error.

1:28

S… Speaker 1 (268. Handling Errors)

For now,

1:29

S… Speaker 1 (268. Handling Errors)

for example here,

1:30

S… Speaker 1 (268. Handling Errors)

we stay in this loading state and that is not a great user experience

1:35

S… Speaker 1 (268. Handling Errors)

because now we as a user have no idea that there was an error and

1:39

S… Speaker 1 (268. Handling Errors)

that something failed.

1:40

S… Speaker 1 (268. Handling Errors)

Therefore,

1:41

S… Speaker 1 (268. Handling Errors)

proper error handling matters.

1:43

S… Speaker 1 (268. Handling Errors)

Now,

1:44

S… Speaker 1 (268. Handling Errors)

how can we handle errors?

1:46

S… Speaker 1 (268. Handling Errors)

There are different ways of doing that.

1:48

S… Speaker 1 (268. Handling Errors)

Let me demonstrate the first possible way.

1:50

S… Speaker 1 (268. Handling Errors)

Here, onFetchPost fails because,

1:53

S… Speaker 1 (268. Handling Errors)

well,

1:53

S… Speaker 1 (268. Handling Errors)

we have an error.

1:54

S… Speaker 1 (268. Handling Errors)

Thus far,

1:56

S… Speaker 1 (268. Handling Errors)

we only passed one function to subscribe,

1:58

S… Speaker 1 (268. Handling Errors)

and that is the function that fires when new data is emitted.

2:01

S… Speaker 1 (268. Handling Errors)

Now,

2:02

S… Speaker 1 (268. Handling Errors)

as you learned in the observables section,

2:04

S… Speaker 1 (268. Handling Errors)

you can pass more arguments to subscribe,

2:06

S… Speaker 1 (268. Handling Errors)

and the second argument is a function that triggers whenever an

2:11

S… Speaker 1 (268. Handling Errors)

error is thrown.

2:12

S… Speaker 1 (268. Handling Errors)

And there we will get the error object as an argument.

2:15

S… Speaker 1 (268. Handling Errors)

And now here we can do something to handle that error,

2:19

S… Speaker 1 (268. Handling Errors)

to do something to provide a better user interface or a

2:23

S… Speaker 1 (268. Handling Errors)

better user experience.

2:24

S… Speaker 1 (268. Handling Errors)

And that often starts with a better user interface.

2:26

S… Speaker 1 (268. Handling Errors)

So for example,

2:27

S… Speaker 1 (268. Handling Errors)

here, what we could do is we could display an error message instead of loading.

2:32

S… Speaker 1 (268. Handling Errors)

So down there where we display loading or the content

2:36

S… Speaker 1 (268. Handling Errors)

we loaded, we could actually introduce a new property.

2:41

S… Speaker 1 (268. Handling Errors)

and set this to null initially,

2:43

S… Speaker 1 (268. Handling Errors)

so we have no error initially.

2:46

S… Speaker 1 (268. Handling Errors)

If this is not null,

2:48

S… Speaker 1 (268. Handling Errors)

so if we do have an error and we'll add logic to change that soon,

2:51

S… Speaker 1 (268. Handling Errors)

I want to add a div here with the classes alert

2:55

S… Speaker 1 (268. Handling Errors)

and alert danger,

2:56

S… Speaker 1 (268. Handling Errors)

which are bootstrap classes,

2:58

S… Speaker 1 (268. Handling Errors)

where I simply have let's say h1 tag and

3:02

S… Speaker 1 (268. Handling Errors)

error occurred.

3:06

S… Speaker 1 (268. Handling Errors)

And below that,

3:07

S… Speaker 1 (268. Handling Errors)

I wanna output error because error in my case

3:11

S… Speaker 1 (268. Handling Errors)

in this application here could just be an error message.

3:13

S… Speaker 1 (268. Handling Errors)

And of course, it's up to you how you exactly manage that and what you store in there.

3:17

S… Speaker 1 (268. Handling Errors)

Now,

3:18

S… Speaker 1 (268. Handling Errors)

the idea is that this here,

3:20

S… Speaker 1 (268. Handling Errors)

this div is only shown if we have

3:23

S… Speaker 1 (268. Handling Errors)

an error so if error is true -ish which it is not if

3:27

S… Speaker 1 (268. Handling Errors)

it is null initially it's null and therefore it's treated as a false value

3:31

S… Speaker 1 (268. Handling Errors)

and therefore initially this will not show up but as soon as we set this to some

3:35

S… Speaker 1 (268. Handling Errors)

string it becomes true -ish and then this will show up this

3:40

S… Speaker 1 (268. Handling Errors)

also means that i only want to show loading if we are fetching and we're

3:44

S… Speaker 1 (268. Handling Errors)

not having an error because if we have an error i never want to show

3:48

S… Speaker 1 (268. Handling Errors)

loading i want to show my alert here

3:52

S… Speaker 1 (268. Handling Errors)

Now, the remaining step is to set that error.

3:55

S… Speaker 1 (268. Handling Errors)

And of course, I want to do this here in my error handling function.

3:59

S… Speaker 1 (268. Handling Errors)

And I will simply set this error equal to error

4:03

S… Speaker 1 (268. Handling Errors)

.message because by default,

4:05

S… Speaker 1 (268. Handling Errors)

error objects have a message.

4:07

S… Speaker 1 (268. Handling Errors)

The question is if that message is helpful,

4:09

S… Speaker 1 (268. Handling Errors)

but at least we can set this message for now.

4:13

S… Speaker 1 (268. Handling Errors)

Now important,

4:14

S… Speaker 1 (268. Handling Errors)

of course,

4:14

S… Speaker 1 (268. Handling Errors)

we are fetching posts not just here,

4:17

S… Speaker 1 (268. Handling Errors)

but also in ngOnInit.

4:19

S… Speaker 1 (268. Handling Errors)

So there we should add the second argument as well.

4:22

S… Speaker 1 (268. Handling Errors)

And with that,

4:24

S… Speaker 1 (268. Handling Errors)

let's have a look.

4:24

S… Speaker 1 (268. Handling Errors)

Let's wait for that to reload.

4:25

S… Speaker 1 (268. Handling Errors)

And here it is already.

4:27

S… Speaker 1 (268. Handling Errors)

Now,

4:28

S… Speaker 1 (268. Handling Errors)

of course, you can see this is the error message we're getting.

4:30

S… Speaker 1 (268. Handling Errors)

Might not be too useful.

4:32

S… Speaker 1 (268. Handling Errors)

You can definitely tweak that.

4:34

S… Speaker 1 (268. Handling Errors)

You can show your own error message.

4:36

S… Speaker 1 (268. Handling Errors)

You can dive into that in more details.

4:39

S… Speaker 1 (268. Handling Errors)

And if you,

4:40

S… Speaker 1 (268. Handling Errors)

for example,

4:41

S… Speaker 1 (268. Handling Errors)

need more information from the error response,

4:44

S… Speaker 1 (268. Handling Errors)

well,

4:45

S… Speaker 1 (268. Handling Errors)

let's have a look at the error we got here.

4:49

S… Speaker 1 (268. Handling Errors)

Let me save that.

4:51

S… Speaker 1 (268. Handling Errors)

Now if I fetch posts,

4:52

S… Speaker 1 (268. Handling Errors)

this is getting locked and you see what I log here is indeed a full

4:57

S… Speaker 1 (268. Handling Errors)

error response object.

4:58

S… Speaker 1 (268. Handling Errors)

Now there you see that message we accessed,

5:01

S… Speaker 1 (268. Handling Errors)

but you also see you got,

5:04

S… Speaker 1 (268. Handling Errors)

for example,

5:04

S… Speaker 1 (268. Handling Errors)

another error.

5:06

S… Speaker 1 (268. Handling Errors)

key with yet another error key that has maybe a more helpful error

5:10

S… Speaker 1 (268. Handling Errors)

message this however is not guaranteed to exist this only exists because

5:14

S… Speaker 1 (268. Handling Errors)

our error here is an error response so the firebase

5:18

S… Speaker 1 (268. Handling Errors)

server sending back a customized error response now the important

5:22

S… Speaker 1 (268. Handling Errors)

thing to memorize about that however is you will get that http

5:27

S… Speaker 1 (268. Handling Errors)

error response object by angular and it will have an error key but

5:31

S… Speaker 1 (268. Handling Errors)

the detailed

5:33

S… Speaker 1 (268. Handling Errors)

Content of what's in there depends on the API you're talking

5:38

S… Speaker 1 (268. Handling Errors)

to. Firebase gives you an object with another error key and

5:42

S… Speaker 1 (268. Handling Errors)

that permission denied message.

5:43

S… Speaker 1 (268. Handling Errors)

Your own API might not be sending this or might be sending different

5:47

S… Speaker 1 (268. Handling Errors)

data.

5:47

S… Speaker 1 (268. Handling Errors)

So it's always important to understand which API you're working with

5:52

S… Speaker 1 (268. Handling Errors)

and what this API sends back in the case of a success message

5:56

S… Speaker 1 (268. Handling Errors)

or in the case of an error.

5:58

S… Speaker 1 (268. Handling Errors)

If you need more information,

6:00

S… Speaker 1 (268. Handling Errors)

about the error though and not just that generic message then you can dive

6:05

S… Speaker 1 (268. Handling Errors)

into that error object you're getting which is that object we're logging here and

6:09

S… Speaker 1 (268. Handling Errors)

there you see you can also get information about the headers you can get the exact

6:13

S… Speaker 1 (268. Handling Errors)

status code that was thrown which can be very helpful in showing a more useful

6:17

S… Speaker 1 (268. Handling Errors)

message and so on

6:20

S… Speaker 1 (268. Handling Errors)

So you have all of that at your disposal and I strongly encourage

6:24

S… Speaker 1 (268. Handling Errors)

you to simply play around with that to properly handle errors in

6:28

S… Speaker 1 (268. Handling Errors)

your application too.

6:29

S… Speaker 1 (268. Handling Errors)

However,

6:30

S… Speaker 1 (268. Handling Errors)

this is just one way of handling errors.

6:32

S… Speaker 1 (268. Handling Errors)

Let me show you another way that might be more suitable in other cases.

Ин нусхаи навишташуда бо AI (муайянкунии худкори сухан) эҷод шудааст. Мумкин аст хатогиҳо дошта бошад - барои истифодаи муҳим бо аудиои аслӣ тафтиш кунед. Сиёсати AI

❤️ Шумо STT.ai- ро дӯст медоред? Ба дӯстонатон бигӯед!

Ҷамъбаст

Барои эҷоди ҷамъбасти AI- и ин нусхаи навиштаҷот, тугмаи ҷамъбастро пахш кунед.

Дар бораи ин нусхаи навиштаҷот аз AI пурсед

Дар ин ҷо ба шумо дар бораи ин раванд маълумот дода мешавад: Интихоби дурусти раванди эҷодӣ ва раванди таҳия.

& Дигарро гузарондан