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>
    )
}

[girish-chaudhari]

Hey, 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>
  );
}