Make error handling more user friendly

src/components/ChatProvider/index.test.tsx

@@ -141,7 +141,9 @@ describe('the ChatProvider component', () => {
     result.current.connect('mockToken');
 
     setImmediate(() => {
-      expect(mockOnError).toHaveBeenCalledWith('mockError');
+      expect(mockOnError).toHaveBeenCalledWith(
+        new Error("There was a problem connecting to Twilio's conversation service.")
+      );
       done();
     });
   });
@@ -152,6 +154,8 @@ describe('the ChatProvider component', () => {
     result.current.connect('mockToken');
     await waitForNextUpdate();
 
-    expect(mockOnError).toHaveBeenCalledWith('mockError');
+    expect(mockOnError).toHaveBeenCalledWith(
+      new Error('There was a problem getting the Conversation associated with this room.')
+    );
   });
 });

src/components/ChatProvider/index.tsx

@@ -36,7 +36,9 @@ export function ChatProvider({ children }: ChatProviderProps) {
           window.chatClient = client;
           setChatClient(client);
         })
-        .catch(onError);
+        .catch(() => {
+          onError(new Error("There was a problem connecting to Twilio's conversation service."));
+        });
     },
     [onError]
   );
@@ -74,7 +76,9 @@ export function ChatProvider({ children }: ChatProviderProps) {
           window.chatConversation = newConversation;
           setConversation(newConversation);
         })
-        .catch(onError);
+        .catch(() => {
+          onError(new Error('There was a problem getting the Conversation associated with this room.'));
+        });
     }
   }, [room, chatClient, onError]);
 

src/components/ErrorDialog/ErrorDialog.tsx

@@ -10,7 +10,7 @@ import { TwilioError } from 'twilio-video';
 
 interface ErrorDialogProps {
   dismissError: Function;
-  error: TwilioError | null;
+  error: TwilioError | Error | null;
 }
 
 function ErrorDialog({ dismissError, error }: PropsWithChildren<ErrorDialogProps>) {

src/components/VideoProvider/index.tsx

@@ -1,12 +1,5 @@
 import React, { createContext, ReactNode } from 'react';
-import {
-  CreateLocalTrackOptions,
-  ConnectOptions,
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Room,
-  TwilioError,
-} from 'twilio-video';
+import { CreateLocalTrackOptions, ConnectOptions, LocalAudioTrack, LocalVideoTrack, Room } from 'twilio-video';
 import { ErrorCallback } from '../../types';
 import { SelectedParticipantProvider } from './useSelectedParticipant/useSelectedParticipant';
 
@@ -49,7 +42,7 @@ interface VideoProviderProps {
 }
 
 export function VideoProvider({ options, children, onError = () => {} }: VideoProviderProps) {
-  const onErrorCallback = (error: TwilioError) => {
+  const onErrorCallback: ErrorCallback = error => {
     console.log(`ERROR: ${error.message}`, error);
     onError(error);
   };

src/state/index.tsx

@@ -8,8 +8,8 @@ import usePasscodeAuth from './usePasscodeAuth/usePasscodeAuth';
 import { User } from 'firebase';
 
 export interface StateContextType {
-  error: TwilioError | null;
-  setError(error: TwilioError | null): void;
+  error: TwilioError | Error | null;
+  setError(error: TwilioError | Error | null): void;
   getToken(name: string, room: string, passcode?: string): Promise<string>;
   user?: User | null | { displayName: undefined; photoURL: undefined; passcode?: string };
   signIn?(passcode?: string): Promise<void>;

src/types.ts

@@ -29,11 +29,16 @@ declare global {
   interface HTMLMediaElement {
     setSinkId?(sinkId: string): Promise<undefined>;
   }
+
+  // Helps create a union type with TwilioError
+  interface Error {
+    code: undefined;
+  }
 }
 
 export type Callback = (...args: any[]) => void;
 
-export type ErrorCallback = (error: TwilioError) => void;
+export type ErrorCallback = (error: TwilioError | Error) => void;
 
 export type IVideoTrack = LocalVideoTrack | RemoteVideoTrack;