add useDailyError hook and improve error callbacks for nonfatal errors

Co-Authored-By: Nienke Dekker <nienkedekker@gmail.com>

Author: Regaddi

src/DailyMeeting.tsx

@@ -1,4 +1,6 @@
 import {
+  DailyEventObjectFatalError,
+  DailyEventObjectNonFatalError,
   DailyMeetingSessionState,
   DailyMeetingState,
 } from '@daily-co/daily-js';
@@ -14,6 +16,16 @@ export const meetingStateState = atom<DailyMeetingState>({
   default: 'new',
 });
 
+export const meetingErrorState = atom<DailyEventObjectFatalError | null>({
+  key: RECOIL_PREFIX + 'meeting-error',
+  default: null,
+});
+
+export const nonFatalErrorState = atom<DailyEventObjectNonFatalError | null>({
+  key: RECOIL_PREFIX + 'non-fatal-error',
+  default: null,
+});
+
 export const meetingSessionDataState = atom<DailyMeetingSessionState>({
   key: 'meeting-session-data',
   default: {
@@ -46,7 +58,27 @@ export const DailyMeeting: React.FC<React.PropsWithChildren<{}>> = ({
   useDailyEvent('joining-meeting', updateMeetingState);
   useDailyEvent('joined-meeting', updateMeetingState);
   useDailyEvent('left-meeting', updateMeetingState);
-  useDailyEvent('error', updateMeetingState);
+  useDailyEvent(
+    'error',
+    useRecoilCallback(
+      ({ set }) =>
+        (ev) => {
+          set(meetingErrorState, ev);
+          updateMeetingState();
+        },
+      [updateMeetingState]
+    )
+  );
+  useDailyEvent(
+    'nonfatal-error',
+    useRecoilCallback(
+      ({ set }) =>
+        (ev) => {
+          set(nonFatalErrorState, ev);
+        },
+      []
+    )
+  );
 
   /**
    * Updates meeting session state.

src/hooks/useDailyError.ts

@@ -0,0 +1,15 @@
+import { useRecoilValue } from 'recoil';
+
+import { meetingErrorState, nonFatalErrorState } from '../DailyMeeting';
+
+/**
+ * Returns a meeting's last known errors.
+ */
+export const useDailyError = () => {
+  const meetingError = useRecoilValue(meetingErrorState);
+  const nonFatalError = useRecoilValue(nonFatalErrorState);
+  return {
+    meetingError,
+    nonFatalError,
+  };
+};

src/hooks/useInputSettings.ts

@@ -1,35 +1,40 @@
 import {
   DailyCall,
   DailyEventObject,
+  DailyEventObjectNonFatalError,
   DailyInputSettings,
 } from '@daily-co/daily-js';
 import { useCallback, useEffect } from 'react';
 import { atom, useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { RECOIL_PREFIX } from '../lib/constants';
+import { Reconstruct } from '../types/Reconstruct';
 import { useDaily } from './useDaily';
+import { useDailyError } from './useDailyError';
 import { useDailyEvent } from './useDailyEvent';
 
+type DailyEventObjectInputSettingsError = Reconstruct<
+  DailyEventObjectNonFatalError,
+  'type',
+  'input-settings-error'
+>;
+
 interface UseInputSettingsArgs {
-  onError?(ev: DailyEventObject<'nonfatal-error'>): void;
+  onError?(ev: DailyEventObjectInputSettingsError): void;
   onInputSettingsUpdated?(ev: DailyEventObject<'input-settings-updated'>): void;
 }
 
 const inputSettingsState = atom<DailyInputSettings | null>({
   key: RECOIL_PREFIX + 'input-settings',
   default: null,
 });
-const errorState = atom<string | null>({
-  key: RECOIL_PREFIX + 'input-settings-error',
-  default: null,
-});
 
 export const useInputSettings = ({
   onError,
   onInputSettingsUpdated,
 }: UseInputSettingsArgs = {}) => {
   const inputSettings = useRecoilValue(inputSettingsState);
-  const errorMsg = useRecoilValue(errorState);
+  const { nonFatalError } = useDailyError();
   const daily = useDaily();
 
   const updateInputSettingsState = useRecoilCallback(
@@ -64,13 +69,11 @@ export const useInputSettings = ({
    */
   useDailyEvent(
     'nonfatal-error',
-    useRecoilCallback(
-      ({ set }) =>
-        (ev) => {
-          if (ev.type !== 'input-settings-error') return;
-          set(errorState, ev.errorMsg);
-          onError?.(ev);
-        },
+    useCallback(
+      (ev) => {
+        if (ev.type !== 'input-settings-error') return;
+        onError?.(ev as DailyEventObjectInputSettingsError);
+      },
       [onError]
     )
   );
@@ -86,7 +89,10 @@ export const useInputSettings = ({
   );
 
   return {
-    errorMsg,
+    errorMsg:
+      nonFatalError?.type === 'input-settings-error'
+        ? nonFatalError.errorMsg
+        : null,
     inputSettings,
     updateInputSettings,
   };

src/hooks/useLiveStreaming.ts

@@ -1,16 +1,28 @@
-import { DailyCall, DailyEventObject } from '@daily-co/daily-js';
+import {
+  DailyCall,
+  DailyEventObject,
+  DailyEventObjectNonFatalError,
+} from '@daily-co/daily-js';
 import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { liveStreamingState } from '../DailyLiveStreaming';
+import { Reconstruct } from '../types/Reconstruct';
 import { useDaily } from './useDaily';
 import { useDailyEvent } from './useDailyEvent';
 
+type DailyEventObjectLiveStreamingWarning = Reconstruct<
+  DailyEventObjectNonFatalError,
+  'type',
+  'live-streaming-warning'
+>;
+
 interface UseLiveStreamingArgs {
   onLiveStreamingStarted?(ev: DailyEventObject<'live-streaming-started'>): void;
   onLiveStreamingStopped?(ev: DailyEventObject<'live-streaming-stopped'>): void;
   onLiveStreamingUpdated?(ev: DailyEventObject<'live-streaming-updated'>): void;
   onLiveStreamingError?(ev: DailyEventObject<'live-streaming-error'>): void;
+  onLiveStreamingWarning?(ev: DailyEventObjectLiveStreamingWarning): void;
 }
 
 /**
@@ -24,6 +36,7 @@ export const useLiveStreaming = ({
   onLiveStreamingStarted,
   onLiveStreamingStopped,
   onLiveStreamingUpdated,
+  onLiveStreamingWarning,
 }: UseLiveStreamingArgs = {}) => {
   const daily = useDaily();
   const state = useRecoilValue(liveStreamingState);
@@ -37,7 +50,6 @@ export const useLiveStreaming = ({
       [onLiveStreamingStarted]
     )
   );
-
   useDailyEvent(
     'live-streaming-stopped',
     useCallback(
@@ -47,7 +59,6 @@ export const useLiveStreaming = ({
       [onLiveStreamingStopped]
     )
   );
-
   useDailyEvent(
     'live-streaming-updated',
     useCallback(
@@ -57,7 +68,6 @@ export const useLiveStreaming = ({
       [onLiveStreamingUpdated]
     )
   );
-
   useDailyEvent(
     'live-streaming-error',
     useCallback(
@@ -67,6 +77,16 @@ export const useLiveStreaming = ({
       [onLiveStreamingError]
     )
   );
+  useDailyEvent(
+    'nonfatal-error',
+    useCallback(
+      (ev) => {
+        if (ev.type !== 'live-streaming-warning') return;
+        onLiveStreamingWarning?.(ev as DailyEventObjectLiveStreamingWarning);
+      },
+      [onLiveStreamingWarning]
+    )
+  );
 
   const startLiveStreaming = useCallback(
     (...args: Parameters<DailyCall['startLiveStreaming']>) => {

src/hooks/useMeetingSessionState.ts

@@ -1,12 +1,38 @@
+import { DailyEventObjectNonFatalError } from '@daily-co/daily-js';
+import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { meetingSessionDataState } from '../DailyMeeting';
+import { Reconstruct } from '../types/Reconstruct';
+import { useDailyEvent } from './useDailyEvent';
+
+type DailyEventObjectMeetingSessionDataError = Reconstruct<
+  DailyEventObjectNonFatalError,
+  'type',
+  'meeting-session-data-error'
+>;
+
+interface Props {
+  onError?(ev: DailyEventObjectMeetingSessionDataError): void;
+}
 
 /**
  * Returns a meeting's current session data and topology.
  */
-export const useMeetingSessionState = <T = any>() => {
+export const useMeetingSessionState = <T = any>({ onError }: Props = {}) => {
   const meetingSessionState = useRecoilValue(meetingSessionDataState);
+
+  useDailyEvent(
+    'nonfatal-error',
+    useCallback(
+      (ev) => {
+        if (ev.type !== 'meeting-session-data-error') return;
+        onError?.(ev as DailyEventObjectMeetingSessionDataError);
+      },
+      [onError]
+    )
+  );
+
   return {
     data: meetingSessionState?.data as T,
     topology: meetingSessionState?.topology,

src/hooks/useScreenShare.ts

@@ -1,7 +1,12 @@
-import { DailyCall, DailyTrackState } from '@daily-co/daily-js';
+import {
+  DailyCall,
+  DailyEventObjectNonFatalError,
+  DailyTrackState,
+} from '@daily-co/daily-js';
 import { useCallback } from 'react';
 
 import { useScreenSharesContext } from '../DailyScreenShares';
+import { Reconstruct } from '../types/Reconstruct';
 import { useDaily } from './useDaily';
 import { useDailyEvent } from './useDailyEvent';
 
@@ -13,7 +18,14 @@ export interface ScreenShare {
   session_id: string;
 }
 
+type DailyEventObjectScreenShareError = Reconstruct<
+  DailyEventObjectNonFatalError,
+  'type',
+  'screen-share-error'
+>;
+
 interface UseScreenShareArgs {
+  onError?(ev: DailyEventObjectScreenShareError): void;
   onLocalScreenShareStarted?(): void;
   onLocalScreenShareStopped?(): void;
 }
@@ -22,6 +34,7 @@ interface UseScreenShareArgs {
  * Allows access to information about shared screens, and methods to start or stop a local screen share.
  */
 export const useScreenShare = ({
+  onError,
   onLocalScreenShareStarted,
   onLocalScreenShareStopped,
 }: UseScreenShareArgs = {}) => {
@@ -55,6 +68,16 @@ export const useScreenShare = ({
       [onLocalScreenShareStopped]
     )
   );
+  useDailyEvent(
+    'nonfatal-error',
+    useCallback(
+      (ev) => {
+        if (ev.type !== 'screen-share-error') return;
+        onError?.(ev as DailyEventObjectScreenShareError);
+      },
+      [onError]
+    )
+  );
 
   const { screens } = useScreenSharesContext();
 

src/types/Reconstruct.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `Reconstruct` type utility.
+ *
+ * Given an object type `T`, a discriminator key `Key`, and a specific value `Value` for that key,
+ * it reconstructs `T` such that the property denoted by `Key` is narrowed to just `Value`.
+ *
+ * Other properties of `T` remain unchanged.
+ *
+ * Example:
+ *
+ * If T = {
+ *    category: 'x' | 'y';
+ *    someProp: number;
+ * }
+ *
+ * Key = 'category'
+ * Value = 'x'
+ *
+ * Then, Reconstruct<T, Key, Value> will yield:
+ *
+ * {
+ *    category: 'x';
+ *    someProp: number;
+ * }
+ *
+ */
+export type Reconstruct<
+  T,
+  K extends keyof T = keyof T,
+  V extends T[K] = T[K]
+> = {
+  [P in keyof T]: P extends K ? V : T[P];
+};