Connection Closed. timeout error.
Answered
Mugger Crocodile posted this in #help-forum
Mugger CrocodileOP
I used to fetch data from my database and then use React TanStack Table to display the data. All were working fine. Recently, just couple of days back, I am getting connection timeout error. I am using MongoDB and mongoose. The same code works good in development. But in production, in Vercel enviornment, its throwing the error. Using NextJs 14.2.3. Any idea?
Answered by B33fb0n3
it seems like the loading time of your page is to long and it will be timoeouted after 10 seconds. You can do some things, to reduce the page load time:
1. Fetch paralell, if you fetch multiple stuff
2. Reduce the amount of data you fetch
3. Find out, why your page takes so long to load
1. Fetch paralell, if you fetch multiple stuff
2. Reduce the amount of data you fetch
3. Find out, why your page takes so long to load
22 Replies
@Mugger Crocodile I used to fetch data from my database and then use React TanStack Table to display the data. All were working fine. Recently, just couple of days back, I am getting connection timeout error. I am using MongoDB and mongoose. The same code works good in development. But in production, in Vercel enviornment, its throwing the error. Using NextJs 14.2.3. Any idea?
it seems like the loading time of your page is to long and it will be timoeouted after 10 seconds. You can do some things, to reduce the page load time:
1. Fetch paralell, if you fetch multiple stuff
2. Reduce the amount of data you fetch
3. Find out, why your page takes so long to load
1. Fetch paralell, if you fetch multiple stuff
2. Reduce the amount of data you fetch
3. Find out, why your page takes so long to load
Answer
Mugger CrocodileOP
Is the timeout from my database or to process the data? Vercel and NextJs errors are getting harder to interpret these days
And thanks for the response!
@Mugger Crocodile Is the timeout from my database or to process the data? Vercel and NextJs errors are getting harder to interpret these days
it's from the page. Like: You call different functions and do stuff in your page.tsx and this takes time and if that time reaches over 10 seconds, the page won't load anymore and the task times out
Mugger CrocodileOP
But the same code works in Development. No issues in Development. I'm pulling more than 2K data from my database. It used to work fine. The average load time is ~11s. I know its a terrible design. I'm pulling the entire list of members and displaying it using Tanstack table. Any idea to reduce the load time?
@B33fb0n3 it's from the page. Like: You call different functions and do stuff in your page.tsx and this takes time and if that time reaches over 10 seconds, the page won't load anymore and the task times out
Mugger CrocodileOP
Understood. But all these code works well in Dev. Also, it was working fine well in Vercel couple of days back.
I'm pulling more than 2K data from my databasewow, that's crazy! 💀
You shouldn't do that. Can you give me an idea on why you doing that?
Mugger CrocodileOP
The basic idea is to show list of all members on the table. From the start, I kinda realised this is very worst design. I was in the idea to use NextJs search params to filter and sort. But Tanstack provided an easy way in terms of time to finish the code. My requirement is to show all members. Any idea on how to display all members but still have good load time?
@Mugger Crocodile The basic idea is to show list of all members on the table. From the start, I kinda realised this is very worst design. I was in the idea to use NextJs search params to filter and sort. But Tanstack provided an easy way in terms of time to finish the code. My requirement is to show all members. Any idea on how to display all members but still have good load time?
yes. You can for example use a cursor based filtering. Like that you only get a bunch of entries (for example the latest users) and then you can cursor down though other members. If you need to search for members or filter them on any other condition, you can directly query your database
Mugger CrocodileOP
You mean to say lazy load?
So many connection timeouts happening recently.
@Mugger Crocodile You mean to say lazy load?
No, not lazy load. Just fetching a bunch of entries. Like getting the first 20 member of your table. Then click a button to the next 20 member and the next and ...
Then your inital page loads fast, but your can still query (and filter) all your members
Then your inital page loads fast, but your can still query (and filter) all your members
Mugger CrocodileOP
Understood. That is a good pattern too. But any idea on why the same code works on Dev but fails on Vercel?
@Mugger Crocodile Understood. That is a good pattern too. But any idea on why the same code works on Dev but fails on Vercel?
yes, because vercel limits your app and your own dev server not
Mugger CrocodileOP
Is this change recent? I mean about the load time. It used to load before. There was no hard 10 second time out before.
@Mugger Crocodile Is this change recent? I mean about the load time. It used to load before. There was no hard 10 second time out before.
I agree that it would have been 15 seconds... apparently it's now only 10
Mugger CrocodileOP
Ohhh! Cool. Thanks mate! Really appreciate your help and appreciate the work you are doing! You are actively involved in resolving so many of our queries. Cheers to you!
thanks a lot. Appreciate that 💋 . Please mark solution
@joulev
ackshually free plan users can manually extend the limit to 60 seconds iirc, but the default limit is 10 seconds. and you shouldn't make users wait for 10 seconds+ anyway, so yeah optimise the query