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 ກ່ຽວກັບການແປນີ້

ຖາມທຸກຢ່າງກ່ຽວກັບບົດບັນທຶກນີ້ - AI ຈະຊອກຫາສ່ວນທີ່ກ່ຽວຂ້ອງແລະຕອບ.

ແປເປັນພາສາອື່ນ

268. Handling Errors

ສັງລວມ

ຖາມ AI ກ່ຽວ​ກັບ​ການ​ແປ​ນີ້

ຖາມ AI ກ່ຽວກັບການແປນີ້