introducing error boundaries to not crash on errors

gimlet-io · Oct 1, 2024 · 5b389ae · 5b389ae
1 parent 998be33
commit 5b389ae
Show file tree

Hide file tree

Showing 12 changed files with 1,958 additions and 6,538 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -13,6 +13,7 @@
     "jsonpath": "^1.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "redux": "^5.0.1",
     "tailwindcss": "^3.4.13",
     "web-vitals": "^4.2.3"

diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -8,6 +8,8 @@ import FilterBar from "./FilterBar";
 import Services from "./Services";
 import ToastNotifications from "./ToastNotifications";
 import { useState, useEffect, useCallback } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -52,12 +54,14 @@ function App() {
         />
       </div>
       <div className="grid grid-cols-1 gap-y-4 pb-32">
+        <ErrorBoundary fallbackRender={fallbackRender}>
         <Services
           capacitorClient={capacitorClient}
           store={store}
           filters={filters}
           handleNavigationSelect={handleNavigationSelect}
         />
+        </ErrorBoundary>
       </div>
     </div>
     <Footer

diff --git a/web/src/ExpandedFooter.jsx b/web/src/ExpandedFooter.jsx
@@ -5,6 +5,8 @@ import { TerraformResources } from "./TerraformResources";
 import FluxEvents from "./FluxEvents";
 import { Sources } from "./Sources";
 import { CompactServices } from "./CompactServices";
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function ExpandedFooter(props) {
   const {
@@ -55,49 +57,61 @@ export function ExpandedFooter(props) {
         <div className="w-full max-w-7xl mx-auto flex-col h-full">
           <div className="pb-24 pt-2">
             {selected === "Kustomizations" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <Kustomizations
                 capacitorClient={client}
                 fluxState={fluxState}
                 targetReference={targetReference}
                 handleNavigationSelect={handleNavigationSelect}
               />
+              </ErrorBoundary>
             )}
             {selected === "Helm Releases" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <HelmReleases
                 capacitorClient={client}
                 helmReleases={fluxState.helmReleases}
                 targetReference={targetReference}
                 handleNavigationSelect={handleNavigationSelect}
               />
+              </ErrorBoundary>
             )}
             {selected === "Terraform" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <TerraformResources
                 capacitorClient={client}
                 tfResources={fluxState.tfResources}
                 targetReference={targetReference}
                 handleNavigationSelect={handleNavigationSelect}
               />
+              </ErrorBoundary>
             )}
             {selected === "Sources" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <Sources
                 capacitorClient={client}
                 fluxState={fluxState}
                 targetReference={targetReference}
                 handleNavigationSelect={handleNavigationSelect}
               />
+              </ErrorBoundary>
             )}
             {selected === "Flux Runtime" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <CompactServices
                 capacitorClient={client}
                 store={store}
                 services={fluxState.fluxServices}
               />
+              </ErrorBoundary>
             )}
             {selected === "Flux Events" && (
+              <ErrorBoundary fallbackRender={fallbackRender}>
               <FluxEvents
                 events={fluxEvents}
                 handleNavigationSelect={handleNavigationSelect}
               />
+              </ErrorBoundary>
             )}
           </div>
         </div>

