1
00:00:00,000 --> 00:00:02,000
Now this loading.JS file,

2
00:00:02,000 --> 00:00:05,000
even though we're not using it anymore here

3
00:00:05,000 --> 00:00:08,000
is not the only other special file you can add

4
00:00:08,000 --> 00:00:11,000
in that app folder in your next project,

5
00:00:11,000 --> 00:00:14,000
because besides loading and page and layout,

6
00:00:14,000 --> 00:00:18,000
we, for example, can also add an error.js file,

7
00:00:19,000 --> 00:00:23,000
which will handle potential errors that might be generated

8
00:00:23,000 --> 00:00:25,000
by your pages and components,

9
00:00:25,000 --> 00:00:29,000
for example, if loading some data fails,

10
00:00:29,000 --> 00:00:32,000
and that of course could happen here if our database

11
00:00:32,000 --> 00:00:37,000
is offline, which is unlikely for a SQLite database,

12
00:00:37,000 --> 00:00:38,000
but which could happen

13
00:00:39,000 --> 00:00:40,000
if it would be a remote database server,

14
00:00:40,000 --> 00:00:43,000
or if anything else goes wrong.

15
00:00:44,000 --> 00:00:48,000
And to simulate this, let's simply go to the lib folder

16
00:00:48,000 --> 00:00:52,000
in the meals.js file and then here,

17
00:00:52,000 --> 00:00:55,000
let's throw an error, a new error

18
00:00:55,000 --> 00:00:57,000
where we say loading meals failed.

19
00:00:59,000 --> 00:01:01,000
Something like this, doesn't really matter.

20
00:01:01,000 --> 00:01:03,000
Now if I do that

21
00:01:03,000 --> 00:01:06,000
and I remove this error.js file again.

22
00:01:06,000 --> 00:01:07,000
We'll re-add it soon,

23
00:01:07,000 --> 00:01:10,000
but if I remove it for now, you'll see that now

24
00:01:10,000 --> 00:01:13,000
if we reload this page, we'll load the data

25
00:01:13,000 --> 00:01:15,000
and after five seconds,

26
00:01:15,000 --> 00:01:16,000
we'll get an error.

27
00:01:17,000 --> 00:01:19,000
And the error screen we see here

28
00:01:19,000 --> 00:01:23,000
is just a development version of this error screen.

29
00:01:24,000 --> 00:01:26,000
In production, this would look differently.

30
00:01:26,000 --> 00:01:29,000
We see this screen during development

31
00:01:29,000 --> 00:01:32,000
so that it's easier for us as a developer to find

32
00:01:32,000 --> 00:01:33,000
and fix the error.

33
00:01:34,000 --> 00:01:36,000
In production, this would look differently.

34
00:01:37,000 --> 00:01:40,000
Now therefore, it's a good idea

35
00:01:40,000 --> 00:01:43,000
to also add some error handling to your application.

36
00:01:43,000 --> 00:01:47,000
And you can do that by adding an error.js file.

37
00:01:47,000 --> 00:01:50,000
And in that file, you then set up a component

38
00:01:50,000 --> 00:01:55,000
that will be rendered by NextJS whenever an error occurs.

39
00:01:56,000 --> 00:01:58,000
Though, it'll only handle errors

40
00:01:58,000 --> 00:02:02,000
that occur in the page that sits in the same folder

41
00:02:02,000 --> 00:02:06,000
as this error.js file or any nested page or layout.

42
00:02:07,000 --> 00:02:09,000
Therefore, you could of course also add this

43
00:02:09,000 --> 00:02:13,000
on the root level of your application to catch any error

44
00:02:13,000 --> 00:02:16,000
that's cost anywhere in any of your pages.

45
00:02:17,000 --> 00:02:20,000
Again, you can be as granular as needed.

46
00:02:21,000 --> 00:02:22,000
Here, I'll go down one level

47
00:02:22,000 --> 00:02:25,000
so that I don't replace the entire site

48
00:02:25,000 --> 00:02:27,000
with my error screen,

49
00:02:27,000 --> 00:02:30,000
but instead only a part of that site.

50
00:02:30,000 --> 00:02:35,000
And here, I'll then simply output some main element

51
00:02:35,000 --> 00:02:38,000
with a class name of error

52
00:02:38,000 --> 00:02:41,000
and I'm setting this class name like this

