diff --git a/src/components/shared/SuspenseWrapper.test.tsx b/src/components/shared/SuspenseWrapper.test.tsx
index 76d4fe17b..f4e9a9e71 100644
--- a/src/components/shared/SuspenseWrapper.test.tsx
+++ b/src/components/shared/SuspenseWrapper.test.tsx
@@ -82,10 +82,10 @@ describe("", () => {
);
// Should show error message and retry button
- expect(screen.getByText("There was an error!")).toBeInTheDocument();
- expect(
- screen.getByRole("button", { name: "Try again" }),
- ).toBeInTheDocument();
+ const errorButton = screen.getByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ });
+ expect(errorButton).toBeInTheDocument();
expect(screen.queryByTestId("success-content")).not.toBeInTheDocument();
});
@@ -106,8 +106,10 @@ describe("", () => {
);
// Initially shows error
- expect(screen.getByText("There was an error!")).toBeInTheDocument();
- const retryButton = screen.getByRole("button", { name: "Try again" });
+ const retryButton = screen.getByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ });
+ expect(retryButton).toBeInTheDocument();
// Fix the error condition and click retry
shouldError = false;
@@ -118,7 +120,11 @@ describe("", () => {
expect(screen.getByTestId("recovered-content")).toBeInTheDocument();
});
expect(screen.getByText("Recovered")).toBeInTheDocument();
- expect(screen.queryByText("There was an error!")).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ }),
+ ).not.toBeInTheDocument();
});
test("shows custom errorFallback when provided", () => {
@@ -145,9 +151,10 @@ describe("", () => {
expect(screen.getByTestId("custom-retry")).toBeInTheDocument();
// Should NOT show default error UI
- expect(screen.queryByText("There was an error!")).not.toBeInTheDocument();
expect(
- screen.queryByRole("button", { name: "Try again" }),
+ screen.queryByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ }),
).not.toBeInTheDocument();
});
@@ -376,10 +383,10 @@ describe("withSuspenseWrapper()", () => {
render();
// Should show error UI
- expect(screen.getByText("There was an error!")).toBeInTheDocument();
- expect(
- screen.getByRole("button", { name: "Try again" }),
- ).toBeInTheDocument();
+ const errorButton = screen.getByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ });
+ expect(errorButton).toBeInTheDocument();
});
test("wrapped component can recover from error", async () => {
@@ -397,11 +404,14 @@ describe("withSuspenseWrapper()", () => {
render();
// Initially shows error
- expect(screen.getByText("There was an error!")).toBeInTheDocument();
+ const retryButton = screen.getByRole("button", {
+ name: "A UI element failed to render. Click to retry.",
+ });
+ expect(retryButton).toBeInTheDocument();
// Fix error and retry
shouldError = false;
- fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+ fireEvent.click(retryButton);
// Should recover
await waitFor(() => {
diff --git a/src/components/shared/SuspenseWrapper.tsx b/src/components/shared/SuspenseWrapper.tsx
index b047f2aed..57fc17c9e 100644
--- a/src/components/shared/SuspenseWrapper.tsx
+++ b/src/components/shared/SuspenseWrapper.tsx
@@ -8,10 +8,10 @@ import {
} from "react";
import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
import { Spinner } from "@/components/ui/spinner";
-import { InfoBox } from "./InfoBox";
+import TooltipButton from "./Buttons/TooltipButton";
type ErrorFallbackProps> = FallbackProps & {
originalProps?: Partial>;
@@ -25,12 +25,18 @@ interface SuspenseWrapperProps {
const ErrorFallback = >({
resetErrorBoundary,
}: ErrorFallbackProps) => {
+ const tooltipText = "A UI element failed to render. Click to retry.";
+
return (
-
-
-
+ resetErrorBoundary()}
+ variant="ghost"
+ size="min"
+ >
+
+
);
};