@dxos/react-client 0.6.14-main.7bd9c89 → 0.6.14-main.f49f251

package/src/testing/withClientProvider.tsx

@@ -3,13 +3,14 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { useRef } from 'react';
-import { type FallbackProps, ErrorBoundary } from 'react-error-boundary';
+import React, { createContext, type PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
+import { type FallbackProps, ErrorBoundary as NativeErrorBoundary } from 'react-error-boundary';
 
 import { Trigger } from '@dxos/async';
 import { type Client } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
 import { performInvitation, TestBuilder } from '@dxos/client/testing';
+import { log } from '@dxos/log';
 import { type MaybePromise } from '@dxos/util';
 
 import { ClientProvider, type ClientProviderProps } from '../client';
@@ -66,7 +67,7 @@ export const withClientProvider = ({
     };
 
     return (
-      <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ErrorBoundary>
         <ClientProvider onInitialized={handleInitialized} {...props}>
           <Story />
         </ClientProvider>
@@ -80,6 +81,10 @@ export const withClientProvider = ({
 // TODO(burdon): Delay/jitter for creation of other clients.
 export type WithMultiClientProviderProps = InitializeProps & ClientProviderProps & { numClients?: number };
 
+const MultiClientContext = createContext<{ id: number }>({ id: 0 });
+
+export const useMultiClient = () => useContext(MultiClientContext);
+
 /**
  * Decorator that creates a scaffold for multiple clients.
  * Orchestrates invitations between a randomly selected host and the remaining clients.
@@ -99,16 +104,20 @@ export const withMultiClientProvider = ({
     const spaceReady = useRef(new Trigger<Space | undefined>());
 
     // Handle invitations.
-    const handleInitialized = async (client: Client) => {
+    // NOTE: The zeroth client isn't necessarily the first to be initialized.
+    const handleInitialized = async (client: Client, index: number) => {
+      log.info('initialized', { index });
       if (createSpace) {
         if (!hostRef.current) {
           hostRef.current = client;
           const space = await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
           spaceReady.current.wake(space);
+          log.info('inviting', { index });
         } else {
           await initializeClient(client, { createIdentity, onInitialized });
           const space = await spaceReady.current.wait();
           if (space) {
+            log.info('joining', { index });
             await Promise.all(performInvitation({ host: space, guest: client.spaces }));
           }
         }
@@ -116,28 +125,46 @@ export const withMultiClientProvider = ({
     };
 
     return (
-      <>
+      <ErrorBoundary>
         {Array.from({ length: numClients }).map((_, index) => (
-          <ErrorBoundary key={index} FallbackComponent={ErrorFallback}>
+          <MultiClientContext.Provider key={index} value={{ id: index }}>
             <ClientProvider
               services={builder.current.createLocalClientServices()}
-              onInitialized={handleInitialized}
+              onInitialized={(client) => handleInitialized(client, index)}
               {...props}
             >
               <Story />
             </ClientProvider>
-          </ErrorBoundary>
+          </MultiClientContext.Provider>
         ))}
-      </>
+      </ErrorBoundary>
     );
   };
 };
 
+const ErrorBoundary = ({ children }: PropsWithChildren) => {
+  const [error, setError] = useState<Error>();
+  useEffect(() => {
+    const handleError = (event: PromiseRejectionEvent) => {
+      setError(event.reason);
+    };
+
+    window.addEventListener('unhandledrejection', handleError);
+    return () => window.removeEventListener('unhandledrejection', handleError);
+  }, []);
+
+  if (error) {
+    return <ErrorFallback error={error} resetErrorBoundary={() => setError(undefined)} />;
+  }
+
+  return <NativeErrorBoundary FallbackComponent={ErrorFallback}>{children}</NativeErrorBoundary>;
+};
+
 const ErrorFallback = ({ error }: FallbackProps) => {
   const { name, message, stack } =
     error instanceof Error ? error : { name: 'Error', message: String(error), stack: undefined };
   return (
-    <div role='alert' className='flex flex-col overflow-hidden p-4 gap-4'>
+    <div role='alert' className='flex flex-col p-4 gap-4 overflow-auto'>
       <h1 className='text-xl text-red-500'>{name}</h1>
       <div className='text-lg'>{message}</div>
       {stack && <pre className='whitespace-pre-wrap text-sm text-subdued'>{stack}</pre>}