fix: add an error boundary to catch errors

package.json

@@ -33,6 +33,7 @@
     "conventional-changelog-conventionalcommits": "4.6.3",
     "eslint": "8.11.0",
     "eslint-plugin-react": "7.29.4",
+    "react-error-boundary": "^3.1.4",
     "semantic-release": "19.0.2",
     "typescript": "4.6.2",
     "vite": "2.8.6",

src/Heatmap.tsx

@@ -5,6 +5,8 @@ import {
   endOfWeek,
   startOfWeek,
 } from "date-fns";
+import { ErrorBoundary, FallbackProps } from "react-error-boundary";
+
 import * as React from "react";
 import CalendarHeatmap from "react-calendar-heatmap";
 import ReactTooltip from "react-tooltip";
@@ -19,6 +21,14 @@ import {
   useCurrentJournalDate,
 } from "./utils";
 
+function ErrorFallback({ error }: FallbackProps) {
+  return (
+    <div role="alert" className="text-red-500 font-semibold">
+      <p>Heatmap failed to render. Can you re-index your graph and try again?</p>
+    </div>
+  );
+}
+
 const useActivities = (startDate: string, endDate: string) => {
   const isMounted = useMountedState();
   const currentJournalDate = useCurrentJournalDate();
@@ -259,10 +269,12 @@ export const Heatmap = React.forwardRef<HTMLDivElement>(({}, ref) => {
       className="heatmap-root"
       style={{ left: right - 300, top: bottom + 20 }}
     >
-      <DateRange range={range} onRangeChange={setRange} today={today} />
-      {range && (
-        <HeatmapChart today={today} endDate={range[1]} startDate={range[0]} />
-      )}
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <DateRange range={range} onRangeChange={setRange} today={today} />
+        {range && (
+          <HeatmapChart today={today} endDate={range[1]} startDate={range[0]} />
+        )}
+      </ErrorBoundary>
     </div>
   );
 });