NextJS / vercel - 504错误 'FUNCTION_INVOCATION_TIMEOUT'。

Question

NextJS / vercel - 504错误 'FUNCTION_INVOCATION_TIMEOUT'。

8

在部署到Vercel后，在我的某个页面上出现了此错误，在开发模式下一切正常。

我认为问题可能是我的一个fetch / API之一，因为它使用第一个fetch请求的数据作为第二个fetch请求的URL...

我所有其他使用不同API / fetch请求的页面都能正常工作...

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

- Liiaam93

5个回答

5

尝试在 Vercel 上更改无服务器函数的区域，路径为设置 -> 函数。默认值为美国华盛顿州，应与您的数据库位置匹配。

- Marko Lazarevic

0

在我的情况下，没有任何函数出现显著的延迟。您可以在函数周围使用此代码进行检查。

console.time()

在我的情况下，我需要安装mongodb。

"mongodb": "^3.6.3"

在安装了mongodb之后，网站上非常缓慢的页面现在加载速度飞快。

- Kal

0

在我的情况下，有时候我的getServerSideProps无法解析，所以我修复了它，并确保在每种情况下都能解析getServerSideProps，现在它可以正常工作了。

- Circuit Planet

0

这几天我正在处理一个类似的问题。我有一个应用程序，用户可以通过Stripe选择产品并付款。当用户付款时，Stripe会将用户重定向到成功页面。成功页面包含checkout_session_id的URL。加载成功页面时，首先从URL中提取此ID并将其发送到后端。在后端，通过该方法从Stripe中提取数据。

await stripe.checkout.sessions.retrieve(session_id)

并将此会话与付款信息一起发送回成功页面，并为用户显示数据。

代码有问题，问题是当useEffect向后端发送请求时，session_id未定义，当页面通过router.query从URL获取session_id时，需要一些时间。


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])

我解决了这个问题，我在useEffect中添加了if语句。


 if(session_id) {
    getSessionData()
  }

这是我解决问题的方法...

- janko hrasko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ven · Accepted Answer

这个错误提示表明API响应时间过长。

在使用Hobby计划的Vercel时，你的无服务器API路由只能在5秒内处理。这意味着超过5秒后，该路由将会以504 GATEWAY TIMEOUT错误响应。

当使用next dev本地运行时，这些限制不适用。

为了解决这个问题，你需要减少API路由响应所需的时间，或者升级你的Vercel计划。