53
00:02:41,000 --> 00:02:44,000
because that's not actually a class I prepared

54
00:02:44,000 --> 00:02:45,000
in this global CSS file,

55
00:02:46,000 --> 00:02:48,000
which was part of the starting project.

56
00:02:49,000 --> 00:02:53,000
And we're importing that globally, not as a CSS module.

57
00:02:53,000 --> 00:02:55,000
They offer those classes from that file

58
00:02:55,000 --> 00:02:57,000
can be used just like this.

59
00:02:57,000 --> 00:02:59,000
And then here I'll add a H1 element

60
00:02:59,000 --> 00:03:03,000
where I say an error occurred

61
00:03:03,000 --> 00:03:05,000
and then maybe some details about that error.

62
00:03:07,000 --> 00:03:09,000
And for that to learn more about this error,

63
00:03:09,000 --> 00:03:12,000
we can actually use some props here

64
00:03:12,000 --> 00:03:16,000
in this error page component because when setting up

65
00:03:16,000 --> 00:03:18,000
such a component in such a error or JS file,

66
00:03:19,000 --> 00:03:22,000
NextJS will pass some props to that component.

67
00:03:22,000 --> 00:03:26,000
Most importantly, it will provide an error prop,

68
00:03:26,000 --> 00:03:29,000
which can contain more details about the error.

69
00:03:30,000 --> 00:03:32,000
Now, the actual error message

70
00:03:32,000 --> 00:03:34,000
will actually be hidden by NextJS

71
00:03:34,000 --> 00:03:38,000
so that you can't accidentally expose any information

72
00:03:38,000 --> 00:03:42,000
that shouldn't be exposed to your end users.

73
00:03:42,000 --> 00:03:44,000
But if your error would be an object

74
00:03:44,000 --> 00:03:46,000
that also contains some error code

75
00:03:46,000 --> 00:03:47,000
or anything like that,

76
00:03:47,000 --> 00:03:50,000
you could use that here in this component

77
00:03:50,000 --> 00:03:53,000
to show a more fine tuned error message.

78
00:03:53,000 --> 00:03:55,000
Here, I'll simply output a generic message

79
00:03:55,000 --> 00:04:00,000
and say, failed to fetch meal data.

80
00:04:00,000 --> 00:04:03,000
Please try again later.

81
00:04:05,000 --> 00:04:07,000
Now, if you add that

82
00:04:07,000 --> 00:04:11,000
and you reload this meals page here,

83
00:04:11,000 --> 00:04:12,000
you'll get something strange here.

84
00:04:12,000 --> 00:04:14,000
You'll get another error

85
00:04:14,000 --> 00:04:19,000
where we learn that error.JS must be a client component.

86
00:04:19,000 --> 00:04:21,000
And indeed that's the case.

87
00:04:22,000 --> 00:04:26,000
This error component that's stored in an error.JS file

88
00:04:26,000 --> 00:04:28,000
must be a client component

89
00:04:28,000 --> 00:04:31,000
simply because NextJS basically ensures

90
00:04:31,000 --> 00:04:34,000
that you can catch any errors with that component,

91
00:04:34,000 --> 00:04:38,000
including errors that happen on the client side

92
00:04:38,000 --> 00:04:41,000
so after the pages were rendered on the server.

93
00:04:42,000 --> 00:04:46,000
That's why this directive must be added here.

94
00:04:46,000 --> 00:04:50,000
And with it added, you see that this goes away.

95
00:04:50,000 --> 00:04:53,000
If we now reload, we'll of course still get an error,

96
00:04:53,000 --> 00:04:56,000
but now we get our custom error page here,

97
00:04:57,000 --> 00:05:00,000
which you of course now could fine tune if you wanted to,

98
00:05:00,000 --> 00:05:05,000
but here I'll go with that and that's how we can therefore

99
00:05:06,000 --> 00:05:07,000
now handle errors like this.

100
00:05:08,000 --> 00:05:10,000
With that, of course, I'll go back to that

101
00:05:10,000 --> 00:05:13,000
meals.js file in the lib folder

102
00:05:13,000 --> 00:05:15,000
and comment out that line of code

103
00:05:15,000 --> 00:05:17,000
because I don't wanna throw an error,

104
00:05:18,000 --> 00:05:21,000
I just wanted to show you how you could handle them.