Enrich fatal HLS errors in Sentry (#11359)

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.shared.ts

@@ -27,8 +27,22 @@ export class VideoNotFoundError extends Error {
  */
 export class HLSFatalError extends Error {
   detail: string
-  constructor(detail: string, cause: Error) {
+  type: string
+  diagnostics: Record<string, unknown>
+  constructor({
+    detail,
+    type,
+    cause,
+    diagnostics,
+  }: {
+    detail: string
+    type: string
+    cause: Error
+    diagnostics: Record<string, unknown>
+  }) {
     super(cause.message, {cause})
     this.detail = detail
+    this.type = type
+    this.diagnostics = diagnostics
   }
 }

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -308,7 +308,53 @@ function useHLS({
         ) {
           setError(new VideoNotFoundError())
         } else {
-          setError(new HLSFatalError(data.details, data.error))
+          const video = videoRef.current
+          const mediaError = video?.error
+          setError(
+            new HLSFatalError({
+              detail: data.details,
+              type: data.type,
+              cause: data.error,
+              diagnostics: {
+                hlsError: {
+                  detail: data.details,
+                  type: data.type,
+                  sourceBufferName: data.sourceBufferName,
+                  parent: data.parent,
+                  reason: data.reason,
+                  errorName: data.error.name,
+                  errorCode: (data.error as DOMException).code,
+                },
+                fragment: data.frag
+                  ? {
+                      sn: data.frag.sn,
+                      level: data.frag.level,
+                      type: data.frag.type,
+                      start: data.frag.start,
+                      duration: data.frag.duration,
+                      cc: data.frag.cc,
+                    }
+                  : undefined,
+                media: video
+                  ? {
+                      errorCode: mediaError?.code,
+                      errorMessage: mediaError?.message,
+                      readyState: video.readyState,
+                      networkState: video.networkState,
+                      currentTime: video.currentTime,
+                      paused: video.paused,
+                      ended: video.ended,
+                      seeking: video.seeking,
+                    }
+                  : undefined,
+                lifecycle: {
+                  documentVisibility: document.visibilityState,
+                  hlsIsCurrent: hlsRef.current === hls,
+                },
+                playlist,
+              },
+            }),
+          )
         }
       } else {
         console.error(data.error)

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -82,6 +82,16 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
     ),
     [key, embed],
   )
+  const getErrorMetadata = useCallback((error: Error) => {
+    if (!(error instanceof HLSFatalError)) return {}
+    return {
+      tags: {
+        hls_error_detail: error.detail,
+        hls_error_type: error.type,
+      },
+      hls: error.diagnostics,
+    }
+  }, [])
 
   let aspectRatio: number | undefined
   const dims = embed.aspectRatio
@@ -158,7 +168,10 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
           />
         </>
       )}
-      <ErrorBoundary renderError={renderError} key={key}>
+      <ErrorBoundary
+        renderError={renderError}
+        getErrorMetadata={getErrorMetadata}
+        key={key}>
         <OnlyNearScreen>
           <VideoEmbedInnerWeb
             embed={embed}

src/view/com/util/ErrorBoundary.tsx

@@ -4,12 +4,14 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
+import {type Metadata} from '#/logger/types'
 import {ErrorScreen} from './error/ErrorScreen'
 import {CenteredView} from './Views'
 
 interface Props {
   children?: ReactNode
   renderError?: (error: any) => ReactNode
+  getErrorMetadata?: (error: Error) => Metadata
   style?: StyleProp<ViewStyle>
 }
 
@@ -29,7 +31,10 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    logger.error(error, {errorInfo})
+    logger.error(error, {
+      errorInfo,
+      ...this.props.getErrorMetadata?.(error),
+    })
   }
 
   public render() {