I have an endpoint and when i try it on postman it responses after 35-40 seconds.
But when i trigger it from nextjs in client side after 30 seconds it timouts and returns 500 internal server error, why
#Fetch Timeout
loud jackal
torpid grottoBOT
Hi @loud jackal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The issue you're experiencing is likely due to the execution limits of Vercel Serverless Functions. As per the Vercel documentation (https://vercel.com/guides/what-can-i-do-about-vercel-serverless-functions-timing-out), Serverless Functions will timeout after 10 seconds on Vercel's Hobby Tier and 60 seconds on Vercel's Pro tier. If a response isn't returned from the function within these limits, a timeout error will occur.
If your function is connecting to an external database or depending on a third-party API before responding, make sure there are no errors upstream. If the upstream service hasn't responded to you successfully within a certain time, return a response indicating the error.
Here's an example of a Serverless Function that sets a timeout limit on an upstream API call:
module.exports = async (req, res) => {
await within(getUsers, res, 7000)
}
async function within(fn, res, duration) {
const id = setTimeout(() => res.json({ message: "There was an error with the upstream service!" }), duration)
try {
let data = await fn()
clearTimeout(id)
res.json(data)
} catch(e) {
res.status(500).json({message: e.message})
}
}
async function getUsers() {
return (await db.getUsers())
}
If you require a longer execution, Edge Functions (https://vercel.com/docs/concepts/functions/edge-functions) provide an alternative that only require an initial response within 30 seconds and allow you to continue streaming responses after that time.
Also, ensure that your Serverless Functions return an HTTP Response even if it's a response that indicates an error. If a response isn't returned from the function, a timeout error will occur. Here's an example of a Serverless Function responding with a JSON message:
module.exports = (req, res) => {
// res.send("Hello, World!")
// res.status(500).json({message: "Something went wrong!"})
res.json({message: "Hello, World!"})
}
Lastly, Next.js provides a static 500 page by default to handle server-side errors that occur in your application. You can also customize this page (https://nextjs.org/docs/pages/building-your-application/routing/custom-error#customizing-the-500-page) by creating a pages/500.js file. This can help in providing more informative error messages to your users.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
loud jackal
I'm not using vercel's serverless function its just a request with fetch api in client side not serverside @torpid grotto
torpid grottoBOT
Let me check the knowledge base for you. One moment! :books:
The issue you're experiencing might be related to the browser's default timeout for fetch requests. While the Fetch API itself does not have a timeout, browsers have a default timeout set for these requests, which is usually around 30 seconds. This means if the request doesn't complete within this time, it will be automatically cancelled and a network error will be thrown.
To handle this, you can implement a manual timeout for your fetch requests. Here's an example of how you can do this:
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 30000);
fetch(url, {
signal: controller.signal
})
.then(response => response.json())
.then(data => {
clearTimeout(id);
console.log(data);
})
.catch(e => console.log("request failed", e));
In this example, an AbortController is used to create a signal that can be passed to the fetch request. If the request doesn't complete within the specified time (30 seconds in this case), the controller.abort() method is called, which aborts the fetch request.
Remember to clear the timeout if the request completes successfully to avoid memory leaks.