Next.js Discord

Discord Forum

FUNCTION_PAYLOAD_TOO_LARGE error in vercel

Unanswered
Devon Rex posted this in #help-forum
Open in Discord
Devon RexOP
Is it possible to catch these sorts of errors? I'm calling a server function from one of my client components for an image upload. When deployed to vercel, I'm running into this error, and it seemingly is skipping my server function. In the client component, my server function promise does not follow through to the catch statement, and the console.error at the top of my server function does not seem to execute at all. This results in my UI swallowing the error silently which is less than ideal.

15 Replies

Devon Rex
Hello!
Nice to meet you!
Yes, it's possible to catch such errors, but the behavior you're describing suggests there may be issues with how you're handling the promise returned by the server function or how the server function itself is implemented.
right ?
Devon RexOP
Well my server action looks something like this:

'use server';

export async function myServerAction(data: UpdateData) {
  try {
    console.error('data', data);
    // code
    return newlyUpdatedData;
  } catch (e: unknown) {
    console.error(e);

    throw e;
  }
}


My client component has an event handler like this:

async function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
  // some code
  const ret = await myServerAction(updateData).catch(() => {
    throw new Error(
      "There was an error with this upload."
    );
  });

  console.error("return data", ret);

  // more code
}


Instead of ending up in the catch block, ret actually is undefined and my code executes as if there were no error. I would expect my server function to either throw, or return my updated data. Maybe i'm misunderstanding something here?
@Devon Rex Well my server action looks something like this: 'use server'; export async function myServerAction(data: UpdateData) { try { console.error('data', data); // code return newlyUpdatedData; } catch (e: unknown) { console.error(e); throw e; } } My client component has an event handler like this: async function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) { // some code const ret = await myServerAction(updateData).catch(() => { throw new Error( "There was an error with this upload." ); }); console.error("return data", ret); // more code } Instead of ending up in the catch block, `ret` actually is `undefined` and my code executes as if there were no error. I would expect my server function to either throw, or return my updated data. Maybe i'm misunderstanding something here?
B33fb0n3
you are trying to upload an file. However the server action has a limit of 4.5 MB. You can use server action for files under this limit. However: when they are bigger, you get this error message. What can you do to prevent hitting the limits?

Your current setup:
Client -> NextJs -> Storage Server

New setup:
Client -> Storage Server

So instead of using a server action or route handler or anything nextjs related, you using the methods of your storage server to directly upload the file.

If you are using for example S3 as storage server, they are using a POST request that contains a file. If needed your server can create a policy, so the user is only allowed to upload a specific size
Devon RexOP
Hi @B33fb0n3, thanks for the response. You're correct that this is for an upload feature. I saw Vercel's limit of 4.5MB so I will definitely be updating my UI to match that. Direct to storage uploading will need to be a separate effort down the line.

My issue is that we use lots of server functions, but this is the first time we've ran into a Vercel level error. Is it accurate to say that any time a server function is rejected by Vercel, it doesn't actually reach the catch block of a promise. That seems unexpected to me.
Devon Rex
the issue is likely that ur server function myServerAction is not throwing an error properly or the error is being swallowed. here's a simple fix:

'use server';

export async function myServerAction(data: UpdateData) {
  try {
    console.error('data', data);
    // Simulate server processing
    const newlyUpdatedData = { updated: true }; // Replace with actual logic
    return newlyUpdatedData;
  } catch (e: unknown) {
    console.error('Server action error:', e);
    throw new Error('Server action failed.');
  }
}
async function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  try {
    const ret = await myServerAction(updateData);

    if (!ret) {
      throw new Error('Server action returned undefined or null.');
    }

    console.log('Updated data:', ret);
  } catch (error) {
    console.error('Error occurred:', error);
    alert('There was an error with this upload.');
  }
}
Devon RexOP
Hey @Devon Rex , that doesn't work. I'm already re-throwing the error, but I tried throwing an explicit error as you mentioned with no luck. Not even the console.error('data', data) executes so vercel is likely skipping my function altogether. The server action should only resolve to newlyUpdatedData or throw. There is no way for my function to return undefined or null.

Because of this unexpected functionality, I think I'll need to type server actions with a helper type like: type ServerActionResponse<T> = T | undefined; where T is our server action return type. I've updated my server action return type to : Promise<ServerActionResponse<UpdatedDataType>> which will allow me to check for an undefined value, but it's definitely not ideal as I believe the real error is being swallowed by vercel.
Devon RexOP
Yes I'm doing that now. We're limiting uploads to 4.5mb and will revamp the upload strategy when it becomes necessary.

The issue I suppose I want to report here is that while we are specifically talking about uploads here, there are many other [Function errors](https://vercel.com/docs/errors) that can happen, and they are seemingly not catchable within application code.
Devon RexOP
Ok so it actually seems like next15 correctly rejects the server action as expected. My project is still on next 14 and that's where the issue happens within vercel. Reported here: https://github.com/vercel/next.js/issues/74948

Demo here: https://vercel-server-action-bug.vercel.app/