feat: add Error Boundary to Visualization (#680)

Author: Cahllagerfeld

package.json

@@ -40,6 +40,7 @@
 		"prismjs": "^1.29.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-error-boundary": "^4.0.13",
 		"react-hook-form": "^7.51.5",
 		"react-joyride": "^2.8.2",
 		"react-markdown": "^9.0.1",

pnpm-lock.yaml

@@ -38,13 +38,13 @@ export function ConfigurationTab() {
 			)}
 			<CodeCollapsible runId={runId} />
 			<EnvironmentCollapsible run={data} />
-			<NestedCollapsible isInitialOpen title="Extra" data={data.metadata?.config.extra} />
 			<NestedCollapsible
 				isInitialOpen
 				title="Resources"
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				data={(data.metadata?.config.settings as { [key: string]: any })?.resources || {}}
 			/>
+			<NestedCollapsible isInitialOpen title="Extra" data={data.metadata?.config.extra} />
 		</div>
 	);
 }

src/app/runs/[id]/_Tabs/Configuration/index.tsx

@@ -1,7 +1,7 @@
 import Expand from "@/assets/icons/expand.svg?react";
 import { useServerInfo } from "@/data/server/info-query";
 import { checkIsLocalServer } from "@/lib/server";
-import { Button } from "@zenml-io/react-component-library";
+import { Button, ScrollArea } from "@zenml-io/react-component-library";
 import { Dispatch, SetStateAction, useState } from "react";
 import { DAG } from "./Dag";
 import { RunsDetailHeader } from "./Header";
@@ -28,13 +28,13 @@ export default function RunDetailPage() {
 				<div
 					aria-hidden={!isPanelOpen}
 					className={`h-full min-w-0 overflow-x-hidden text-ellipsis whitespace-nowrap bg-theme-surface-secondary transition-all duration-500 ${
-						isPanelOpen
-							? "w-1/2 border-l border-theme-border-moderate"
-							: "w-0 overflow-x-hidden border-transparent"
+						isPanelOpen ? "w-1/2 border-l border-theme-border-moderate" : "w-0 border-transparent"
 					}`}
 				>
-					<TabsHeader setIsPanelOpen={setIsPanelOpen} />
-					<RunsDetailTabs />
+					<ScrollArea viewportClassName="[&>*]:!block">
+						<TabsHeader setIsPanelOpen={setIsPanelOpen} />
+						<RunsDetailTabs />
+					</ScrollArea>
 				</div>
 			</div>
 		</div>

src/app/runs/[id]/page.tsx

@@ -13,10 +13,11 @@ import {
 	TabsList,
 	TabsTrigger
 } from "@zenml-io/react-component-library";
+import { ErrorBoundary } from "react-error-boundary";
 import { ArtifactIcon } from "../../ArtifactIcon";
 import { ArtifactDetailTab } from "./DetailsTab";
 import { ArtifactMetadataTab } from "./MetadataTab";
-import { VisualizationTab } from "./VisualizationTab";
+import { VisualizationErrorFallback, VisualizationTab } from "./VisualizationTab";
 
 type Props = {
 	artifactVersionId: string;
@@ -85,7 +86,9 @@ export function ArtifactSheetContent({ artifactVersionId }: Props) {
 							<ArtifactMetadataTab artifactVersionId={artifactVersionId} />
 						</TabsContent>
 						<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="visualization">
-							<VisualizationTab artifactVersionId={artifactVersionId} />
+							<ErrorBoundary FallbackComponent={VisualizationErrorFallback}>
+								<VisualizationTab artifactVersionId={artifactVersionId} />
+							</ErrorBoundary>
 						</TabsContent>
 					</Tabs>
 				</VisualizationConfirmProvider>

src/components/artifacts/artifact-node-sheet/SheetContent.tsx

@@ -1,12 +1,13 @@
 // import { Visualization } from "@/components/tenants-dashboard/artifacts/Visualization";
-import { Button, Skeleton } from "@zenml-io/react-component-library";
-import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
+import { default as Barchart, default as BarChart } from "@/assets/icons/bar-chart.svg?react";
 import { EmptyState } from "@/components/EmptyState";
-import BarChart from "@/assets/icons/bar-chart.svg?react";
-import { Visualization } from "../Visualization";
+import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
+import { FIVEMEGABYTES } from "@/lib/constants";
 import { MetadataMap } from "@/types/common";
+import { Button, Skeleton } from "@zenml-io/react-component-library";
 import { useState } from "react";
-import { FIVEMEGABYTES } from "@/lib/constants";
+import { FallbackProps } from "react-error-boundary";
+import { Visualization } from "../Visualization";
 
 type Props = {
 	artifactVersionId: string;
@@ -65,3 +66,14 @@ export function VisualizationTab({ artifactVersionId }: Props) {
 		</div>
 	);
 }
+
+export function VisualizationErrorFallback({ error }: FallbackProps) {
+	return (
+		<EmptyState icon={<Barchart className="h-[120px] w-[120px] fill-neutral-300" />}>
+			<div className="text-center">
+				<p className="mb-2 text-display-xs font-semibold">Something went wrong</p>
+				<p className="text-lg text-theme-text-secondary">{error.message}</p>
+			</div>
+		</EmptyState>
+	);
+}