How to cancel a server action?

[nbouvrette]

Summary

I am ramping up on server actions and I was trying to understand if there is a way to cancel them?

Let's say have an action that can take several seconds to run and you want to give the opportunity to the user to cancel the action.

With fetch you could use AbortController to do that, but I couldn't find anything on that topic regarding server actions.

Does anyone know?

Additional information

No response

Example

No response

[devjiwonchoi]

As far as I know, when the actions are sent to the server, you can't undo them or affect them from outside.

[nbouvrette]

Do you know how the implementation actually works? Is specific to the how Next.js implement server actions or do the React actions also work the same way?

I was under the impression that this was using fetch under the hood and could be aborted if the implementation allowed it but I might be wrong.

[hjonasson]

I am wondering about the same thing. There is a fetch request happening in my server action. It takes a few seconds. I want to abort/cancel it if the user clicks a Cancel request button. Is there a pattern for doing this? @nbouvrette did you get anywhere with this?

[nbouvrette]

Unfortunately I haven't heard anything on this topic. So I am presuming it might not be doable? Maybe opening an issue linking back to this question would get us more clarity?

[juliangarcia11]

Did you all figure out a work around for this? I also need a cancel button.

Thanks

[sal-the-dev]

@juliangarcia11 I'm in the same boat for now and I'm going to temporarily create a route handler for this particular use case. Under the hood it uses a POST request to an auto-generated endpoint, so I assume they will extend the server action API to include aborting in the future. For now I believe you will need a work around if you require this functionality

[bernatfortet]

Any updates on this?

[enzzzooo]

This would be useful I think.

[uigywnkiub]

+1

[frmsaul]

This would be useful especially with strict mode when useEffect runs twice in a row.

[xosnrdev]

waiting for updates on this as well

[nahuelDev23]

we need can cancel server actions!

[preitinger]

I am currently on a similar issue. Earlier with fetch('/api/...') and the like I was creating an AbortController in the mount effect, then doing the fetch with the related abortSignal and returning a destructor from the effect which aborts the abortController and so the fetch.

Now, with server actions, I will do the following:

1. also create an abortController at the start of the effect and also return a destructor which aborts it when the effect ends
2. call the asynchronous server action function in a try-catch-block
3. immediately after the await (or then ;-)) for the asynchronous server functions, I call: abortController.signal.throwIfAborted()
4. after that I optionally process the result of the server action (also inside of the same try-catch-block)
5. Also after all other await calls or in then- or catch-clauses I call abortController.signal.throwIfAborted()
6. in the catch-body I catch AbortError and optionally other errors that can be thrown by the server action function or other functions in the try-catch-block.

Simple example:

'use client'

import { useEffect, useState } from "react";
import { getNewsletter } from "./actions";
import Alert from "react-bootstrap/Alert";
import Card from "react-bootstrap/Card";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";

export default function Page({ params }: { params: { id: string } }) {
    const id = decodeURIComponent(params.id);
    const [error, setError] = useState('');
    useEffect(() => {
        const abortController = new AbortController();

        async function load() {
            try {
                const res = await getNewsletter(id);
                console.log('res', res);
                abortController.signal.throwIfAborted();
                switch (res.type) {
                    case 'success':
                        console.log("Hurray, let's process the data.")
                        break;
                    case 'notFound':
                        setError(`The newsletter ${id} was not found.`)
                        break;
                }

                // eslint-disable-next-line @typescript-eslint/no-explicit-any
            } catch (reason: any) {
                if ('name' in reason && reason.name === 'AbortError') {
                    // ignore
                    console.log('ignoring AbortError');
                } else {
                    console.error(reason);
                    setError(`Unexpected server error`)
                }
            }
        }

        load();
        return () => {
            abortController.abort();
        }
    }, [id])

    return (
        <Container>
            <Navbar>
                <Navbar.Brand>pr-push-newsletter</Navbar.Brand>
            </Navbar>
            <Card>
                <Card.Header>
                    <Card.Title>Newsletter {id}</Card.Title>
                </Card.Header>
                <Card.Body>
                    <Alert show={error != ''} variant="danger">{error}</Alert>
                </Card.Body>
            </Card>
        </Container>
    )
}

