A developer demonstrates how to handle API errors and integrate interceptors in a Next.js and NestJS application. The process includes fixing multipart form data issues, creating a utility function for consistent error parsing, and displaying validation messages directly in the user interface using Material UI components.
Length 8:07
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #nextjs #nestjs #error-handling #web-development #typescript #api #server-actions #form-validation #database #programming
0:00 I'm gonna go ahead and open up the Network tab 0:02 while we go ahead 0:04 and try to create another user. Now, we can 0:08 immediately see that the sign-up request has been made to our back-end 0:12 server, and we have this form data that's being 0:15 sent to the 0:16 server side. Now, if we go back to our logs for 0:19 Next.js, we can actually see our console logging an 0:22 error from our network 0:23 request. So we can see that we have these errors coming back from 0:26 the back end 0:27 about the payload we are sending. However, this doesn't make sense 0:31 because we are indeed passing a valid email here. 0:35 Now, the reason why this is occurring is because by default, when we're 0:39 sending this request to the back end, it's being sent as 0:42 multi-part form data, which isn't the normal payload like 0:46 a JSON body that we'd expect on the server side. 0:50 In order to actually tell our back end server that this is a multi-part 0:53 form data so that it can parse the incoming request properly, 0:58 we're gonna have to go back to our users controller and apply an 1:01 interceptor to this route. Now, an interceptor is a piece 1:05 of code that can run before a given request and apply some 1:09 functionality to it, very similar to what middleware allows us 1:12 to do with 1:13 a request. However, an interceptor, we can also affect the 1:16 response. In our case, we want to use an interceptor here 1:20 that NestJS exposes for this route. 1:23 So we'll have the useInterceptors decorator, and then we supply the No 1:27 Files interceptor, which is going to expect 1:31 this form data request coming, and it will populate the 1:35 incoming form data on the request body. 1:38 So now at this point, if we make another sign-up request, 1:41 we can see that it
The rest of the transcript is for members.
Sign in 