Unable to cancel or abort streaming UI server actions

[AaronFriel]

Feature Description

Provide an ambient AbortController via an API to server actions and a method for cancelling a request.

Use Case

Users may wish to cancel and retry long-running AI requests, especially in streaming and langchain-esque scenarios where completion times are on the order of tens of seconds or longer.

Additional context

Attempting to work around the issue by, e.g., passing a Promise to the server action does not work, as Next.js delays calling the server action while the promise resolves. This can be demonstrated by calling a server action with new Promise<void>((r) => setTimeout(r, 10_000)) and logging the un-awaited value of the promise immediately in the action.

Related issues:

• https://github.com/facebook/react/issues/28510
• https://github.com/facebook/react/issues/28511

[fjun99]

also interested in this.

[psai-terwin]

this is crazy that there seems to be no way to do basic abort functionality on next server action or vercel ai rsc streams

[danielpl10]

@AaronFriel Hope you are doing well, did you find any work arround for this. I know that useChat hook has a stop function but in my case I moved away from vercel ai ui in favor of vercel ai rsc, so now that I'm using server actions with streamUI is impossible to send a stop signal.

[C-mbai]

+1 Please

[lgrammel]

This is (current) limitation of React. Aborting server actions is not supported.

[AaronFriel]

@lgrammel hopefully this can be solved, I would hope that some folks from Vercel could chime in on the issues on facebook/react, as it's forcing us to abandon server actions in favor of API routes for AI use cases. I'm sure it's also keeping the AI SDK from supporting server actions or recommending them. Cancellation is important!

[alicercedigital]

Does someone found any workaround?

[camwest]

Does someone found any workaround?

Workaround for Handling Long-Running Server Actions

• Core idea: Abandon the promise instead of blocking with await when calling the server action

Implementation Steps

1. Assign the server action promise to a ref
2. Create a separate async workflow:
   • Perform the await
   • Add a UI gesture for cancellation
3. When user taps to cancel:
   • Set a piece of state
   • When the promise resolves, discard it
   • Kick off a new process

Results

• The action still happens in the background (costing money and tokens)
• But it's not exposed to the UI

Note: The server action continues running, but its result is ignored