Custom Reports Error Catch (#2492)

* Error Catch

* notes

* fixes

packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx

 import React, { createRef, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import { send, sendCatch } from 'loot-core/platform/client/fetch/index';
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
-import { styles } from '../../../style';
+import { styles } from '../../../style/index';
 import { theme } from '../../../style/theme';
 import { Block } from '../../common/Block';
 import { Menu } from '../../common/Menu';
@@ -56,6 +57,19 @@ function index(data: CustomReportEntity[]): { [key: string]: boolean }[] {
   }, []);
 }
 
+function ErrorFallback() {
+  return (
+    <>
+      <div>
+        <br />
+      </div>
+      <Text style={{ ...styles.mediumText, color: theme.errorText }}>
+        There was a problem loading your report
+      </Text>
+    </>
+  );
+}
+
 export function CustomReportListCards({
   reports,
 }: {
@@ -193,18 +207,20 @@ export function CustomReportListCards({
                       </View>
 
                       {report.data ? (
-                        <ChooseGraph
-                          startDate={report.startDate}
-                          endDate={report.endDate}
-                          data={report.data}
-                          mode={report.mode}
-                          graphType={report.graphType}
-                          balanceType={report.balanceType}
-                          groupBy={report.groupBy}
-                          interval={report.interval}
-                          compact={true}
-                          style={{ height: 'auto', flex: 1 }}
-                        />
+                        <ErrorBoundary FallbackComponent={ErrorFallback}>
+                          <ChooseGraph
+                            startDate={report.startDate}
+                            endDate={report.endDate}
+                            data={report.data}
+                            mode={report.mode}
+                            graphType={report.graphType}
+                            balanceType={report.balanceType}
+                            groupBy={report.groupBy}
+                            interval={report.interval}
+                            compact={true}
+                            style={{ height: 'auto', flex: 1 }}
+                          />
+                        </ErrorBoundary>
                       ) : (
                         <LoadingIndicator />
                       )}

upcoming-release-notes/2492.md

+---
+category: Bugfix
+authors: [carkom]
+---
+
+Error catch for reports overview page.