feat: Add error boundary for diagram rendering by kumaradityaraj · Pull Request #124 · serverlessworkflow/editor

kumaradityaraj · 2026-04-27T07:43:03Z

Add Error Boundary to Diagram Editor

Introduced a React Error Boundary around the DiagramEditor to handle unexpected runtime/rendering errors (e.g. React or React Flow crashes).

What this does

Catches unforeseen UI errors during rendering
Prevents the editor from crashing or showing a blank screen
Displays a fallback UI using the shared ErrorPage component
Tests has also been added

Result

Improves overall stability and resilience of the editor by safely handling unexpected failures.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Adds a React error boundary around the diagram editor to prevent full UI crashes during unexpected rendering/runtime failures, displaying a fallback ErrorPage instead.

Changes:

Introduces DiagramEditorErrorBoundary component that catches render errors and renders ErrorPage as fallback.
Wraps DiagramEditor rendering tree with the new error boundary.
Adds unit tests for the error boundary behavior.
Updates pnpm-lock.yaml (dependency resolution changes, including jsdom/syncpack/ajv/postcss, etc.).

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.

File	Description
pnpm-lock.yaml	Updates resolved dependency versions / lockfile graph.
packages/serverless-workflow-diagram-editor/src/diagram-editor/error-pages/DiagramEditorErrorBoundary.tsx	New error boundary component rendering `ErrorPage` on crashes.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Wraps editor providers/content with the new error boundary.
packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/DiagramEditorErrorBoundary.test.tsx	Adds unit tests validating fallback and reset behavior.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

kumaradityaraj · 2026-04-27T08:14:15Z

@lornakelly @fantonangeli @handreyrc please review this PR. Thank you.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

fantonangeli

@kumaradityaraj LGTM, but I needed to create a story to test this component.
Opened a PR with this: kumaradityaraj#4

…add-story LGTM

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

lornakelly · 2026-04-29T11:13:38Z

    <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" : ""}`}


I dont think this change is intended?

@lornakelly is there some formatting auto-configured? I undo the changes here manually still the double inverted got pushed 🤔

lornakelly · 2026-04-29T11:16:13Z

Thanks for PR @kumaradityara just added a few comments

kumaradityaraj · 2026-04-30T07:58:01Z

@fantonangeli @lornakelly it's ready for final review

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

fantonangeli · 2026-04-30T14:41:46Z

@kumaradityaraj please also see my comment: #124 (comment)

kumaradityaraj added 2 commits April 27, 2026 13:07

Error boundary

1db5249

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

add liscense

4b0948d

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 27, 2026 07:43

Copilot started reviewing on behalf of kumaradityaraj April 27, 2026 07:43 View session

Copilot AI reviewed Apr 27, 2026

View reviewed changes

copilot suggestion

1940fb6

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

kumaradityaraj requested review from fantonangeli, handreyrc and lornakelly April 27, 2026 10:39

Resolving merge conflict

dcdf352

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 28, 2026 07:30

Copilot started reviewing on behalf of kumaradityaraj April 28, 2026 07:31 View session

Copilot AI reviewed Apr 28, 2026

View reviewed changes

kumaradityaraj and others added 2 commits April 28, 2026 13:06

Removing comment

1914a94

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Add DiagramEditorErrorBoundary.stories.tsx

5336f9e

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

fantonangeli suggested changes Apr 28, 2026

View reviewed changes

Merge pull request #4 from fantonangeli/kumaradityaraj-errorBoundary-…

868c3a9

…add-story LGTM

Copilot AI review requested due to automatic review settings April 29, 2026 06:41

Copilot started reviewing on behalf of kumaradityaraj April 29, 2026 06:42 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx Outdated

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

fantonangeli suggested changes Apr 29, 2026

View reviewed changes

Comment thread ...workflow-diagram-editor/tests/diagram-editor/error-pages/DiagramEditorErrorBoundary.test.tsx Outdated

kumaradityaraj added 2 commits April 29, 2026 12:23

removing redundant test case

3a2206c

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

dummy push

19d2eb7

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 29, 2026 07:28

Copilot started reviewing on behalf of kumaradityaraj April 29, 2026 07:29 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx Outdated

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

lornakelly reviewed Apr 29, 2026

View reviewed changes

kumaradityaraj requested review from fantonangeli and lornakelly April 30, 2026 07:58

lornakelly reviewed Apr 30, 2026

View reviewed changes

Comment thread pnpm-lock.yaml

Comment thread .github/ISSUE_TEMPLATE/bug_report.yml

resolving format bugs

50d4b0e

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 30, 2026 09:30

kumaradityaraj force-pushed the errorBoundary branch from ac2aaff to 50d4b0e Compare April 30, 2026 09:30

Copilot started reviewing on behalf of kumaradityaraj April 30, 2026 09:31 View session

Copilot AI reviewed Apr 30, 2026

View reviewed changes

Conversation

kumaradityaraj commented Apr 27, 2026

Add Error Boundary to Diagram Editor

What this does

Result

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kumaradityaraj commented Apr 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

kumaradityaraj Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lornakelly commented Apr 29, 2026

Uh oh!

kumaradityaraj commented Apr 30, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

fantonangeli commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants