feat: add feed error screen

packages/shared/src/components/Feed.tsx

@@ -54,6 +54,10 @@ import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout';
 import { SearchResultsLayout } from './search/SearchResults/SearchResultsLayout';
 import { acquisitionKey } from './cards/AcquisitionForm/common/common';
 
+const FeedErrorScreen = dynamic(
+  () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'),
+);
+
 export interface FeedProps<T>
   extends Pick<
       UseFeedOptionalParams<T>,
@@ -168,6 +172,7 @@ export default function Feed<T>({
     emptyFeed,
     isFetching,
     isInitialLoading,
+    isError,
   } = useFeed(
     feedQueryKey,
     pageSize ?? currentSettings.pageSize,
@@ -405,6 +410,10 @@ export default function Feed<T>({
 
   const PostModal = PostModalMap[selectedPost?.type];
 
+  if (isError) {
+    return <FeedErrorScreen />;
+  }
+
   if (emptyScreen && emptyFeed && !isSearchPageLaptop) {
     return <>{emptyScreen}</>;
   }

packages/shared/src/components/FeedErrorScreen.tsx

@@ -0,0 +1,61 @@
+import React, { ReactElement } from 'react';
+import { PageContainer } from './utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from './typography/Typography';
+import { Button, ButtonVariant } from './buttons/Button';
+import { useThemedAsset } from '../hooks/utils';
+import { TerminalIcon, TwitterIcon } from './icons';
+import { statusPage, twitter } from '../lib/constants';
+import { anchorDefaultRel } from '../lib/strings';
+
+function FeedErrorScreen(): ReactElement {
+  const { gardrError } = useThemedAsset();
+
+  return (
+    <PageContainer className="mx-auto !ml-0 !min-h-[calc(100vh-228px)] items-center justify-center tablet:!min-h-[calc(100vh-104px)]">
+      <div className="flex max-h-full w-full flex-col items-center justify-center gap-4 self-center text-center laptop:w-[21.25rem] laptop:max-w-[21.25rem]">
+        <img src={gardrError} alt="Production is down (FML)" />
+        <Typography type={TypographyType.LargeTitle} bold>
+          Production is down
+          <br />
+          (FML)
+        </Typography>
+        <Typography
+          type={TypographyType.Body}
+          bold
+          color={TypographyColor.Tertiary}
+        >
+          Our team&apos;s on it! Try refreshing the page and cross your fingers,
+          or send our engineers some good vibes on X (Twitter).
+        </Typography>
+        <Button
+          variant={ButtonVariant.Subtle}
+          className="w-full"
+          icon={<TerminalIcon />}
+          href={statusPage}
+          target="_blank"
+          rel={anchorDefaultRel}
+          tag="a"
+        >
+          Check system status
+        </Button>
+        <Button
+          variant={ButtonVariant.Subtle}
+          className="w-full"
+          icon={<TwitterIcon />}
+          href={twitter}
+          target="_blank"
+          rel={anchorDefaultRel}
+          tag="a"
+        >
+          Cheer our engineers
+        </Button>
+      </div>
+    </PageContainer>
+  );
+}
+
+export default FeedErrorScreen;

packages/shared/src/hooks/useFeed.ts

@@ -5,6 +5,7 @@ import {
   UseInfiniteQueryOptions,
   useQueryClient,
 } from '@tanstack/react-query';
+import { ClientError } from 'graphql-request';
 import {
   Ad,
   FeedData,
@@ -22,7 +23,7 @@ import {
 } from '../lib/query';
 import { MarketingCta } from '../components/marketingCta/common';
 import { FeedItemType } from '../components/cards/common';
-import { gqlClient } from '../graphql/common';
+import { GARMR_ERROR, gqlClient } from '../graphql/common';
 
 interface FeedItemBase<T extends FeedItemType> {
   type: T;
@@ -62,6 +63,7 @@ export type FeedReturnType = {
   isLoading: boolean;
   isFetching: boolean;
   isInitialLoading: boolean;
+  isError: boolean;
 };
 
 const findIndexOfPostInData = (
@@ -146,6 +148,8 @@ export default function useFeed<T>(
     },
   );
 
+  const clientError = feedQuery?.error as ClientError;
+
   const isAdsQueryEnabled =
     query &&
     tokenRefreshed &&
@@ -273,6 +277,8 @@ export default function useFeed<T>(
     canFetchMore: feedQuery.hasNextPage,
     emptyFeed:
       !feedQuery?.data?.pages[0]?.page.edges.length && !feedQuery.isFetching,
+    isError:
+      clientError?.response?.errors?.[0]?.extensions?.code === GARMR_ERROR,
     isLoading: feedQuery.isLoading,
     isFetching: feedQuery.isFetching,
     isInitialLoading: feedQuery.isInitialLoading,

packages/shared/src/hooks/utils/useThemedAsset.ts

@@ -10,6 +10,7 @@ interface UseAsset {
   themeColor: string;
   githubShortcut: string;
   slackIntegrationHeader: string;
+  gardrError: string;
 }
 
 export const useIsLightTheme = (): boolean => {
@@ -45,5 +46,8 @@ export const useThemedAsset = (): UseAsset => {
     slackIntegrationHeader: isLight
       ? cloudinary.integrations.slack.header.light
       : cloudinary.integrations.slack.header.dark,
+    gardrError: isLight
+      ? cloudinary.generic.error.light
+      : cloudinary.generic.error.dark,
   };
 };

packages/shared/src/lib/constants.ts

@@ -39,6 +39,7 @@ export const squadsPublicGuide = 'https://r.daily.dev/public-squads-guide';
 export const searchFeedback = 'https://r.daily.dev/search-feedback';
 export const searchDocs = 'https://r.daily.dev/search-docs';
 export const slackIntegration = 'https://r.daily.dev/slack';
+export const statusPage = 'https://r.daily.dev/status';
 export const isDevelopment = process.env.NODE_ENV === 'development';
 export const isProduction = process.env.NODE_ENV === 'production';
 export const isTesting =

packages/shared/src/lib/image.ts

@@ -161,6 +161,11 @@ export const cloudinary = {
         'https://daily-now-res.cloudinary.com/image/upload/s--t81_4qLS--/f_auto/v1708330060/404-lightmode_eweviu',
       dark: 'https://daily-now-res.cloudinary.com/image/upload/s--Rxdm7vdJ--/f_auto/v1708328512/404_z4xiwg',
     },
+    error: {
+      light:
+        'https://daily-now-res.cloudinary.com/image/upload/v1725365692/lightversion_dmnj1s.gif',
+      dark: 'https://daily-now-res.cloudinary.com/image/upload/v1725365692/darkversion_bfrze7.gif',
+    },
   },
   streak: {
     splash: