Merge pull request #10781 from DestinyItemManager/error-boundaries

Add error boundaries to more places

src/app/App.tsx

@@ -57,13 +57,64 @@ export default function App() {
         <ErrorBoundary name="DIM Code">
           <Suspense fallback={<ShowPageLoading message={t('Loading.Code')} />}>
             <Routes>
-              <Route path="about" element={<About />} />
-              <Route path="privacy" element={<Privacy />} />
-              <Route path="whats-new" element={<WhatsNew />} />
-              <Route path="login" element={<Login />} />
-              <Route path="settings" element={<SettingsPage />} />
-              <Route path="debug" element={<Debug />} />
-              {$DIM_FLAVOR === 'dev' && <Route path="developer" element={<Developer />} />}
+              <Route
+                path="about"
+                element={
+                  <ErrorBoundary name="about" key="about">
+                    <About />
+                  </ErrorBoundary>
+                }
+              />
+              <Route
+                path="privacy"
+                element={
+                  <ErrorBoundary name="privacy" key="privacy">
+                    <Privacy />
+                  </ErrorBoundary>
+                }
+              />
+              <Route
+                path="whats-new"
+                element={
+                  <ErrorBoundary name="whatsNew" key="whatsNew">
+                    <WhatsNew />
+                  </ErrorBoundary>
+                }
+              />
+              <Route
+                path="login"
+                element={
+                  <ErrorBoundary name="login" key="login">
+                    <Login />
+                  </ErrorBoundary>
+                }
+              />
+              <Route
+                path="settings"
+                element={
+                  <ErrorBoundary name="settings" key="settings">
+                    <SettingsPage />
+                  </ErrorBoundary>
+                }
+              />
+              <Route
+                path="debug"
+                element={
+                  <ErrorBoundary name="debug" key="debug">
+                    <Debug />
+                  </ErrorBoundary>
+                }
+              />
+              {$DIM_FLAVOR === 'dev' && (
+                <Route
+                  path="developer"
+                  element={
+                    <ErrorBoundary name="developer" key="developer">
+                      <Developer />
+                    </ErrorBoundary>
+                  }
+                />
+              )}
               {needsLogin ? (
                 <Route
                   path="*"
@@ -77,7 +128,14 @@ export default function App() {
                 />
               ) : (
                 <>
-                  <Route path="search-history" element={<SearchHistory />} />
+                  <Route
+                    path="search-history"
+                    element={
+                      <ErrorBoundary name="searchHistory" key="searchHistory">
+                        <SearchHistory />
+                      </ErrorBoundary>
+                    }
+                  />
                   <Route path="armory/*" element={<DefaultAccount />} />
                   <Route path=":membershipId/:destinyVersion/*" element={<Destiny />} />
                   <Route path="*" element={<DefaultAccount />} />

src/app/bungie-api/bungie-service-helper.ts

@@ -51,10 +51,8 @@ const logThrottle = (timesThrottled: number, waitTime: number, url: string) =>
 export const authenticatedHttpClient = dimErrorHandledHttpClient(
   responsivelyThrottleHttpClient(
     createHttpClient(
-      createFetchWithNonStoppingTimeout(
-        rateLimitedFetch(fetchWithBungieOAuth),
-        TIMEOUT,
-        notifyTimeout,
+      rateLimitedFetch(
+        createFetchWithNonStoppingTimeout(fetchWithBungieOAuth, TIMEOUT, notifyTimeout),
       ),
       API_KEY,
     ),

src/app/dim-ui/CollapsibleTitle.tsx

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import { toggleCollapsedSection } from '../settings/actions';
 import { AppIcon, collapseIcon } from '../shell/icons';
 import styles from './CollapsibleTitle.m.scss';
+import ErrorBoundary from './ErrorBoundary';
 
 export const Title = forwardRef(function Title(
   {
@@ -114,7 +115,9 @@ export default function CollapsibleTitle({
         onClick={toggle}
       />
       <CollapsedSection collapsed={collapsed} headerId={headerId} contentId={contentId}>
-        {children}
+        <ErrorBoundary name={`collapse-${sectionId}`} key={contentId}>
+          {children}
+        </ErrorBoundary>
       </CollapsedSection>
     </>
   );

src/app/dim-ui/ErrorBoundary.tsx

@@ -26,6 +26,12 @@ export default class ErrorBoundary extends Component<Props, State> {
     reportException(name, error, errorInfo);
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (prevProps.name !== this.props.name) {
+      this.setState({ error: undefined });
+    }
+  }
+
   render() {
     const { error } = this.state;
     const { children } = this.props;

src/app/dim-ui/PageWithMenu.tsx

@@ -1,6 +1,7 @@
 import useResizeObserver from '@react-hook/resize-observer';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
+import ErrorBoundary from './ErrorBoundary';
 import styles from './PageWithMenu.m.scss';
 
 function PageWithMenu({ children, className }: { children: React.ReactNode; className?: string }) {
@@ -50,7 +51,11 @@ PageWithMenu.Contents = function Contents({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <div className={clsx(className, styles.contents)}>{children}</div>;
+  return (
+    <div className={clsx(className, styles.contents)}>
+      <ErrorBoundary name="pageWithMenu-contents">{children}</ErrorBoundary>
+    </div>
+  );
 };
 
 /** A header for a section of links (MenuButtons) within a Menu. */

src/app/dim-ui/Sheet.tsx

@@ -22,6 +22,7 @@ import React, {
   useState,
 } from 'react';
 import { AppIcon, disabledIcon } from '../shell/icons';
+import ErrorBoundary from './ErrorBoundary';
 import { PressTipRoot } from './PressTip';
 import styles from './Sheet.m.scss';
 import { useFixOverscrollBehavior } from './useFixOverscrollBehavior';
@@ -299,7 +300,9 @@ export default function Sheet({
           style={frozenHeight ? { flexBasis: frozenHeight } : undefined}
           ref={sheetContents}
         >
-          {typeof children === 'function' ? children({ onClose: triggerClose }) : children}
+          <ErrorBoundary name="sheet-contents">
+            {typeof children === 'function' ? children({ onClose: triggerClose }) : children}
+          </ErrorBoundary>
         </div>
 
         {Boolean(footer) && (

src/app/inventory-page/Inventory.tsx

@@ -1,5 +1,4 @@
 import { DestinyAccount } from 'app/accounts/destiny-account';
-import ErrorBoundary from 'app/dim-ui/ErrorBoundary';
 import ShowPageLoading from 'app/dim-ui/ShowPageLoading';
 import GearPower from 'app/gear-power/GearPower';
 import { t } from 'app/i18next-t';
@@ -18,11 +17,11 @@ export default function Inventory({ account }: { account: DestinyAccount }) {
   }
 
   return (
-    <ErrorBoundary name="Inventory">
+    <>
       <Stores />
       <DragPerformanceFix />
       {account.destinyVersion === 2 && <GearPower />}
       {account.destinyVersion === 2 && <MaterialCountsSheet />}
-    </ErrorBoundary>
+    </>
   );
 }

src/app/organizer/Organizer.tsx

@@ -1,5 +1,4 @@
 import { DestinyAccount } from 'app/accounts/destiny-account';
-import ErrorBoundary from 'app/dim-ui/ErrorBoundary';
 import ShowPageLoading from 'app/dim-ui/ShowPageLoading';
 import { t } from 'app/i18next-t';
 import { useLoadStores } from 'app/inventory/store/hooks';
@@ -121,10 +120,8 @@ export default function Organizer({ account }: Props) {
 
   return (
     <div className={styles.organizer}>
-      <ErrorBoundary name="Organizer">
-        <ItemTypeSelector selection={selection} selectionTree={types} onSelection={onSelection} />
-        <ItemTable categories={selection} />
-      </ErrorBoundary>
+      <ItemTypeSelector selection={selection} selectionTree={types} onSelection={onSelection} />
+      <ItemTable categories={selection} />
     </div>
   );
 }