CODEWITHSUNDEEP
javascriptreactjsnext.jsvercel
Liiaam93
Liiaam93

Reputation: 285

NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

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,
};

Upvotes: 10

Views: 26847

Answers (5)

janko hrasko
janko hrasko

Reputation: 11

I was dealing with a similar problem these days. I have an app where the user can select a product and pay via stripe. When the user pays, stripe redirects the user to the success page. The success page contains the checkout_session_id url. When loading the success page, it first pulls this id from the url and sends it to the backend. in the backend it extracts the data from the strip via the method

await stripe.checkout.sessions.retrieve(session_id)

and sends this session with payment information back to the success page and displays the data for the user.

code with problems, problem is when useEffect send request to backend, but session_id is undefined, it takes some time when page is getting session_id from url via router.query


useEffect(() => {

 const getSessionData = async () => {
   try {
 
     const config = {
        headers: {
          "Content-Type": "application/json",
        },
      }
    
    const res = await axios.post('/api/stripe/getCheckoutData', {session_id}, config );

    console.log(res?.data)
    setData(res.data.session)


  } catch (error) {
    console.error("Error fetching session data:", error);

  }
 }


   getSessionData()
  

},[session_id])

I fixed this problem ,that I add if statement to useEffect


 if(session_id) {
    getSessionData()
  }

This was my solution for my problem...

Upvotes: 0

Marko Lazarevic
Marko Lazarevic

Reputation: 193

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

Upvotes: 6

Circuit Planet
Circuit Planet

Reputation: 181

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.

Upvotes: 0

Kal
Kal

Reputation: 1774

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.

Upvotes: 0

ven
ven

Reputation: 304

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.

Upvotes: 28

Related Questions