Action for Button with Error

[danieldeichfuss]

Project Information

Notes Extension, using Next w/App Router

Feedback

I'm using a <Button /> with a wrapping <Action />. The action has an asynchronous action that saves something to the DB. This works great for the pending state, but I don't know how to show a failed state in case of an error. Currently it always shows success, even if I add isFailed={myErrorState} to the <Button /> component.

I tested and the only way I could find to make this work as expected would be to throw an error inside of the handler passed to the action prop. But this has the side effect of remounting the component and loosing all the changes of the user.

On a side note, we are using Next with App Router and error handling with Next server actions works a bit differently. They return an object with a state and are supposed to never throw.

Do you see an alternative here? And it would be great if the Action component documentation would get a bit more info about its behaviour.

Here is the code:

  const handleSave = async () => {
    setErrorMessage(null);
   
    // throwing inside of saveNote does not show an error state in the Button (and is against Next best practice)
    const result = await saveNote(
      {
        contextId,
        content: noteContent,
      },
      noteData?.id,
    );

    if (result.success) {
      setInteractionMode(InteractionMode.VIEW);
    } else {
      setErrorMessage(result.error.message);
      // throwing an error here works, but resets the component which is not desired
      // throw new Error("this works")
    }
  };
...

<Action action={handleSave}>
  <Button size="m" isFailed={!!errorMessage}>
    <Text>{ButtonLabels.save}</Text>
    <IconSave />
  </Button>
</Action>