How to catch 504 FUNCTION_INVOCATION_TIMEOUT errors from Vercel serverless functions?

[a1031]

Summary

In a Next.js 14 project deployed to Vercel I have a client component which calls a server action. If the server action execution exceeds the Vercel serverless function maxDuration (default 15 seconds for Vercel Pro teams), I get a 504 response in the browser.

I know that I can increase the maxDuration, and I also have worked on optimizing the server action to be more efficient, but I also want to be able to properly catch the 504 FUNCTION_INVOCATION_TIMEOUT error so I can display a message in the client component.

I tried wrapping the server action call in a try/catch block but that did not work - the catch block is never invoked, and I still just get the 504 in the browser and it's not caught or handled. The try/catch block does , however, correctly handle exceptions that occur in the server action function itself.

I visited the Vercel Discord server and it recommended submitting a ticket to Vercel support, which I did, but they responded saying "There is currently no inbuilt way on Vercel to override this kind of error code as it's Vercel specific in this case.", and they instead instructed me to post here.

I'm not sure what their response means. I'm not trying to make it so Vercel does not return a 504 error code. I'm trying to make it so that if the user uploads a large CSV and it takes longer than the configured maxDuration for the serverless function, that the user is notified that there was a problem. Otherwise nothing happens on the page and the only way to know that the timeout occurred would be to open the browser's devtools and view the Network tab or console, which most users will not do. I feel like a better user experience would be for the user to at least be able to see that there was an issue, and being able to catch and handle the error would also allow me to add an explanation of what happened, a re-try button, etc.

Example

No response

Steps to Reproduce

This is a slimmed-down version of my actual code to explain the issue, but running this on Vercel with the default 15 second function invocation timeout should return a 504 response from the server to the browser.

The client component:

"use client";

import { processCsv } from "@/server/actions/process-csv";

export default function ImporCsvDialog() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  let result;

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      setSelectedFile(files[0] ?? null);
    } else {
      setSelectedFile(null);
    }
  };

  const handleUpload = async (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();

    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        result = await processCsv({ content: e.target!.result });
      } catch (error) {
        console.error("this console.error is never invoked");
      }
    };
    reader.readAsText(selectedFile);
  };

  return <p>{result.message}</p>;
}

The server action:

"use server";

export async function processCsv({
  content,
}: {
  content: FileContent;
}) {
  console.log('starting processCsv() server action');
  
  // simulate 20-second execution
  await new Promise((resolve) => setTimeout(resolve, 20000));
  
  console.log('finished processCsv() server action');
}

[shovanshahi373]

I am using NEXTjs as a proxy and I was facing similar issue. I received 504 status with this as a response

An error occurred with your deployment

FUNCTION_INVOCATION_TIMEOUT

This specific error occured after I did res.json()

This was my workaround

try {
    const res = await fetch("/api/getData", {
      method: "POST",
      body: mybody
    return await res.json();
  } catch (err) {
    console.error(err);
    if (
      (err as any)?.message.includes("is not valid JSON") ||
      JSON.stringify(err).includes("is not valid JSON")
    ) {
      return {
        success: false,
        message: "Request Timed out. Please try again later.",
      };
    }
    return {
      success: false,
      message: (err as any).message || "Server error",
    };
  }

[davidpc-pg]

@a1031 Did you ever find a way to handle the 504 in the context of a server action?

[a1031]

@davidpc-pg Unfortunately no, I didn't get any helpful responses here, in Discord, or from Vercel support, so I gave up and just ended up cranking the maxDuration up to 300s for the affected paths as a workaround.

[melodyxpot]

I think upgrading vercel is the solution.
I got same error and found the solution by upgrading my plan.

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community