Add error boundary to UserDropdown. For #2811

web/components/common/UserDropdown/UserDropdown.tsx

@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { FC, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import dynamic from 'next/dynamic';
+import { ErrorBoundary } from 'react-error-boundary';
 import {
   chatVisibleToggleAtom,
   currentUserAtom,
@@ -11,6 +12,7 @@ import {
 } from '../../stores/ClientConfigStore';
 import styles from './UserDropdown.module.scss';
 import { AppStateOptions } from '../../stores/application-state';
+import { ComponentError } from '../../ui/ComponentError/ComponentError';
 
 // Lazy loaded components
 
@@ -109,6 +111,16 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
   );
 
   return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="UserDropdown"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
       <div id="user-menu" className={`${styles.root}`}>
         <Dropdown overlay={menu} trigger={['click']}>
           <Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
@@ -123,9 +135,14 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
         >
           <NameChangeModal />
         </Modal>
-      <Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}>
+        <Modal
+          title="Authenticate"
+          open={showAuthModal}
+          handleCancel={() => setShowAuthModal(false)}
+        >
           <AuthModal />
         </Modal>
       </div>
+    </ErrorBoundary>
   );
 };