Allow useRevalidate to resolve a loader-driven error boundary UI

brophdawg11 · brophdawg11 · commit 5ff7203e6207 · 2023-04-18T15:54:03.000-04:00
diff --git a/.changeset/revalidate-error-boundary.md b/.changeset/revalidate-error-boundary.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Allow `useRevalidate()` to resolve a loader-driven error boundary scenario
diff --git a/packages/react-router/__tests__/data-memory-router-test.tsx b/packages/react-router/__tests__/data-memory-router-test.tsx
@@ -1747,37 +1747,11 @@ describe("createMemoryRouter", () => {
       );
       let { container } = render(<RouterProvider router={router} />);
 
-      expect(getHtml(container)).toMatchInlineSnapshot(`
-        "<div>
-          <h2>
-            Unexpected Application Error!
-          </h2>
-          <h3
-            style="font-style: italic;"
-          >
-            404 Not Found
-          </h3>
-          <p>
-            💿 Hey developer 👋
-          </p>
-          <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              ErrorBoundary
-            </code>
-             or
-             
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              errorElement
-            </code>
-             prop on your route.
-          </p>
-        </div>"
-      `);
+      let html = getHtml(container);
+      expect(html).toMatch("Unexpected Application Error!");
+      expect(html).toMatch("404 Not Found");
+      expect(html).toMatch("💿 Hey developer 👋");
+      expect(html).not.toMatch(/stack/i);
     });
 
     it("renders navigation errors with a default if no errorElements are provided", async () => {
@@ -1861,42 +1835,11 @@ describe("createMemoryRouter", () => {
       error.stack = "FAKE STACK TRACE";
       barDefer.reject(error);
       await waitFor(() => screen.getByText("Kaboom!"));
-      expect(getHtml(container)).toMatchInlineSnapshot(`
-        "<div>
-          <h2>
-            Unexpected Application Error!
-          </h2>
-          <h3
-            style="font-style: italic;"
-          >
-            Kaboom!
-          </h3>
-          <pre
-            style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
-          >
-            FAKE STACK TRACE
-          </pre>
-          <p>
-            💿 Hey developer 👋
-          </p>
-          <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              ErrorBoundary
-            </code>
-             or
-             
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              errorElement
-            </code>
-             prop on your route.
-          </p>
-        </div>"
-      `);
+      let html = getHtml(container);
+      expect(html).toMatch("Unexpected Application Error!");
+      expect(html).toMatch("Kaboom!");
+      expect(html).toMatch("FAKE STACK TRACE");
+      expect(html).toMatch("💿 Hey developer 👋");
     });
 
     // This test ensures that when manual routes are used, we add hasErrorBoundary
@@ -2095,42 +2038,11 @@ describe("createMemoryRouter", () => {
         throw error;
       }
 
-      expect(getHtml(container)).toMatchInlineSnapshot(`
-        "<div>
-          <h2>
-            Unexpected Application Error!
-          </h2>
-          <h3
-            style="font-style: italic;"
-          >
-            Kaboom!
-          </h3>
-          <pre
-            style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
-          >
-            FAKE STACK TRACE
-          </pre>
-          <p>
-            💿 Hey developer 👋
-          </p>
-          <p>
-            You can provide a way better UX than this when your app throws errors by providing your own 
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              ErrorBoundary
-            </code>
-             or
-             
-            <code
-              style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              errorElement
-            </code>
-             prop on your route.
-          </p>
-        </div>"
-      `);
+      let html = getHtml(container);
+      expect(html).toMatch("Unexpected Application Error!");
+      expect(html).toMatch("Kaboom!");
+      expect(html).toMatch("FAKE STACK TRACE");
+      expect(html).toMatch("💿 Hey developer 👋");
     });
 
     it("does not handle render errors for non-data routers", async () => {
@@ -2280,44 +2192,11 @@ describe("createMemoryRouter", () => {
 
       router.navigate("/child");
       await waitFor(() => screen.getByText("Kaboom!"));
-      expect(getHtml(container)).toMatchInlineSnapshot(`
-        "<div>
-          <div>
-            <h2>
-              Unexpected Application Error!
-            </h2>
-            <h3
-              style="font-style: italic;"
-            >
-              Kaboom!
-            </h3>
-            <pre
-              style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
-            >
-              FAKE STACK TRACE
-            </pre>
-            <p>
-              💿 Hey developer 👋
-            </p>
-            <p>
-              You can provide a way better UX than this when your app throws errors by providing your own 
-              <code
-                style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-              >
-                ErrorBoundary
-              </code>
-               or
-               
-              <code
-                style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
-              >
-                errorElement
-              </code>
-               prop on your route.
-            </p>
-          </div>
-        </div>"
-      `);
+      let html = getHtml(container);
+      expect(html).toMatch("Unexpected Application Error!");
+      expect(html).toMatch("Kaboom!");
+      expect(html).toMatch("FAKE STACK TRACE");
+      expect(html).toMatch("💿 Hey developer 👋");
 
       router.navigate(-1);
       await waitFor(() => {
@@ -2508,6 +2387,120 @@ describe("createMemoryRouter", () => {
       );
       errorSpy.mockRestore();
     });
+
+    it("allows a successful useRevalidator to resolve the error boundary (loader + child boundary)", async () => {
+      let shouldFail = true;
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <Route
+            path="/"
+            Component={() => (
+              <>
+                <MemoryNavigate to="child">/child</MemoryNavigate>
+                <Outlet />
+              </>
+            )}
+          >
+            <Route
+              path="child"
+              loader={() => {
+                if (shouldFail) {
+                  shouldFail = false;
+                  throw new Error("Broken");
+                } else {
+                  return "Fixed";
+                }
+              }}
+              Component={() => <p>{("Child:" + useLoaderData()) as string}</p>}
+              ErrorBoundary={() => {
+                let { revalidate } = useRevalidator();
+                return (
+                  <>
+                    <p>{"Error:" + (useRouteError() as Error).message}</p>
+                    <button onClick={() => revalidate()}>Try again</button>
+                  </>
+                );
+              }}
+            />
+          </Route>
+        )
+      );
+
+      let { container } = render(
+        <div>
+          <RouterProvider router={router} />
+        </div>
+      );
+
+      fireEvent.click(screen.getByText("/child"));
+      await waitFor(() => screen.getByText("Error:Broken"));
+      expect(getHtml(container)).toMatch("Error:Broken");
+      expect(router.state.errors).not.toBe(null);
+
+      fireEvent.click(screen.getByText("Try again"));
+      await waitFor(() => {
+        expect(queryByText(container, "Child:Fixed")).toBeInTheDocument();
+      });
+      expect(getHtml(container)).toMatch("Child:Fixed");
+      expect(router.state.errors).toBe(null);
+    });
+
+    it("allows a successful useRevalidator to resolve the error boundary (loader + parent boundary)", async () => {
+      let shouldFail = true;
+      let router = createMemoryRouter(
+        createRoutesFromElements(
+          <Route
+            path="/"
+            Component={() => (
+              <>
+                <MemoryNavigate to="child">/child</MemoryNavigate>
+                <Outlet />
+              </>
+            )}
+            ErrorBoundary={() => {
+              let { revalidate } = useRevalidator();
+              return (
+                <>
+                  <p>{"Error:" + (useRouteError() as Error).message}</p>
+                  <button onClick={() => revalidate()}>Try again</button>
+                </>
+              );
+            }}
+          >
+            <Route
+              path="child"
+              loader={() => {
+                if (shouldFail) {
+                  shouldFail = false;
+                  throw new Error("Broken");
+                } else {
+                  return "Fixed";
+                }
+              }}
+              Component={() => <p>{("Child:" + useLoaderData()) as string}</p>}
+            />
+          </Route>
+        )
+      );
+
+      let { container } = render(
+        <div>
+          <RouterProvider router={router} />
+        </div>
+      );
+
+      fireEvent.click(screen.getByText("/child"));
+      await waitFor(() => screen.getByText("Error:Broken"));
+      expect(getHtml(container)).toMatch("Error:Broken");
+      expect(router.state.errors).not.toBe(null);
+
+      fireEvent.click(screen.getByText("Try again"));
+      await waitFor(() => {
+        expect(queryByText(container, "Child:Fixed")).toBeInTheDocument();
+      });
+      expect(getHtml(container)).toMatch("Child:Fixed");
+      expect(router.state.errors).toBe(null);
+    });
   });
 
   describe("defer", () => {
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -10,6 +10,7 @@ import type {
   PathPattern,
   RelativeRoutingType,
   Router as RemixRouter,
+  RevalidationState,
   To,
 } from "@remix-run/router";
 import {
@@ -506,13 +507,15 @@ const defaultErrorElement = <DefaultErrorComponent />;
 
 type RenderErrorBoundaryProps = React.PropsWithChildren<{
   location: Location;
+  revalidation: RevalidationState;
   error: any;
   component: React.ReactNode;
   routeContext: RouteContextObject;
 }>;
 
 type RenderErrorBoundaryState = {
   location: Location;
+  revalidation: RevalidationState;
   error: any;
 };
 
@@ -524,6 +527,7 @@ export class RenderErrorBoundary extends React.Component<
     super(props);
     this.state = {
       location: props.location,
+      revalidation: props.revalidation,
       error: props.error,
     };
   }
@@ -544,10 +548,14 @@ export class RenderErrorBoundary extends React.Component<
     // Whether we're in an error state or not, we update the location in state
     // so that when we are in an error state, it gets reset when a new location
     // comes in and the user recovers from the error.
-    if (state.location !== props.location) {
+    if (
+      state.location !== props.location ||
+      (state.revalidation !== "idle" && props.revalidation === "idle")
+    ) {
       return {
         error: props.error,
         location: props.location,
+        revalidation: props.revalidation,
       };
     }
 
@@ -558,6 +566,7 @@ export class RenderErrorBoundary extends React.Component<
     return {
       error: props.error || state.error,
       location: state.location,
+      revalidation: props.revalidation || state.revalidation,
     };
   }
 
@@ -675,6 +684,7 @@ export function _renderMatches(
       (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? (
       <RenderErrorBoundary
         location={dataRouterState.location}
+        revalidation={dataRouterState.revalidation}
         component={errorElement}
         error={error}
         children={getChildren()}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +Allow `useRevalidate()` to resolve a loader-driven error boundary scenario