Now this loading.JS file,
even though we're not using it anymore here
is not the only other special file you can add
in that app folder in your next project,
because besides loading and page and layout,
we, for example, can also add an error.js file,
which will handle potential errors that might be generated
by your pages and components,
for example, if loading some data fails,
and that of course could happen here if our database
is offline, which is unlikely for a SQLite database,
but which could happen
if it would be a remote database server,
or if anything else goes wrong.
And to simulate this, let's simply go to the lib folder
in the meals.js file and then here,
let's throw an error, a new error
where we say loading meals failed.
Something like this, doesn't really matter.
Now if I do that
and I remove this error.js file again.
We'll re-add it soon,
but if I remove it for now, you'll see that now
if we reload this page, we'll load the data
and after five seconds,
we'll get an error.
And the error screen we see here
is just a development version of this error screen.
In production, this would look differently.
We see this screen during development
so that it's easier for us as a developer to find
and fix the error.
In production, this would look differently.
Now therefore, it's a good idea
to also add some error handling to your application.
And you can do that by adding an error.js file.
And in that file, you then set up a component
that will be rendered by NextJS whenever an error occurs.
Though, it'll only handle errors
that occur in the page that sits in the same folder
as this error.js file or any nested page or layout.
Therefore, you could of course also add this
on the root level of your application to catch any error
that's cost anywhere in any of your pages.
Again, you can be as granular as needed.
Here, I'll go down one level
so that I don't replace the entire site
with my error screen,
but instead only a part of that site.
And here, I'll then simply output some main element
with a class name of error
and I'm setting this class name like this
because that's not actually a class I prepared
in this global CSS file,
which was part of the starting project.
And we're importing that globally, not as a CSS module.
They offer those classes from that file
can be used just like this.
And then here I'll add a H1 element
where I say an error occurred
and then maybe some details about that error.
And for that to learn more about this error,
we can actually use some props here
in this error page component because when setting up
such a component in such a error or JS file,
NextJS will pass some props to that component.
Most importantly, it will provide an error prop,
which can contain more details about the error.
Now, the actual error message
will actually be hidden by NextJS
so that you can't accidentally expose any information
that shouldn't be exposed to your end users.
But if your error would be an object
that also contains some error code
or anything like that,
you could use that here in this component
to show a more fine tuned error message.
Here, I'll simply output a generic message
and say, failed to fetch meal data.
Please try again later.
Now, if you add that
and you reload this meals page here,
you'll get something strange here.
You'll get another error
where we learn that error.JS must be a client component.
And indeed that's the case.
This error component that's stored in an error.JS file
must be a client component
simply because NextJS basically ensures
that you can catch any errors with that component,
including errors that happen on the client side
so after the pages were rendered on the server.
That's why this directive must be added here.
And with it added, you see that this goes away.
If we now reload, we'll of course still get an error,
but now we get our custom error page here,
which you of course now could fine tune if you wanted to,
but here I'll go with that and that's how we can therefore
now handle errors like this.
With that, of course, I'll go back to that
meals.js file in the lib folder
and comment out that line of code
because I don't wanna throw an error,
I just wanted to show you how you could handle them.