clean up some error messages (#325)

Author: yinishi

examples/next-app/components/Voice.tsx

@@ -16,6 +16,10 @@ export const Voice = ({ accessToken }: { accessToken: string }) => {
         // eslint-disable-next-line no-console
         console.log('message', message);
       }}
+      onError={(message) => {
+        // eslint-disable-next-line no-console
+        console.error('onError', message);
+      }}
       onAudioStart={(clipId) => {
         // eslint-disable-next-line no-console
         console.log('Start playing clip with ID:', clipId);

packages/react/src/lib/VoiceProvider.tsx

@@ -190,10 +190,11 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
   }, []);
 
   const onClientError: NonNullable<
-    Parameters<typeof useVoiceClient>[0]['onError']
+    Parameters<typeof useVoiceClient>[0]['onClientError']
   > = useCallback(
-    (message, err) => {
+    (msg, err) => {
       stopTimer();
+      const message = `A websocket connection could not be established. Error message: ${msg ?? 'unknown'}`;
       updateError({ type: 'socket_error', message, error: err });
     },
     [stopTimer, updateError],
@@ -270,7 +271,18 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
       },
       [messageStore, player, toolStatus],
     ),
-    onError: onClientError,
+    onClientError,
+    onToolCallError: useCallback(
+      (message: string, err?: Error) => {
+        const error: VoiceError = {
+          type: 'socket_error',
+          message,
+          error: err,
+        };
+        updateError(error);
+      },
+      [updateError],
+    ),
     onOpen: useCallback(() => {
       startTimer();
       messageStore.createConnectMessage();
@@ -358,7 +370,7 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
         const message = 'Microphone permission denied';
         const error: VoiceError = { type: 'mic_error', message };
         updateError(error);
-        return Promise.reject(new Error(message));
+        return;
       }
 
       try {
@@ -367,10 +379,9 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
           verboseTranscription: true,
         });
       } catch (e) {
-        const message = 'We could not connect to the voice. Please try again.';
-        const error: VoiceError = { type: 'socket_error', message };
-        updateError(error);
-        return Promise.reject(new Error(message));
+        // catching the thrown error here so we can return early from the connect function,
+        // but the error itself is handled in the `onClientError` callback on the client
+        return;
       }
 
       try {

packages/react/src/lib/useVoiceClient.test.ts

@@ -7,7 +7,7 @@ describe('useVoiceClient', () => {
   it('creates a client with the given config', () => {
     const hook = renderHook(() =>
       useVoiceClient({
-        onError: () => {},
+        onClientError: () => {},
       }),
     );
 

packages/react/src/lib/useVoiceClient.ts

@@ -52,7 +52,8 @@ export const useVoiceClient = (props: {
   onAudioMessage?: (message: AudioOutputMessage) => void;
   onMessage?: (message: JSONMessage) => void;
   onToolCall?: ToolCallHandler;
-  onError?: (message: string, error?: Error) => void;
+  onToolCallError?: (message: string, error?: Error) => void;
+  onClientError?: (message: string, error?: Error) => void;
   onOpen?: () => void;
   onClose?: Hume.empathicVoice.chat.ChatSocket.EventHandlers['close'];
 }) => {
@@ -75,8 +76,13 @@ export const useVoiceClient = (props: {
   const onToolCall = useRef<typeof props.onToolCall>(props.onToolCall);
   onToolCall.current = props.onToolCall;
 
-  const onError = useRef<typeof props.onError>(props.onError);
-  onError.current = props.onError;
+  const onClientError = useRef<typeof props.onClientError>(props.onClientError);
+  onClientError.current = props.onClientError;
+
+  const onToolCallError = useRef<typeof props.onToolCallError>(
+    props.onToolCallError,
+  );
+  onToolCallError.current = props.onToolCallError;
 
   const onOpen = useRef<typeof props.onOpen>(props.onOpen);
   onOpen.current = props.onOpen;
@@ -178,7 +184,7 @@ export const useVoiceClient = (props: {
                 } else if (response.type === 'tool_error') {
                   client.current?.sendToolErrorMessage(response);
                 } else {
-                  onError.current?.('Invalid response from tool call');
+                  onToolCallError.current?.('Invalid response from tool call');
                 }
               });
           }
@@ -197,7 +203,7 @@ export const useVoiceClient = (props: {
 
       client.current.on('error', (e) => {
         const message = e instanceof Error ? e.message : 'Unknown error';
-        onError.current?.(message, e instanceof Error ? e : undefined);
+        onClientError.current?.(message, e instanceof Error ? e : undefined);
         reject(e);
       });