diff --git a/web/src/FallbackRender.jsx b/web/src/FallbackRender.jsx
@@ -0,0 +1,8 @@
+export function fallbackRender({ error, resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: "red" }}>{error.message}</pre>
+    </div>
+  );
+}
diff --git a/web/src/HelmRelease.jsx b/web/src/HelmRelease.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ReadyWidget } from './ReadyWidget'
 import { HelmRevisionWidget } from './HelmRevisionWidget';
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function HelmRelease(props) {
   const { capacitorClient, item, targetReference, handleNavigationSelect } = props;
@@ -33,7 +35,9 @@ export function HelmRelease(props) {
         <span className="block"><ReadyWidget resource={item} displayMessage={true} label="Reconciled" /></span>
       </div>
       <div className="col-span-5">
+        <ErrorBoundary fallbackRender={fallbackRender}>
         <div className="font-medium text-neutral-700"><HelmRevisionWidget helmRelease={item} withHistory={true} handleNavigationSelect={handleNavigationSelect} /></div>
+        </ErrorBoundary>
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"

diff --git a/web/src/Kustomization.jsx b/web/src/Kustomization.jsx
@@ -3,6 +3,8 @@ import { ReadyWidget } from './ReadyWidget'
 import jp from 'jsonpath'
 import { NavigationButton } from './NavigationButton'
 import { findSource } from './utils';
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function Kustomization(props) {
   const { capacitorClient, item, fluxState, targetReference, handleNavigationSelect } = props;
@@ -46,12 +48,14 @@ export function Kustomization(props) {
       </div>
       <div className="col-span-5">
         <div className="font-medium text-neutral-700 field">
+          <ErrorBoundary fallbackRender={fallbackRender}>
           <RevisionWidget
             kustomization={item}
             source={source}
             handleNavigationSelect={handleNavigationSelect}
             inFooter={true}
           />
+          </ErrorBoundary>
         </div>
         { source.kind !== 'OCIRepository' &&
         <span className='font-mono rounded text-neutral-600 bg-gray-100 px-1'>{item.spec.path}</span>

diff --git a/web/src/Service.jsx b/web/src/Service.jsx
@@ -7,6 +7,8 @@ import { Logs } from './Logs'
 import { Describe } from './Describe'
 import { SkeletonLoader } from './SkeletonLoader'
 import { Modal } from './Modal'
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 const documentIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
@@ -202,7 +204,9 @@ function Service(props) {
                   <p className="text-base text-neutral-600">Sync</p>
                   <div className="flex text-sm text-neutral-600">
                     <div className="ml-4"><ReadyWidget resource={kustomization} label="Applied" /></div>
+                    <ErrorBoundary fallbackRender={fallbackRender}>
                     <div className="ml-2 field flex-1"><RevisionWidget kustomization={kustomization} source={source} handleNavigationSelect={handleNavigationSelect} /></div>
+                    </ErrorBoundary>
                   </div>
                 </div>
                 }

diff --git a/web/src/Source.jsx b/web/src/Source.jsx
@@ -4,6 +4,8 @@ import { ArtifactWidget } from './ArtifactWidget';
 import { OCIArtifactWidget } from './OCIArtifactWidget';
 import { HelmChartWidget } from './HelmChartWidget';
 import { HelmRepositoryWidget } from './HelmRepositoryWidget';
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function Source(props) {
   const { capacitorClient, source, targetReference, handleNavigationSelect } = props;
@@ -39,6 +41,7 @@ export function Source(props) {
         <ReadyWidget resource={source} displayMessage={true} />
       </div>
       <div className="col-span-5">
+        <ErrorBoundary fallbackRender={fallbackRender}>
         {source.kind === 'GitRepository' &&
           <ArtifactWidget gitRepository={source} displayMessage={true} />
         }
@@ -54,6 +57,7 @@ export function Source(props) {
         {source.kind === 'HelmChart' &&
           <HelmChartWidget source={source} displayMessage={true} handleNavigationSelect={handleNavigationSelect} />
         }
+        </ErrorBoundary>
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">
         <button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"

diff --git a/web/src/TerraformResource.jsx b/web/src/TerraformResource.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import { ReadyWidget } from "./ReadyWidget";
 import { TerraformResourceWidget } from "./TerraformResourceWidget";
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function TerraformResource(props) {
   const { capacitorClient, item, targetReference, handleNavigationSelect } =
@@ -24,6 +26,7 @@ export function TerraformResource(props) {
       className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`hr-${item.metadata.namespace}/${item.metadata.name}`}
     >
+      <ErrorBoundary fallbackRender={fallbackRender}>
       <div className="col-span-2">
         <span className="block font-medium text-black">
           {item.metadata.name}
@@ -32,6 +35,7 @@ export function TerraformResource(props) {
           {item.metadata.namespace}
         </span>
       </div>
+      </ErrorBoundary>
       <div className="col-span-4">
         <span className="block">
           <ReadyWidget
@@ -43,11 +47,13 @@ export function TerraformResource(props) {
       </div>
       <div className="col-span-5">
         <div className="font-medium text-neutral-700">
+          <ErrorBoundary fallbackRender={fallbackRender}>
           <TerraformResourceWidget
             tfRelease={item}
             withHistory={true}
             handleNavigationSelect={handleNavigationSelect}
           />
+          </ErrorBoundary>
         </div>
       </div>
       <div className="grid grid-cols-1 text-right space-y-1">

diff --git a/web/src/TerraformResourceWidget.jsx b/web/src/TerraformResourceWidget.jsx
@@ -38,7 +38,6 @@ export function TerraformResourceWidget(props) {
   const reconciling =
     reconcilingCondition && reconcilingConditions[0].status === "True";
 
-  console.log("TF", tfRelease);
   const sourceRef = tfRelease.spec.sourceRef;
   const namespace = sourceRef.namespace
     ? sourceRef.namespace

diff --git a/web/src/TerraformResources.jsx b/web/src/TerraformResources.jsx
@@ -2,6 +2,8 @@ import React, { useMemo, useState } from "react";
 import { TerraformResource } from "./TerraformResource";
 import { filterResources } from "./utils";
 import FilterBar from "./FilterBar";
+import { ErrorBoundary } from "react-error-boundary";
+import { fallbackRender } from "./FallbackRender"
 
 export function TerraformResources(props) {
   const {
@@ -30,6 +32,7 @@ export function TerraformResources(props) {
         filters={filters}
         change={setFilters}
       />
+      <ErrorBoundary fallbackRender={fallbackRender}>
       {filteredHelmReleases?.map((resource) => (
         <TerraformResource
           key={"hr-" + resource.metadata.namespace + resource.metadata.name}
@@ -39,6 +42,7 @@ export function TerraformResources(props) {
           targetReference={targetReference}
         />
       ))}
+      </ErrorBoundary>
     </div>
   );
 }