NickAkhmetov/CAT-751 Prevent full-page errors from malformed provenan…

…ce data (#3560)

CHANGELOG-cat-751.md

@@ -0,0 +1 @@
+- Prevent malformed provenance graph data from crashing the entire page.

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>;
+}

context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx

@@ -83,6 +83,7 @@ function ProvSection() {
       <SectionDescription>
         <Description />
       </SectionDescription>
+
       <ProvTabs provData={provData} />
     </CollapsibleDetailPageSection>
   );

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>