UI: Fixed exception in service view rendering

pkgs/ui/src/components/error_boundary.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+  constructor(props: any) {
+    super(props);
+
+    // Define a state variable to track whether is an error or not
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI
+
+    return { hasError: true };
+  }
+  componentDidCatch(error: any, errorInfo: any) {
+    // You can use your own error logging service here
+    console.log({ error, errorInfo });
+  }
+  render() {
+    // Check if the error is thrown
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div>
+          <h2>Oops, there is an error!</h2>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            Try again?
+          </button>
+        </div>
+      );
+    }
+
+    // Return children components in case of no error
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

pkgs/ui/src/components/table/index.tsx

@@ -10,6 +10,7 @@ import { NoDataOverlay } from "@/components/noDataOverlay";
 import { StyledTableCell, StyledTableRow } from "./style";
 import { ICustomTable, CustomTableConfiguration } from "@/types";
 import { Checkbox, Skeleton } from "@mui/material";
+import ErrorBoundary from "@/components/error_boundary";
 
 const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => {
   if (loading)
@@ -35,11 +36,15 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => {
 
     // cover use case if we want to render a component
     if (render) renderedValue = render(value);
-
+    if (typeof renderedValue === "object" && render === undefined) {
+      console.warn("Missing render function for column " + cellKey);
+    }
     return (
-      <StyledTableCell key={cellKey} align="left">
-        {renderedValue}
-      </StyledTableCell>
+      <ErrorBoundary>
+        <StyledTableCell key={cellKey} align="left">
+          {renderedValue}
+        </StyledTableCell>
+      </ErrorBoundary>
     );
   };