Add error boundary to FollowersCollection. For #2811

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -1,9 +1,11 @@
 import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row, Skeleton } from 'antd';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
 import styles from './FollowerCollection.module.scss';
 import { FollowButton } from '../../../action-buttons/FollowButton';
+import { ComponentError } from '../../ComponentError/ComponentError';
 
 export type FollowerCollectionProps = {
   name: string;
@@ -67,6 +69,16 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   }
 
   return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="FollowerCollection"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
       <div className={styles.followers} id="followers-collection">
         <Row wrap gutter={[10, 10]} className={styles.followerRow}>
           {followers.map(follower => (
@@ -89,5 +101,6 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
           hideOnSinglePage
         />
       </div>
+    </ErrorBoundary>
   );
 };