NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Question

Getting this error on one of my pages after deploying to vercel, it all works fine in dev mode.

I think the problem might be one of my fetch/APIs since it uses the data from the first fetch request as the URL for the second fetch request...

All of my other pages with different APIs / fetch requests work fine...

export const fetchData = async (page) => {
  try {
    const req = await fetch(
      "https://www.productpage.com/new/" +
        page
    );
    const html = await req.text();
    const $ = cheerio.load(html);

    let newProducts = [];

    for (let i = 1; i < 25; i++) {
      let name = $(`#product_listing > tbody > #_${i} > td:nth-child(2) > a`)
        .text()
        .replace(/\n/g, "");
      let pageSrc = $(
        `#product_listing > tbody > #_${i} > td:nth-child(2) > a`
      ).attr("href");
      const price = $(`#product_listing > tbody >#_${i} > td.price.notranslate`)
        .text()
        .replace(/\n/g, "");

      pageSrc = "https://www.productpage.com" + pageSrc;

      const req2 = await fetch(pageSrc); // here it is using data from first fetch for a 2nd request..
      const html2 = await req2.text();
      const $2 = cheerio.load(html2);

      const imageSrc = $2(
        "#product-main-image .main-image-inner:first-child img"
      ).attr("src");
      const name2 = $2("#product-details dd:nth-child(2)")
        .text()
        .replace(/\n/g, "");
      const brand = $2("#product-details dd:nth-child(4)")
        .text()
        .replace(/\n/g, "");

      newProducts.push({
        name: name,
        name2: name2,
        brand: brand,
        pageSrc: pageSrc,
        price: price,
        imageSrc: imageSrc,
      });
    }

    return newProducts;
  } catch (err) {}
};

module.exports = {
  fetchData,
};

score 18 · Accepted Answer · answered Aug 13 '21 at 14:48

18

This error suggests that the API response is taking too long to respond.

When using Vercel with a Hobby plan, your serverless API routes can only be processed for 5 seconds. This means that after 5 seconds, the route responds with a 504 GATEWAY TIMEOUT error.

These same limits do not apply when running locally with next dev.

To resolve this, you would need to reduce the amount of time your API route takes to respond, or upgrade your Vercel plan.

answered Aug 13 '21 at 14:48

ven

196
1
3

1

Thanks! I tried searching around and many 'answers' to the question was to just use heroku instead, but i already built this site with heroku + basic JS and decided it would be useful to try and recreate it using nextJS. I'll see if i can reduce the api res time. – Liiaam93 Aug 13 '21 at 19:46
In my case, I forgot to run `sudo ufw allow 3306/tcp`. The only reason the connection was working from my home office was because I'd already allow-listed that IP address. – Ryan Feb 20 '23 at 02:21

score 3 · Answer 2 · answered Feb 05 '23 at 11:05

3

Try changing your serverless functions region on vercel, Settings -> Functions. Default is U.S Washington, it should be matched with your database location.

answered Feb 05 '23 at 11:05

Marko Lazarevic

163
1
15

score 0 · Answer 3 · answered Sep 20 '22 at 05:39

In my case, there were no significant delays in any functions. You can check this using this around your functions.

console.time()

In my case I needed to install mongodb.

"mongodb": "^3.6.3"

The pages on the website that was very slow after the mongodb install loads in just a blink of eye.

score 0 · Answer 4 · answered Nov 24 '22 at 12:22

0

In my case my getServerSideProps didn't resolve in some cases so I fixed it and made sure getServerSideProps was being resolved in every case and now it works fine.

answered Nov 24 '22 at 12:22

Circuit Planet

161
8

NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

4 Answers4

Linked