1 00:00:00,000 --> 00:00:01,000 Let's now make sure 2 00:00:01,000 --> 00:00:03,000 that we handle this error on our own 3 00:00:03,000 --> 00:00:07,000 with our own error fallback content instead of using 4 00:00:07,000 --> 00:00:11,000 that default development mode overlay. 5 00:00:11,000 --> 00:00:15,000 And we can handle errors in NextJS 6 00:00:15,000 --> 00:00:19,000 by adding a special file named error.js 7 00:00:19,000 --> 00:00:22,000 and it works just like the not-found.js file. 8 00:00:22,000 --> 00:00:26,000 We can add it anywhere and it will then render its component 9 00:00:26,000 --> 00:00:29,000 whenever an error occurs on the same level 10 00:00:29,000 --> 00:00:31,000 or in some nested page. 11 00:00:32,000 --> 00:00:35,000 So here to handle errors for this page.js file, 12 00:00:35,000 --> 00:00:38,000 we could add an error.js file right next to it. 13 00:00:39,000 --> 00:00:43,000 And then here I'll have my default function. 14 00:00:43,000 --> 00:00:48,000 FilterError could be the component function name. 15 00:00:48,000 --> 00:00:51,000 And then there I'll return a div with an id of error 16 00:00:51,000 --> 00:00:56,000 with an h2 element of an error occurred 17 00:00:56,000 --> 00:00:57,000 or something like this. 18 00:00:57,000 --> 00:01:02,000 And then I'll have a text here where I say invalid path. 19 00:01:02,000 --> 00:01:04,000 And of course, it's totally up to you 20 00:01:04,000 --> 00:01:06,000 how you wanna configure this. 21 00:01:07,000 --> 00:01:09,000 What's important though 22 00:01:09,000 --> 00:01:13,000 is that this now must be a client component, 23 00:01:13,000 --> 00:01:17,000 which you do ensure by adding use client at the top here. 24 00:01:17,000 --> 00:01:20,000 Now, this error.js file 25 00:01:20,000 --> 00:01:23,000 or the component you return in there 26 00:01:23,000 --> 00:01:25,000 must be a client component 27 00:01:25,000 --> 00:01:29,000 and hence you must add use client to the top of this file 28 00:01:29,000 --> 00:01:32,000 because errors can, of course, not just occur 29 00:01:32,000 --> 00:01:35,000 whilst something's happening on this server, 30 00:01:35,000 --> 00:01:38,000 but they may also occur from the client side 31 00:01:38,000 --> 00:01:42,000 because something goes wrong after the page was loaded 32 00:01:42,000 --> 00:01:45,000 and after the user is using the page. 33 00:01:45,000 --> 00:01:49,000 And therefore, the error fallback needs to work on both ends 34 00:01:49,000 --> 00:01:53,000 and client components do work on both ends 35 00:01:53,000 --> 00:01:56,000 on the Server, but also on the client side. 36 00:01:56,000 --> 00:01:59,000 Whereas server components without use client at the top 37 00:02:01,000 --> 00:02:02,000 of the file would only work on the server side. 38 00:02:02,000 --> 00:02:05,000 That's why this error fallback 39 00:02:05,000 --> 00:02:09,000 must be a client component and hence you must add use client 40 00:02:09,000 --> 00:02:11,000 at the top of the file. 41 00:02:12,000 --> 00:02:14,000 And I'll get back to client components 42 00:02:14,000 --> 00:02:18,000 and server components a little bit later again. 43 00:02:18,000 --> 00:02:20,000 I did also cover this important topic 44 00:02:20,000 --> 00:02:23,000 in the essentials section already though. 45 00:02:24,000 --> 00:02:27,000 So with that we have this FilterError function 46 00:02:27,000 --> 00:02:30,000 and this now actually also receives some props, 47 00:02:30,000 --> 00:02:33,000 which are passed in by NextJS. 48 00:02:34,000 --> 00:02:37,000 For example, the error object that was thrown 49 00:02:38,000 --> 00:02:42,000 so that we could also output the actual error.message 50 00:02:42,000 --> 00:02:45,000 instead of invalid path if we wanted to do that. 51 00:02:46,000 --> 00:02:47,000 With that, if we save this, 52 00:02:47,000 --> 00:02:52,000 you see that now I get my own error fallback here 53 00:02:53,000 --> 00:02:56,000 and I can continue using the application 54 00:02:56,000 --> 00:03:00,000 and basically leave that error state.