MERN Stack - Search box returning empty array

Hi. I'm developing a MERN stack web app, and am encountering a problem with my search box where if keywords provided in the search box do not match any product in the database, array returns [], whereas it is supposed to throw an error and therefore trigger react toastify for a 'product not found' notification. I'm unsure whether the problem is in the front or backend part of the project, but I provided all of the files I thought were of use. If anyone could help, I'd be very grateful. Let me know if you would like to see another file that is not included here: https://gist.github.com/deahlt/dbb9f613271f74f59be69b9f5172e847

Gist

When keywords provided in the search box do not match any product i...

When keywords provided in the search box do not match any product in the database, array returns [], whereas it is supposed to throw an error and therefore trigger react toastify for a 'pro...

Joao•1/28/24, 10:05 PM

The problem seems to be that you are returning a 404 response when no products are found. In order to show the toast, you are checking if the response is ok in , but checks if the response status code falls between the 200-209 range:
https://developer.mozilla.org/en-US/docs/Web/API/Response/ok

Joao•1/28/24, 10:06 PM

Bear in mind that an HTTP response with zero results does not necessarily imply a failure on the client. The search was ran successfully, it simply didn't yield any results.

Joao•1/28/24, 10:10 PM

What I'd recommend is simply run your actual error checking inside an if statement for when the response didn't go well, where you would abort or return early. Then the "happy path" of the function where everything would work fine can continue. This would clean all of those deeply nested levels of if and try/catch statements...

Joao•1/28/24, 10:13 PM

Perhaps even something like this:

Joao•1/28/24, 10:13 PM

This way you'd show the toast notification even when there's a network issue or whatever. But be careful if you do this though, as your server might return an error including sensitive data so you might want to filter that first.

Ἔ

ἔρως•1/28/24, 11:01 PM

alternativelly, send the http code 204

Ἔ

ἔρως•1/28/24, 11:01 PM

and DONT SEND ANY CONTENT

Ἔ

ἔρως•1/28/24, 11:02 PM

you can use the to check if it is 204

Ἔ

ἔρως•1/28/24, 11:02 PM

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204

Ἔ

ἔρως•1/28/24, 11:03 PM

https://developer.mozilla.org/en-US/docs/Web/API/Response/status

Ἔ

ἔρως•1/28/24, 11:04 PM

yes, the 204 means "no content", and you can send the response a lot quicker since you don't send any additional data

Joao•1/29/24, 11:39 AM

I thought it was implied but you don't have to send any message at all, just return the results of the query:

The front-end will deal with displaying the appropriate information.

JJoao I thought it was implied but you don't have to send any message at all, just ret...

MetanoiaOP•1/29/24, 12:17 PM

with the code changes you suggested, I am still failing to receive a react toast. all searches, existent and nonexistent products, return a 200 ok status

MetanoiaOP•1/29/24, 12:17 PM

these are the files as of now:

MetanoiaOP•1/29/24, 12:17 PM

MetanoiaOP•1/29/24, 12:20 PM

@ἔρως do you have any suggestion?

MMetanoia with the code changes you suggested, I am still failing to receive a react toast...

Joao•1/29/24, 4:13 PM

What is the actual data returned?

Joao•1/29/24, 4:13 PM

It may be data.length instead of data.products.length

MetanoiaOP•1/29/24, 4:16 PM

JJoao It may be data.length instead of data.products.length

MetanoiaOP•1/29/24, 4:16 PM

it wont make a difference

MetanoiaOP•1/29/24, 4:18 PM

let's say toastify is giving me an issue. i can honestly scrape that out and simply have it say as an h3 tag or something below the 'discover products' that no product matches the search. do i have to follow the same logic for that?

Joao•1/29/24, 4:21 PM

Yes, same process all you care about is react to different scenarios.

Joao•1/29/24, 4:21 PM

Are you able to log something to the console when you receive 0 results?

Joao•1/29/24, 4:21 PM

Both inside the if statement and after throwing an error in the catch statement.

Joao•1/29/24, 4:22 PM

If not, this is where having a reproducible build of the app would be helpful so that we can test on our end as well

MetanoiaOP•1/29/24, 4:26 PM

i'll deploy my site on render in a second, if that helps

Joao•1/29/24, 4:28 PM

Uploading the code as a repository might be better so that we can clone the project and deploy locally.

MetanoiaOP•1/29/24, 4:33 PM

okay, ill share in a min

JJoao Uploading the code as a repository might be better so that we can clone the proj...

MetanoiaOP•1/29/24, 5:20 PM

I apologize for the delay. https://github.com/deahlt/shop

GitHub

GitHub - deahlt/shop

Contribute to deahlt/shop development by creating an account on GitHub.

Joao•1/29/24, 5:21 PM

No worries, give me a sec I'll take a look

JJoao No worries, give me a sec I'll take a look

MetanoiaOP•1/29/24, 5:52 PM

was it helpful?

MMetanoia was it helpful?

Joao•1/29/24, 5:53 PM

Yeah sorry, I've actually run into something but I'm now looking into this

Joao•1/29/24, 5:54 PM

For now I've noticed that the toast notification works fine when there's no internet connection:

JJoao For now I've noticed that the toast notification works fine when there's no inte...

MetanoiaOP•1/29/24, 5:55 PM

so that means that the front is handling it okay i guess?

Joao•1/29/24, 5:57 PM

It seems like it, but I need to test the no results case yet. I'm running into the good old classing CORS issue though

Joao•1/29/24, 5:59 PM

Other errors also work fine:

Joao•1/29/24, 6:02 PM

Are you using MongoDB Atlas or runnign your own MongoDB instance?

Joao•1/29/24, 6:04 PM

Mmm ok I think I've got it

JJoao Are you using MongoDB Atlas or runnign your own MongoDB instance?

MetanoiaOP•1/29/24, 6:05 PM

Atlas

Joao•1/29/24, 6:05 PM

The issue is that your routes are setup like this:

But the route itself responds to "/search"|. So you would have to send a request to /api/products/search/search?q=keyword

Joao•1/29/24, 6:06 PM

can you double check that?

MetanoiaOP•1/29/24, 6:06 PM

so i should modify that line with the new url?

Joao•1/29/24, 6:06 PM

Joao•1/29/24, 6:08 PM

I would prefer you modified the route on the backend, and set it such that the "searchRoutes" route is simply "/"

Joao•1/29/24, 6:09 PM

Joao•1/29/24, 6:10 PM

I've removed all the actual searching because I didn't want to set it up but it doesn't matter, this was just to test the empty array result. Notice the route is now "/" because it will already be prefixed when it's wired up in server.js

Joao•1/29/24, 6:11 PM

But in any case, the toast notification is working properly so I'm guessing there's something going on with the routing.

Joao•1/29/24, 6:13 PM

Aside from this one file, another change that might come in handy is adding the cors package and use that in server.js. This will help with CORS issues, and eventually you'll want to use it anyway when you deploy in production as a security precaution.
https://expressjs.com/en/resources/middleware/cors.html

MetanoiaOP•1/29/24, 6:15 PM

so, just to be clear, ive set it to

and the search routes to

. is this the correct approach?