Add Error Callback (#302)

* fix: added ID element

* chore: added changeset

* fix: added onError callback

.changeset/sour-pugs-beg.md

@@ -0,0 +1,9 @@
+---
+'@livepeer/core': patch
+'@livepeer/core-react': patch
+'@livepeer/react': patch
+'@livepeer/react-native': patch
+'livepeer': patch
+---
+
+**Fix:** added an `onError` callback to the Player to allow users to catch and handle miscellaneous errors which occur in the Player, which are not already handled.

packages/core-react/src/components/player/Player.tsx

@@ -104,6 +104,9 @@ export type PlayerProps<TElement, TPoster> = {
   /** Callback called when the media sources are changed */
   onSourceUpdated?: (sources: Src[]) => void;
 
+  /** Callback called when an error occurs that is not access control or metrics */
+  onError?: (error: Error) => void;
+
   /** Callback ref passed to the underlying media element. Simple refs are not supported, due to the use of HLS.js under the hood. */
   mediaElementRef?: React.RefCallback<TElement | null | undefined>;
 } & (
@@ -131,6 +134,7 @@ export const usePlayer = <TElement, TPoster>(
     onStreamStatusChange,
     onMetricsError,
     onAccessControlError,
+    onError,
     onSourceUpdated,
     jwt,
 
@@ -256,6 +260,7 @@ export const usePlayer = <TElement, TPoster>(
       onStreamStatusChange: onStreamStatusChangeCallback,
       onMetricsError,
       onAccessControlError: accessControlErrorCallback,
+      onError,
       isCurrentlyShown: _isCurrentlyShown,
     },
     controlsContainerProps: {

packages/core-react/src/components/player/players.tsx

@@ -18,6 +18,7 @@ export type VideoPlayerProps<TElement, TPoster> = {
   onStreamStatusChange?: (isLive: boolean) => void;
   onMetricsError?: (error: Error) => void;
   onAccessControlError?: (error: Error) => void;
+  onError?: (error: Error) => void;
 };
 
 export type AudioPlayerProps<TElement, TPoster> = Omit<

packages/core/src/providers/version.ts

@@ -1,3 +1,3 @@
-export const core = `@livepeer/core@1.3.1`;
-export const react = `@livepeer/react@2.3.1`;
-export const reactNative = `@livepeer/react-native@1.3.1`;
+export const core = `@livepeer/core@1.3.2`;
+export const react = `@livepeer/react@2.3.2`;
+export const reactNative = `@livepeer/react-native@1.3.2`;

packages/react-native/src/components/media/players/VideoPlayer.tsx

@@ -53,6 +53,7 @@ export const VideoPlayer = React.forwardRef<MediaElement, VideoPlayerProps>(
       poster,
       audioMode,
       onMetricsError,
+      onError,
       isCurrentlyShown,
     },
     ref,
@@ -80,12 +81,6 @@ export const VideoPlayer = React.forwardRef<MediaElement, VideoPlayerProps>(
       [autoPlay, isCurrentlyShown],
     );
 
-    const onError = async (_e: string) => {
-      // await new Promise((r) => setTimeout(r, 1000 * ++retryCount));
-      // await state._element?.unloadAsync();
-      // TODO add error handling
-    };
-
     React.useEffect(() => {
       const removeEffectsFromStore = addEffectsToStore(
         context,
@@ -183,7 +178,7 @@ export const VideoPlayer = React.forwardRef<MediaElement, VideoPlayerProps>(
         progressUpdateIntervalMillis={defaultProgressUpdateInterval}
         onFullscreenUpdate={onFullscreenUpdate}
         onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-        onError={onError}
+        onError={(err) => onError?.(new Error(err))}
         shouldPlay={shouldPlay}
         ref={ref}
         isMuted={muted}

packages/react/src/components/media/players/VideoPlayer.tsx

@@ -47,6 +47,7 @@ export const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoPlayerProps>(
       onStreamStatusChange,
       onMetricsError,
       onAccessControlError,
+      onError: onMiscError,
       priority,
       allowCrossOriginCredentials,
     } = props;
@@ -107,6 +108,8 @@ export const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoPlayerProps>(
             onStreamStatusChange?.(false);
           } else if (isAccessControlError(cleanError)) {
             onAccessControlError?.(cleanError);
+          } else {
+            onMiscError?.(cleanError);
           }
           console.warn(cleanError.message);
         };