From c0ef6e5e4d7084062bfd35bd58631dc2670b4507 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Fri, 7 Mar 2025 15:18:32 +0100
Subject: [PATCH] fix: Error recover/retry buttons should reset error state

---
 src/room/GroupCallErrorBoundary.test.tsx | 44 +++++++++++++++++++++++-
 src/room/GroupCallErrorBoundary.tsx      |  5 ++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx
index 94c96794..893389a7 100644
--- a/src/room/GroupCallErrorBoundary.test.tsx
+++ b/src/room/GroupCallErrorBoundary.test.tsx
@@ -7,7 +7,13 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { type ReactElement, type ReactNode } from "react";
+import {
+  type FC,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 
@@ -131,6 +137,42 @@ test("should have a reconnect button for ConnectionLostError", async () => {
   expect(reconnectCallback).toHaveBeenCalledWith("reconnect");
 });
 
+test("Action handling should reset error state", async () => {
+  const user = userEvent.setup();
+
+  const TestComponent: FC<{ fail: boolean }> = ({ fail }): ReactNode => {
+    if (fail) {
+      throw new ConnectionLostError();
+    }
+    return <div>HELLO</div>;
+  };
+
+  const WrapComponent = (): ReactNode => {
+    const [failState, setFailState] = useState(true);
+    const reconnectCallback = useCallback(() => {
+      setFailState(false);
+    }, [setFailState]);
+
+    return (
+      <BrowserRouter>
+        <GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
+          <TestComponent fail={failState} />
+        </GroupCallErrorBoundary>
+      </BrowserRouter>
+    );
+  };
+
+  render(<WrapComponent />);
+
+  // Should fail first
+  await screen.findByText("Connection lost");
+
+  await user.click(screen.getByRole("button", { name: "Reconnect" }));
+
+  // reconnect should have reset the error, thus rendering should be ok
+  await screen.findByText("HELLO");
+});
+
 describe("Rageshake button", () => {
   function setupTest(testError: ElementCallError): void {
     mockConfig({
diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx
index 758016b2..67b95733 100644
--- a/src/room/GroupCallErrorBoundary.tsx
+++ b/src/room/GroupCallErrorBoundary.tsx
@@ -120,7 +120,10 @@ export const GroupCallErrorBoundary = ({
         <ErrorPage
           error={callError}
           resetError={resetError}
-          recoveryActionHandler={recoveryActionHandler}
+          recoveryActionHandler={(action: CallErrorRecoveryAction) => {
+            resetError();
+            recoveryActionHandler?.(action);
+          }}
         />
       );
     },