Supabase Function 'TypeError: fetch failed' in Next.js on Vercel

Question

I developed an AI chatbot application using Vercel's AI SDK.

I'm encountering issues with onSetAIState when saving data to Supabase. In this function, I perform two operations:

1. saving messages to Supabase
2. incrementing messages sent using Supabase's RPC function.

Here is the relevant block of code in onSetAIState:

export const AI = createAI({
    actions: {},
    initialUIState: [],
    initialAIState: {},
    onGetUIState: async () => {},
    onSetAIState: async ({ state, done }) => {
        "use server";

        if (done) {
            try {
                const supabase = await createClient();

                const newMessageRows = state.messages;

                // this function works fine
                const { error: messagesError } = await supabase
                    .from("messages")
                    .insert(newMessageRows);
                if (messagesError) console.error(messagesError);

                // this function frequently throws errors
                const { error: incrementMessagesSentError } = await supabase.rpc(
                    "increment_messages_sent",
                    {
                        increment_value: 1,
                    }
                );

                if (incrementMessagesSentError) {
                    console.error(incrementMessagesSentError);

                    // this slack function works fine
                    await slackNotification(
                        "Increment Messages Sent Error:",
                        incrementMessagesSentError
                    );
                }
            } catch (error) {
                console.error(error);
            }
        }
    },
});

I'm having trouble with the increment_messages_sent rpc function:

const { error: incrementMessagesSentError } = await supabase.rpc(
    "increment_messages_sent",
    {
        increment_value: 1,
    }
);

Here is the error message I receive when the increment_messages_sent RPC function fails:

{
    "message": "TypeError: fetch failed",
    "details": "TypeError: fetch failed\n    at node:internal/deps/undici/undici:12618:11\n    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at async T (/var/task/.next/server/chunks/6202.js:194:95)\n    at async Y (/var/task/.next/server/chunks/6202.js:197:4742)",
    "hint": "",
    "code": ""
}

I tried incrementing the messages by first fetching the record and then updating it to see if Supabase RPC was the problem, but I still encountered the same issue.

Additional Information:

• I'm using Next.js
• It's hosted on Vercel.

package.json:

• "ai": "^3.2.16".
• "next": "^14.0.4",

I need help understanding why I am receiving this error and how to fix it. Any insights or suggestions would be greatly appreciated. Thanks in advance!

Milkfish