Skip to content

Commit 5b389ae

Browse files
laszlocphlaszlocph
committed
introducing error boundaries to not crash on errors
1 parent 998be33 commit 5b389ae

12 files changed

+1958
-6538
lines changed

‎web/package-lock.json

+1,905-6,537
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"jsonpath": "^1.1.1",
1414
"react": "^18.3.1",
1515
"react-dom": "^18.3.1",
16+
"react-error-boundary": "^4.0.13",
1617
"redux": "^5.0.1",
1718
"tailwindcss": "^3.4.13",
1819
"web-vitals": "^4.2.3"

‎web/src/App.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import FilterBar from "./FilterBar";
88
import Services from "./Services";
99
import ToastNotifications from "./ToastNotifications";
1010
import { useState, useEffect, useCallback } from "react";
11+
import { ErrorBoundary } from "react-error-boundary";
12+
import { fallbackRender } from "./FallbackRender"
1113

1214
function App() {
1315
const capacitorClient = new CapacitorClient(
@@ -52,12 +54,14 @@ function App() {
5254
/>
5355
</div>
5456
<div className="grid grid-cols-1 gap-y-4 pb-32">
57+
<ErrorBoundary fallbackRender={fallbackRender}>
5558
<Services
5659
capacitorClient={capacitorClient}
5760
store={store}
5861
filters={filters}
5962
handleNavigationSelect={handleNavigationSelect}
6063
/>
64+
</ErrorBoundary>
6165
</div>
6266
</div>
6367
<Footer

‎web/src/ExpandedFooter.jsx

+14
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { TerraformResources } from "./TerraformResources";
55
import FluxEvents from "./FluxEvents";
66
import { Sources } from "./Sources";
77
import { CompactServices } from "./CompactServices";
8+
import { ErrorBoundary } from "react-error-boundary";
9+
import { fallbackRender } from "./FallbackRender"
810

911
export function ExpandedFooter(props) {
1012
const {
@@ -55,49 +57,61 @@ export function ExpandedFooter(props) {
5557
<div className="w-full max-w-7xl mx-auto flex-col h-full">
5658
<div className="pb-24 pt-2">
5759
{selected === "Kustomizations" && (
60+
<ErrorBoundary fallbackRender={fallbackRender}>
5861
<Kustomizations
5962
capacitorClient={client}
6063
fluxState={fluxState}
6164
targetReference={targetReference}
6265
handleNavigationSelect={handleNavigationSelect}
6366
/>
67+
</ErrorBoundary>
6468
)}
6569
{selected === "Helm Releases" && (
70+
<ErrorBoundary fallbackRender={fallbackRender}>
6671
<HelmReleases
6772
capacitorClient={client}
6873
helmReleases={fluxState.helmReleases}
6974
targetReference={targetReference}
7075
handleNavigationSelect={handleNavigationSelect}
7176
/>
77+
</ErrorBoundary>
7278
)}
7379
{selected === "Terraform" && (
80+
<ErrorBoundary fallbackRender={fallbackRender}>
7481
<TerraformResources
7582
capacitorClient={client}
7683
tfResources={fluxState.tfResources}
7784
targetReference={targetReference}
7885
handleNavigationSelect={handleNavigationSelect}
7986
/>
87+
</ErrorBoundary>
8088
)}
8189
{selected === "Sources" && (
90+
<ErrorBoundary fallbackRender={fallbackRender}>
8291
<Sources
8392
capacitorClient={client}
8493
fluxState={fluxState}
8594
targetReference={targetReference}
8695
handleNavigationSelect={handleNavigationSelect}
8796
/>
97+
</ErrorBoundary>
8898
)}
8999
{selected === "Flux Runtime" && (
100+
<ErrorBoundary fallbackRender={fallbackRender}>
90101
<CompactServices
91102
capacitorClient={client}
92103
store={store}
93104
services={fluxState.fluxServices}
94105
/>
106+
</ErrorBoundary>
95107
)}
96108
{selected === "Flux Events" && (
109+
<ErrorBoundary fallbackRender={fallbackRender}>
97110
<FluxEvents
98111
events={fluxEvents}
99112
handleNavigationSelect={handleNavigationSelect}
100113
/>
114+
</ErrorBoundary>
101115
)}
102116
</div>
103117
</div>

‎web/src/FallbackRender.jsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function fallbackRender({ error, resetErrorBoundary }) {
2+
return (
3+
<div role="alert">
4+
<p>Something went wrong:</p>
5+
<pre style={{ color: "red" }}>{error.message}</pre>
6+
</div>
7+
);
8+
}

‎web/src/HelmRelease.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState, useRef, useEffect } from 'react';
22
import { ReadyWidget } from './ReadyWidget'
33
import { HelmRevisionWidget } from './HelmRevisionWidget';
4+
import { ErrorBoundary } from "react-error-boundary";
5+
import { fallbackRender } from "./FallbackRender"
46

57
export function HelmRelease(props) {
68
const { capacitorClient, item, targetReference, handleNavigationSelect } = props;
@@ -33,7 +35,9 @@ export function HelmRelease(props) {
3335
<span className="block"><ReadyWidget resource={item} displayMessage={true} label="Reconciled" /></span>
3436
</div>
3537
<div className="col-span-5">
38+
<ErrorBoundary fallbackRender={fallbackRender}>
3639
<div className="font-medium text-neutral-700"><HelmRevisionWidget helmRelease={item} withHistory={true} handleNavigationSelect={handleNavigationSelect} /></div>
40+
</ErrorBoundary>
3741
</div>
3842
<div className="grid grid-cols-1 text-right space-y-1">
3943
<button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"

‎web/src/Kustomization.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { ReadyWidget } from './ReadyWidget'
33
import jp from 'jsonpath'
44
import { NavigationButton } from './NavigationButton'
55
import { findSource } from './utils';
6+
import { ErrorBoundary } from "react-error-boundary";
7+
import { fallbackRender } from "./FallbackRender"
68

79
export function Kustomization(props) {
810
const { capacitorClient, item, fluxState, targetReference, handleNavigationSelect } = props;
@@ -46,12 +48,14 @@ export function Kustomization(props) {
4648
</div>
4749
<div className="col-span-5">
4850
<div className="font-medium text-neutral-700 field">
51+
<ErrorBoundary fallbackRender={fallbackRender}>
4952
<RevisionWidget
5053
kustomization={item}
5154
source={source}
5255
handleNavigationSelect={handleNavigationSelect}
5356
inFooter={true}
5457
/>
58+
</ErrorBoundary>
5559
</div>
5660
{ source.kind !== 'OCIRepository' &&
5761
<span className='font-mono rounded text-neutral-600 bg-gray-100 px-1'>{item.spec.path}</span>

‎web/src/Service.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Logs } from './Logs'
77
import { Describe } from './Describe'
88
import { SkeletonLoader } from './SkeletonLoader'
99
import { Modal } from './Modal'
10+
import { ErrorBoundary } from "react-error-boundary";
11+
import { fallbackRender } from "./FallbackRender"
1012

1113
const documentIcon = (
1214
<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) {
202204
<p className="text-base text-neutral-600">Sync</p>
203205
<div className="flex text-sm text-neutral-600">
204206
<div className="ml-4"><ReadyWidget resource={kustomization} label="Applied" /></div>
207+
<ErrorBoundary fallbackRender={fallbackRender}>
205208
<div className="ml-2 field flex-1"><RevisionWidget kustomization={kustomization} source={source} handleNavigationSelect={handleNavigationSelect} /></div>
209+
</ErrorBoundary>
206210
</div>
207211
</div>
208212
}

‎web/src/Source.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { ArtifactWidget } from './ArtifactWidget';
44
import { OCIArtifactWidget } from './OCIArtifactWidget';
55
import { HelmChartWidget } from './HelmChartWidget';
66
import { HelmRepositoryWidget } from './HelmRepositoryWidget';
7+
import { ErrorBoundary } from "react-error-boundary";
8+
import { fallbackRender } from "./FallbackRender"
79

810
export function Source(props) {
911
const { capacitorClient, source, targetReference, handleNavigationSelect } = props;
@@ -39,6 +41,7 @@ export function Source(props) {
3941
<ReadyWidget resource={source} displayMessage={true} />
4042
</div>
4143
<div className="col-span-5">
44+
<ErrorBoundary fallbackRender={fallbackRender}>
4245
{source.kind === 'GitRepository' &&
4346
<ArtifactWidget gitRepository={source} displayMessage={true} />
4447
}
@@ -54,6 +57,7 @@ export function Source(props) {
5457
{source.kind === 'HelmChart' &&
5558
<HelmChartWidget source={source} displayMessage={true} handleNavigationSelect={handleNavigationSelect} />
5659
}
60+
</ErrorBoundary>
5761
</div>
5862
<div className="grid grid-cols-1 text-right space-y-1">
5963
<button className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-2 border border-neutral-300 rounded"

‎web/src/TerraformResource.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState, useRef, useEffect } from "react";
22
import { ReadyWidget } from "./ReadyWidget";
33
import { TerraformResourceWidget } from "./TerraformResourceWidget";
4+
import { ErrorBoundary } from "react-error-boundary";
5+
import { fallbackRender } from "./FallbackRender"
46

57
export function TerraformResource(props) {
68
const { capacitorClient, item, targetReference, handleNavigationSelect } =
@@ -24,6 +26,7 @@ export function TerraformResource(props) {
2426
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`}
2527
key={`hr-${item.metadata.namespace}/${item.metadata.name}`}
2628
>
29+
<ErrorBoundary fallbackRender={fallbackRender}>
2730
<div className="col-span-2">
2831
<span className="block font-medium text-black">
2932
{item.metadata.name}
@@ -32,6 +35,7 @@ export function TerraformResource(props) {
3235
{item.metadata.namespace}
3336
</span>
3437
</div>
38+
</ErrorBoundary>
3539
<div className="col-span-4">
3640
<span className="block">
3741
<ReadyWidget
@@ -43,11 +47,13 @@ export function TerraformResource(props) {
4347
</div>
4448
<div className="col-span-5">
4549
<div className="font-medium text-neutral-700">
50+
<ErrorBoundary fallbackRender={fallbackRender}>
4651
<TerraformResourceWidget
4752
tfRelease={item}
4853
withHistory={true}
4954
handleNavigationSelect={handleNavigationSelect}
5055
/>
56+
</ErrorBoundary>
5157
</div>
5258
</div>
5359
<div className="grid grid-cols-1 text-right space-y-1">

‎web/src/TerraformResourceWidget.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export function TerraformResourceWidget(props) {
3838
const reconciling =
3939
reconcilingCondition && reconcilingConditions[0].status === "True";
4040

41-
console.log("TF", tfRelease);
4241
const sourceRef = tfRelease.spec.sourceRef;
4342
const namespace = sourceRef.namespace
4443
? sourceRef.namespace

‎web/src/TerraformResources.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useMemo, useState } from "react";
22
import { TerraformResource } from "./TerraformResource";
33
import { filterResources } from "./utils";
44
import FilterBar from "./FilterBar";
5+
import { ErrorBoundary } from "react-error-boundary";
6+
import { fallbackRender } from "./FallbackRender"
57

68
export function TerraformResources(props) {
79
const {
@@ -30,6 +32,7 @@ export function TerraformResources(props) {
3032
filters={filters}
3133
change={setFilters}
3234
/>
35+
<ErrorBoundary fallbackRender={fallbackRender}>
3336
{filteredHelmReleases?.map((resource) => (
3437
<TerraformResource
3538
key={"hr-" + resource.metadata.namespace + resource.metadata.name}
@@ -39,6 +42,7 @@ export function TerraformResources(props) {
3942
targetReference={targetReference}
4043
/>
4144
))}
45+
</ErrorBoundary>
4246
</div>
4347
);
4448
}

0 commit comments

Comments
 (0)