enhance: Improve ErrorBoundary (#3010)

Author: ntucker

.changeset/fair-terms-sneeze.md

@@ -0,0 +1,7 @@
+---
+"@data-client/react": patch
+---
+
+ErrorBoundary listens to all errors
+
+This means it may catch errors that were previously passing thorugh

.changeset/metal-beds-compare.md

@@ -0,0 +1,5 @@
+---
+"@data-client/react": patch
+---
+
+ErrorBoundary default error fallback supports react native

.changeset/shiny-windows-care.md

@@ -0,0 +1,11 @@
+---
+"@data-client/react": patch
+---
+
+Add listen prop to ErrorBoundary and AsyncBoundary
+
+```tsx
+<AsyncBoundary listen={history.listen}>
+  <MatchedRoute index={0} />
+</AsyncBoundary>
+```

.changeset/weak-days-perform.md

@@ -0,0 +1,23 @@
+---
+"@data-client/react": patch
+---
+
+Add resetErrorBoundary sent to errorComponent
+
+```tsx
+function ErrorComponent({
+  error,
+  className,
+  resetErrorBoundary,
+}: {
+  error: Error;
+  resetErrorBoundary: () => void;
+  className?: string;
+}) {
+  return (
+    <pre role="alert" className={className}>
+      {error.message} <button onClick={resetErrorBoundary}>Reset</button>
+    </pre>
+  );
+}
+```

.circleci/config.yml

@@ -87,7 +87,7 @@ jobs:
                 ./codecov < ./lcov.info || true;
               fi
             else
-              yarn test:ci --maxWorkers=3 packages/react packages/redux packages/ssr packages/use-enhanced-reducer packages/img packages/rest packages/hooks
+              yarn test:ci --maxWorkers=3
             fi
 
   node_matrix:
@@ -130,9 +130,6 @@ jobs:
             if [ "<< parameters.typescript-version >>" != "latest" ]; then
             yarn add --dev typescript@<< parameters.typescript-version >>
             fi
-            if [ "<< parameters.typescript-version >>" == "~4.0" ]; then
-            yarn add --dev @types/[email protected]
-            fi
       - run:
           name: typecheck
           command: |

README.md

@@ -255,7 +255,7 @@ For the small price of 9kb gziped.    [🏁Get started now](https://da
   - [ctrl.resolve](https://dataclient.io/docs/api/Controller#resolve)
   - [ctrl.subscribe](https://dataclient.io/docs/api/Controller#subscribe)
   - [ctrl.unsubscribe](https://dataclient.io/docs/api/Controller#unsubscribe)
-- Components: [<CacheProvider/>](https://dataclient.io/docs/api/CacheProvider), [<AsyncBoundary/>](https://dataclient.io/docs/api/AsyncBoundary), [<NetworkErrorBoundary/>](https://dataclient.io/docs/api/NetworkErrorBoundary), [<MockResolver/>](https://dataclient.io/docs/api/MockResolver)
+- Components: [<CacheProvider/>](https://dataclient.io/docs/api/CacheProvider), [<AsyncBoundary/>](https://dataclient.io/docs/api/AsyncBoundary), [<ErrorBoundary/>](https://dataclient.io/docs/api/ErrorBoundary), [<MockResolver/>](https://dataclient.io/docs/api/MockResolver)
 - Data Mocking: [Fixture](https://dataclient.io/docs/api/Fixtures#successfixture), [Interceptor](https://dataclient.io/docs/api/Fixtures#interceptor), [renderDataClient()](https://dataclient.io/docs/api/makeRenderDataClient)
 - Middleware: [LogoutManager](https://dataclient.io/docs/api/LogoutManager), [NetworkManager](https://dataclient.io/docs/api/NetworkManager), [SubscriptionManager](https://dataclient.io/docs/api/SubscriptionManager), [PollingSubscription](https://dataclient.io/docs/api/PollingSubscription), [DevToolsManager](https://dataclient.io/docs/api/DevToolsManager)
 

docs/core/api/AsyncBoundary.md

@@ -9,8 +9,7 @@ title: '<AsyncBoundary />'
 
 Handles loading and error conditions of Suspense.
 
-In React 18, this will create a concurrent split, and in 16 and 17 it will show loading fallbacks. If there is an
-irrecoverable API error, it will show an error fallback.
+In React 18, this will create a [concurrent split](https://react.dev/reference/react/useTransition), and in 16 and 17 it will show loading fallbacks. If there is an irrecoverable error, it will show an error fallback.
 
 :::tip
 
@@ -47,10 +46,13 @@ function SuspendingComponent() {
 interface BoundaryProps {
   children: React.ReactNode;
   fallback?: React.ReactNode;
+  errorClassName?: string;
   errorComponent?: React.ComponentType<{
     error: NetworkError;
+    resetErrorBoundary: () => void;
     className?: string;
   }>;
+  listen?: (resetListener: () => void) => () => void;
 }
 ```
 
@@ -66,23 +68,21 @@ Component to handle caught errors
 
 ```tsx
 import React from 'react';
-import {
-  CacheProvider,
-  AsyncBoundary,
-  NetworkError,
-} from '@data-client/react';
+import { CacheProvider, AsyncBoundary } from '@data-client/react';
 
 function ErrorPage({
   error,
   className,
+  resetErrorBoundary,
 }: {
-  error: NetworkError;
+  error: Error;
+  resetErrorBoundary: () => void;
   className?: string;
 }) {
   return (
-    <div className={className}>
-      {error.status} {error.response && error.response.statusText}
-    </div>
+    <pre role="alert" className={className}>
+      {error.message} <button onClick={resetErrorBoundary}>Reset</button>
+    </pre>
   );
 }
 
@@ -97,11 +97,37 @@ export default function App() {
 }
 ```
 
-Note: Once `<AsyncBoundary />` catches an error it will only render the fallback
-until it is remounted. To get around this you'll likely want to place the boundary at
-locations that will cause remounts when the error should be cleared. This is usually
-below the route itself.
-
-## errorClassName
+### errorClassName
 
 `className` to forward to [errorComponent](#errorcomponent)
+
+### listen
+
+Subscription handler to reset error state on events like URL location changes. This is great
+for placing a boundary to wrap routing components.
+
+An example using [Anansi Router](https://www.npmjs.com/package/@anansi/router), which uses
+[history](https://www.npmjs.com/package/history) subscription.
+
+```tsx
+import { useController } from '@anansi/router';
+import { AsyncBoundary } from '@data-client/react';
+
+function App() {
+  const { history } = useController();
+  return (
+    <div>
+      <nav>
+        <Link name="Home">Coin App</Link>
+      </nav>
+      <main>
+        // highlight-start
+        <AsyncBoundary listen={history.listen}>
+          <MatchedRoute index={0} />
+        </AsyncBoundary>
+        // highlight-end
+      </main>
+    </div>
+  );
+}
+```

docs/core/api/ErrorBoundary.md

@@ -0,0 +1,117 @@
+---
+title: '<ErrorBoundary />'
+---
+
+Displays a fallback component an error is thrown (including rejected [useSuspense()](./useSuspense.md)).
+
+:::info
+
+Reusable React error boundary component.
+
+:::
+
+## Usage
+
+Place `ErrorBoundary` [at or above navigational boundaries](../getting-started/data-dependency.md#boundaries) like **pages, routes, or modals** to "catch" errors and render a fallback UI.
+
+```tsx
+import React from 'react';
+import { ErrorBoundary } from '@data-client/react';
+
+export default function MyPage() {
+  return (
+    <ErrorBoundary>
+      <SuspendingComponent />
+    </ErrorBoundary>
+  );
+}
+
+function SuspendingComponent() {
+  const data = useSuspense(MyEndpoint);
+
+  return <div>{data.text}</div>;
+}
+```
+
+## Props
+
+```tsx
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+  fallbackComponent: React.ComponentType<{
+    error: E;
+    resetErrorBoundary: () => void;
+    className?: string;
+  }>;
+  listen?: (resetListener: () => void) => () => void;
+}
+```
+
+### fallbackComponent
+
+```tsx
+import React from 'react';
+import { CacheProvider, ErrorBoundary } from '@data-client/react';
+
+function ErrorPage({
+  error,
+  className,
+  resetErrorBoundary,
+}: {
+  error: Error;
+  resetErrorBoundary: () => void;
+  className?: string;
+}) {
+  return (
+    <pre role="alert" className={className}>
+      {error.message} <button onClick={resetErrorBoundary}>Reset</button>
+    </pre>
+  );
+}
+
+export default function App() {
+  return (
+    <CacheProvider>
+      <ErrorBoundary fallbackComponent={ErrorPage} className="error">
+        <Router />
+      </ErrorBoundary>
+    </CacheProvider>
+  );
+}
+```
+
+### listen
+
+Subscription handler to reset error state on events like URL location changes. This is great
+for placing a boundary to wrap routing components.
+
+An example using [Anansi Router](https://www.npmjs.com/package/@anansi/router), which uses
+[history](https://www.npmjs.com/package/history) subscription.
+
+```tsx
+import { useController } from '@anansi/router';
+import { ErrorBoundary } from '@data-client/react';
+
+function App() {
+  const { history } = useController();
+  return (
+    <div>
+      <nav>
+        <Link name="Home">Coin App</Link>
+      </nav>
+      <main>
+        // highlight-start
+        <ErrorBoundary listen={history.listen}>
+          <MatchedRoute index={0} />
+        </ErrorBoundary>
+        // highlight-end
+      </main>
+    </div>
+  );
+}
+```
+
+### className
+
+`className` to forward to [fallbackComponent](#fallbackcomponent)

docs/core/api/NetworkErrorBoundary.md

@@ -18,7 +18,7 @@ It uses the rejection error to determine whether it should be treated as 'soft'
 
 Soft errors will continue showing valid data if it exists. However, if no previous data is in the store,
 it will reject with `error`. In this case [useSuspense()](../api/useSuspense.md) throws the
-error to be caught by the nearest [NetworkErrorBoundary](../api/NetworkErrorBoundary.md) or [AsyncBoundary](../api/AsyncBoundary.md)
+error to be caught by the nearest [ErrorBoundary](../api/ErrorBoundary.md) or [AsyncBoundary](../api/AsyncBoundary.md)
 
 ### Hard