feat: Add error boundary for diagram rendering

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -23,6 +23,7 @@ import { useDiagramEditorContext } from "../store/DiagramEditorContext";
 import { ParsingErrorPage } from "./error-pages/ParsingErrorPage";
 import { ColorMode, ResolvedColorMode } from "../types/colorMode";
 import { useResolvedColorMode } from "../hooks/useResolvedColorMode";
+import { DiagramEditorErrorBoundary } from "./error-pages/DiagramEditorErrorBoundary";
 
 /**
  * DiagramEditor component API
@@ -57,7 +58,10 @@ const DiagramEditorContent = ({
 };
 
 export const DiagramEditor = (props: DiagramEditorProps) => {
-  // TODO: ErrorBoundary / fallback
+  const errorBoundaryProps = {
+    title: "workflowError.title",
+    message: "workflowError.default",
+  };
 
   // Refs
   const diagramDivRef = React.useRef<HTMLDivElement | null>(null);
@@ -85,19 +89,21 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
       className={`dec-root${resolvedColorMode === "dark" ? " dark" : ""}`}
       data-testid={"dec-root"}
     >
-      <DiagramEditorContextProvider
-        content={props.content}
-        isReadOnly={props.isReadOnly}
-        locale={locale}
-      >
-        <I18nProvider locale={locale} dictionaries={dictionaries}>
-          <DiagramEditorContent
-            diagramRef={diagramRef}
-            diagramDivRef={diagramDivRef}
-            colorMode={resolvedColorMode}
-          />
-        </I18nProvider>
-      </DiagramEditorContextProvider>
+      <DiagramEditorErrorBoundary {...errorBoundaryProps} resetKey={props.content}>
+        <DiagramEditorContextProvider
+          content={props.content}
+          isReadOnly={props.isReadOnly}
+          locale={locale}
+        >
+          <I18nProvider locale={locale} dictionaries={dictionaries}>
+            <DiagramEditorContent
+              diagramRef={diagramRef}
+              diagramDivRef={diagramDivRef}
+              colorMode={resolvedColorMode}
+            />
+          </I18nProvider>
+        </DiagramEditorContextProvider>
+      </DiagramEditorErrorBoundary>
     </div>
   );
 };

packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/DiagramEditorErrorBoundary.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { ErrorPage } from "./ErrorPage";
+
+type State = {
+  hasError: boolean;
+  error?: unknown;
+};
+
+type DiagramEditorErrorBoundaryProps = {
+  children: React.ReactNode;
+  title?: string;
+  message?: string;
+  resetKey?: string;
+};
+
+export class DiagramEditorErrorBoundary extends React.Component<
+  DiagramEditorErrorBoundaryProps,
+  State
+> {
+  constructor(props: DiagramEditorErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: unknown): State {
+    return { hasError: true, error };
+  }
+
+  componentDidUpdate(prevProps: DiagramEditorErrorBoundaryProps) {
+    if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({ hasError: false, error: undefined });
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ErrorPage
+          title={this.props.title ?? "Something went wrong"}
+          message={this.props.message ?? "An unexpected error occurred"}
+          snippet={this.state.error instanceof Error ? this.state.error.message : undefined}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx

@@ -50,8 +50,8 @@ interface PlaceholderProps {
 function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
   return (
     <div
-      className={`dec:rounded dec:border dec:border-gray-300 dec:dark:border-gray-600 dec:bg-white dec:dark:bg-gray-800  dec:text-gray-900 dec:dark:text-gray-100${selected ?' dec:ring-2 dec:ring-blue-400' : ""}`}
-       data-testid={`${type}-node-${id}`}
+      className={`dec:rounded dec:border dec:border-gray-300 dec:dark:border-gray-600 dec:bg-white dec:dark:bg-gray-800  dec:text-gray-900 dec:dark:text-gray-100${selected ? " dec:ring-2 dec:ring-blue-400" : ""}`}
+      data-testid={`${type}-node-${id}`}
     >
       <RF.Handle type="target" position={RF.Position.Top} />
       <div className="dec:whitespace-pre dec:p-[7px]" data-testid={`${type}-label-${id}`}>

packages/serverless-workflow-diagram-editor/stories/DiagramEditorErrorBoundary.stories.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DiagramEditorErrorBoundary } from "../src/diagram-editor/error-pages/DiagramEditorErrorBoundary";
+import { ColorMode } from "../src/types/colorMode";
+
+type DiagramEditorErrorBoundaryProps = {
+  title?: string;
+  message?: string;
+  resetKey?: string;
+};
+
+type DiagramEditorErrorBoundaryStoryProps = DiagramEditorErrorBoundaryProps & {
+  colorMode?: ColorMode;
+};
+
+const ThrowError = ({ message = "Test error message" }: { message?: string }) => {
+  throw new Error(message);
+};
+
+const meta = {
+  title: "Example/DiagramEditorErrorBoundary",
+  component: DiagramEditorErrorBoundary,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {},
+} satisfies Meta<DiagramEditorErrorBoundaryStoryProps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithDefaults: Story = {
+  args: {
+    children: <ThrowError />,
+  },
+};
+
+export const WithErrorCustomMessage: Story = {
+  args: {
+    title: "Custom Error Title",
+    message: "This is a custom error message",
+    children: <ThrowError message="Custom error details in snippet" />,
+  },
+};

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx

@@ -46,24 +46,21 @@ describe("Story - DiagramEditor component", () => {
     { colorMode: "dark" as const, expectedDark: true },
     { colorMode: "system" as const, expectedDark: false },
     { colorMode: undefined, expectedDark: false },
-  ])(
-    "applies correct class when colorMode is set to $colorMode",
-    ({ colorMode, expectedDark }) => {
-      render(
-        <Component
-          content={BASIC_VALID_WORKFLOW_YAML}
-          locale={locale}
-          isReadOnly={isReadOnly}
-          colorMode={colorMode}
-        />,
-      );
+  ])("applies correct class when colorMode is set to $colorMode", ({ colorMode, expectedDark }) => {
+    render(
+      <Component
+        content={BASIC_VALID_WORKFLOW_YAML}
+        locale={locale}
+        isReadOnly={isReadOnly}
+        colorMode={colorMode}
+      />,
+    );
 
-      const decRoot = screen.getByTestId("dec-root");
-      if (expectedDark) {
-        expect(decRoot).toHaveClass("dark");
-      } else {
-        expect(decRoot).not.toHaveClass("dark");
-      }
-    },
-  );
+    const decRoot = screen.getByTestId("dec-root");
+    if (expectedDark) {
+      expect(decRoot).toHaveClass("dark");
+    } else {
+      expect(decRoot).not.toHaveClass("dark");
+    }
+  });
 });

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

@@ -42,24 +42,21 @@ describe("DiagramEditor Component", () => {
     { colorMode: "dark" as const, expectedDark: true },
     { colorMode: "system" as const, expectedDark: false },
     { colorMode: undefined, expectedDark: false },
-  ])(
-    "applies correct class when colorMode is set to $colorMode",
-    ({ colorMode, expectedDark }) => {
-      render(
-        <DiagramEditor
-          content={BASIC_VALID_WORKFLOW_YAML}
-          locale={locale}
-          isReadOnly={isReadOnly}
-          colorMode={colorMode}
-        />,
-      );
+  ])("applies correct class when colorMode is set to $colorMode", ({ colorMode, expectedDark }) => {
+    render(
+      <DiagramEditor
+        content={BASIC_VALID_WORKFLOW_YAML}
+        locale={locale}
+        isReadOnly={isReadOnly}
+        colorMode={colorMode}
+      />,
+    );
 
-      const decRoot = screen.getByTestId("dec-root");
-      if (expectedDark) {
-        expect(decRoot).toHaveClass("dark");
-      } else {
-        expect(decRoot).not.toHaveClass("dark");
-      }
-    },
-  );
+    const decRoot = screen.getByTestId("dec-root");
+    if (expectedDark) {
+      expect(decRoot).toHaveClass("dark");
+    } else {
+      expect(decRoot).not.toHaveClass("dark");
+    }
+  });
 });

packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/DiagramEditorErrorBoundary.test.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { DiagramEditorErrorBoundary } from "../../../src/diagram-editor/error-pages/DiagramEditorErrorBoundary";
+import { describe, expect, it } from "vitest";
+
+const ThrowError = ({ message = "Test error" }: { message?: string }) => {
+  throw new Error(message);
+};
+
+const SafeComponent = () => <div>Safe Content</div>;
+
+describe("DiagramEditorErrorBoundary", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders children when no error occurs", () => {
+    render(
+      <DiagramEditorErrorBoundary>
+        <SafeComponent />
+      </DiagramEditorErrorBoundary>,
+    );
+
+    expect(screen.getByText("Safe Content")).toBeInTheDocument();
+  });
+
+  it("renders fallback UI when child throws", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <DiagramEditorErrorBoundary title="Error Title" message="Error Message">
+        <ThrowError />
+      </DiagramEditorErrorBoundary>,
+    );
+
+    expect(screen.getByText("Error Title")).toBeInTheDocument();
+    expect(screen.getByText("Error Message")).toBeInTheDocument();
+    expect(screen.getByText("Test error")).toBeInTheDocument();
+
+    spy.mockRestore();
+  });
+
+  it("uses default fallback values when props not provided", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    render(
+      <DiagramEditorErrorBoundary>
+        <ThrowError />
+      </DiagramEditorErrorBoundary>,
+    );
+
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+
+    expect(screen.getByText("An unexpected error occurred")).toBeInTheDocument();
+
+    spy.mockRestore();
+  });
+
+  it("resets error boundary when resetKey changes", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const { rerender } = render(
+      <DiagramEditorErrorBoundary resetKey="key-1">
+        <ThrowError />
+      </DiagramEditorErrorBoundary>,
+    );
+
+    expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+
+    rerender(
+      <DiagramEditorErrorBoundary resetKey="key-2">
+        <SafeComponent />
+      </DiagramEditorErrorBoundary>,
+    );
+
+    expect(screen.getByText("Safe Content")).toBeInTheDocument();
+
+    spy.mockRestore();
+  });
+});