update error handling in video content pages

src/api/hooks/video.ts

@@ -81,7 +81,7 @@ export const useMostViewedVideosIds = (variables?: GetMostViewedVideosQueryVaria
 }
 
 export const useMostViewedVideos = (variables?: GetMostViewedVideosQueryVariables, opts?: MostViewedVideosOpts) => {
-  const { mostViewedVideos } = useMostViewedVideosIds(variables, opts)
+  const { mostViewedVideos, loading, error } = useMostViewedVideosIds(variables, opts)
 
   const mostViewedVideosIds = mostViewedVideos?.map((item) => item.id)
 
@@ -101,6 +101,8 @@ export const useMostViewedVideos = (variables?: GetMostViewedVideosQueryVariable
   return {
     videos: sortedVideos,
     ...rest,
+    error: error || rest.error,
+    loading: loading || rest.loading,
   }
 }
 

src/components/InfiniteGrids/InfiniteChannelWithVideosGrid.tsx

@@ -21,6 +21,7 @@ import {
   TitleContainer,
 } from '@/shared/components'
 import { SvgGlyphChevronRight } from '@/shared/icons'
+import { SentryLogger } from '@/utils/logs'
 
 import { AdditionalLink, LanguageSelectWrapper, LoadMoreButtonWrapper, Separator } from './InfiniteGrid.style'
 
@@ -90,12 +91,9 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
     dataAccessor: (rawData) => rawData?.channelsConnection,
     itemsPerRow: INITIAL_CHANNELS_PER_ROW,
     additionalSortFn,
+    onError: (error) => SentryLogger.error('Failed to fetch channels', 'InfiniteChannelWithVideosGrid', error),
   })
 
-  if (error) {
-    throw error
-  }
-
   const placeholderItems = Array.from({ length: placeholdersCount }, () => ({ id: undefined }))
   const shouldShowLoadMoreButton =
     onDemand && !loading && (displayedItems.length < totalCount || (maximumCount && totalCount < maximumCount))
@@ -107,6 +105,10 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
     setSelectedLanguage(value)
   }
 
+  if (error) {
+    return null
+  }
+
   return (
     <section className={className}>
       <GridHeadingContainer>

src/views/viewer/HomeView.tsx

@@ -24,10 +24,13 @@ export const HomeView: React.FC = () => {
   const channelIdIn = followedChannels.map((channel) => channel.id)
   const anyFollowedChannels = channelIdIn.length > 0
 
-  const { mostViewedVideos, loading: mostViewedVideosLoading, error: mostViewedVideosError } = useMostViewedVideosIds({
-    limit: 200,
-    timePeriodDays: 30,
-  })
+  const { mostViewedVideos, loading: mostViewedVideosLoading, error: mostViewedVideosError } = useMostViewedVideosIds(
+    {
+      limit: 200,
+      timePeriodDays: 30,
+    },
+    { onError: (error) => SentryLogger.error('Failed to fetch most viewed videos IDs', 'HomeView', error) }
+  )
   const mostViewedVideosIds = mostViewedVideos?.map((item) => item.id)
 
   const { videosConnection, loading: followedLoading, error: followedError } = useVideosConnection(

src/views/viewer/PopularView/PopularView.tsx

@@ -4,28 +4,45 @@ import React, { FC } from 'react'
 import { useMostViewedVideosAllTimeIds } from '@/api/hooks'
 import { useMostViewedVideos } from '@/api/hooks'
 import { useMostViewedChannelsAllTimeIds } from '@/api/hooks'
-import { InfiniteChannelWithVideosGrid, InfiniteVideoGrid, VideoGallery, ViewWrapper } from '@/components'
+import {
+  InfiniteChannelWithVideosGrid,
+  InfiniteVideoGrid,
+  VideoGallery,
+  ViewErrorFallback,
+  ViewWrapper,
+} from '@/components'
 import { absoluteRoutes } from '@/config/routes'
 import { CallToActionButton, CallToActionWrapper, Text } from '@/shared/components'
 import { SvgNavChannels, SvgNavHome, SvgNavNew } from '@/shared/icons'
 import { sizes } from '@/shared/theme'
+import { SentryLogger } from '@/utils/logs'
 
 export const PopularView: FC = () => {
   const {
     mostViewedVideosAllTime,
     loading: mostViewedVideosLoading,
-    error: mostViewedVideosError,
-  } = useMostViewedVideosAllTimeIds({
-    limit: 200,
-  })
+    error: mostViewedVideosIdsError,
+  } = useMostViewedVideosAllTimeIds(
+    {
+      limit: 200,
+    },
+    { onError: (error) => SentryLogger.error('Failed to fetch most viewed videos IDs', 'PopularView', error) }
+  )
   const mostViewedVideosIds = mostViewedVideosAllTime?.map((item) => item.id)
-  const { mostViewedChannelsAllTime } = useMostViewedChannelsAllTimeIds({ limit: 15 })
+  const { mostViewedChannelsAllTime, error: mostViewedChannelsError } = useMostViewedChannelsAllTimeIds(
+    { limit: 15 },
+    { onError: (error) => SentryLogger.error('Failed to fetch most viewed channels IDs', 'PopularView', error) }
+  )
   const mostViewedChannelsAllTimeIds = mostViewedChannelsAllTime?.map((item) => item.id)
-  const { videos, loading } = useMostViewedVideos({ timePeriodDays: 30, limit: 10 })
+  const { videos, loading, error: mostViewedVideosError } = useMostViewedVideos(
+    { timePeriodDays: 30, limit: 10 },
+    { onError: (error) => SentryLogger.error('Failed to fetch videos', 'PopularView', error) }
+  )
 
-  if (mostViewedVideosError) {
-    throw mostViewedVideosError
+  if (mostViewedVideosIdsError || mostViewedVideosError || mostViewedChannelsError) {
+    return <ViewErrorFallback />
   }
+
   return (
     <StyledViewWrapper>
       <Header variant="h2">Popular on Joystream</Header>