From 60d5a49cf4508c538cd84e769604241c1249634a Mon Sep 17 00:00:00 2001
From: Nikolay Akhmetov <nick.akhmetov@gmail.com>
Date: Mon, 7 Oct 2024 16:52:34 -0400
Subject: [PATCH] NickAkhmetov/CAT-751 Prevent full-page errors from malformed
 provenance data (#3560)

---
 CHANGELOG-cat-751.md                          |  1 +
 .../ProvGraph/ProvGraphErrorBoundary.tsx      | 24 +++++++++++++++++++
 .../provenance/ProvSection/ProvSection.tsx    |  1 +
 .../provenance/ProvTabs/ProvTabs.tsx          |  5 +++-
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG-cat-751.md
 create mode 100644 context/app/static/js/components/detailPage/provenance/ProvGraph/ProvGraphErrorBoundary.tsx

diff --git a/CHANGELOG-cat-751.md b/CHANGELOG-cat-751.md
new file mode 100644
index 0000000000..35331d958e
--- /dev/null
+++ b/CHANGELOG-cat-751.md
@@ -0,0 +1 @@
+- Prevent malformed provenance graph data from crashing the entire page.
diff --git a/context/app/static/js/components/detailPage/provenance/ProvGraph/ProvGraphErrorBoundary.tsx b/context/app/static/js/components/detailPage/provenance/ProvGraph/ProvGraphErrorBoundary.tsx
new file mode 100644
index 0000000000..3739826c0a
--- /dev/null
+++ b/context/app/static/js/components/detailPage/provenance/ProvGraph/ProvGraphErrorBoundary.tsx
@@ -0,0 +1,24 @@
+import { FaroErrorBoundary } from '@grafana/faro-react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import DetailsAccordion from 'js/shared-styles/accordions/DetailsAccordion';
+import React from 'react';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+function ErrorFallback(error: Error) {
+  return (
+    <Stack p={4}>
+      <Typography variant="subtitle1">An error occurred while attempting to display the provenance graph.</Typography>
+      <DetailsAccordion summary="Click to expand error details">
+        <Typography variant="body2">{error?.message}</Typography>
+      </DetailsAccordion>
+    </Stack>
+  );
+}
+
+export default function ProvGraphErrorBoundary({ children }: ErrorBoundaryProps) {
+  return <FaroErrorBoundary fallback={ErrorFallback}>{children}</FaroErrorBoundary>;
+}
diff --git a/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx b/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
index b012b49124..b4c3589ab2 100644
--- a/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
+++ b/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
@@ -83,6 +83,7 @@ function ProvSection() {
       <SectionDescription>
         <Description />
       </SectionDescription>
+
       <ProvTabs provData={provData} />
     </CollapsibleDetailPageSection>
   );
diff --git a/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.tsx b/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.tsx
index 7e630f6189..6fa6550b41 100644
--- a/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.tsx
+++ b/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.tsx
@@ -9,6 +9,7 @@ import ProvTable from '../ProvTable';
 import { hasDataTypes } from './utils';
 import { filterTabsToDisplay } from './filterTabsToDisplay';
 import { ProvData } from '../types';
+import ProvGraphErrorBoundary from '../ProvGraph/ProvGraphErrorBoundary';
 
 const availableTabDetails = {
   multi: { label: 'Multi-Assay', 'data-testid': 'multi-prov-tab' },
@@ -67,7 +68,9 @@ function ProvTabs({ provData }: ProvTabsProps) {
       )}
       {filteredTabs?.graph && (
         <TabPanel value={open} index={filteredTabs.graph.index}>
-          <ProvGraph provData={provData} entity_type={entity_type} uuid={uuid} />
+          <ProvGraphErrorBoundary>
+            <ProvGraph provData={provData} entity_type={entity_type} uuid={uuid} />
+          </ProvGraphErrorBoundary>
         </TabPanel>
       )}
     </Paper>