[girishcx07]

Hi All, I am also looking for the prevention of api's.

Is there any issue on this because I created a sandbox example but and tried some work around but didn't work at all, could you please suggest me what's the work around if you get the solution...

sandbox URL: sandbox

I am using nextjs - 15, with react 19

'use server';

import { setTimeout } from 'timers/promises';

type ActionId = number;

interface ActionResponse {
  success: boolean;
  error?: string;
}

const activeActions: Map<ActionId, boolean> = new Map();

export async function handleAction(data: Record<string, unknown>, id: ActionId): Promise<ActionResponse> {
  activeActions.set(id, true);

  try {
    for (let i = 0; i < 10; i++) {
      if (!activeActions.get(id)) {
        throw new Error('Action aborted');
      }

      console.log(`Processing step ${i + 1}`);
      await setTimeout(1000); // Simulated delay
    }

    return { success: true };
  } catch (error) {
    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  } finally {
    activeActions.delete(id);
  }
}

export async function abortAction(id: ActionId) {
  activeActions.set(id, false);
}

and the component is

"use client";

import { useTransition, useState } from "react";
import { handleAction, abortAction } from "../server";

type ActionId = number;

interface ActionResponse {
  success: boolean;
  error?: string;
}

export default function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [actionId, setActionId] = useState<ActionId | null>(null);

  function startAction(): void {
    const id: ActionId = Date.now();
    setActionId(id);

    startTransition(() => {
      handleAction({ key: "value" }, id)
        .then((res: ActionResponse) => {
          if (res.success) {
            console.log("Action completed");
          } else {
            console.log("Action aborted or failed:", res.error);
          }
        })
        .finally(() => setActionId(null));
    });
  }

  function stopAction(): void {
    if (actionId !== null) {
      abortAction(actionId);
      setActionId(null);
    }
  }

  return (
    <div>
      <button onClick={startAction} disabled={isPending || actionId !== null}>
        Start Action
      </button>
      <button onClick={stopAction} disabled={actionId === null}>
        Abort Action
      </button>
    </div>
  );
}

[Hoangminh249]

how it work ?

[girishcx07]

This is the Sandbox URL: SandBox URL

[girishcx07]

you can test it, in my case it was a question to the team, but didn't get the proper solution. if you have any logic. please suggest me.

[o1Suleyman]

what happens if you just do
return;
or
return null;?

[rkspx]

any update on this? The only non-hacky workaround I find currently is to create a specific Route Handler instead of relying on server actions, and hit the endpoint with fetch plus an AbortController signal.

[zain-bin-ramzan]

hi, everyone is there any update on it?

[langscot]

Also looking for update. Especially since Vercel is pushing their @AI-SDK, which uses server actions, not being able to cancel a streamable is horrible.

[zain-bin-ramzan]

It is quite irritating that they don't have a solution for this simple problem. I am facing an issue where I want to cancel the previous request, and it is really important to cancel it in my use case. I tried to use the API route for this certain scenario, but the data is not revalidating in this case. Please check #78808 if you know any solution.

[MW-Hochmann]

I just ran into the same issue and find it really strange that there is no solution for this.

The point of the server action is that I can run it on the server as a regular function and on the client as a fetch call. But when used on the front, it doesn't support one of the basic fetch features, so now I have to either make a route handler which calls the action from the server (makes my thinking - why do server actions even exist?) or I need to make a post request to the corresponding server action url, which creates a vector for failure (especially as there is no documentation on how the url is generated). With both of these options I loose type safety, so I'd have to write another batch of unnecessary types and exports.

Or, I have to write some weird logic on the front end to ignore the responses of the calls which should have been canceled.

Ignoring the fact that neither of these options actually stops the execution of whatever is running on the server (this is actually not relevant to my use case, but might be for others).

Seeing that there is not even an acknowledgment of this issue after two years, I can deduct that we will never see this implemented - adding just another annoyance to deal with a framework which is supposed to make my life easier.