feat: added error handling for xstate visualizer (#2601)

Co-authored-by: Alon Peretz <8467965+alonp99@users.noreply.github.com>

apps/workflows-dashboard/package.json

@@ -45,6 +45,7 @@
  "react": "^18.2.0",
  "react-custom-scrollbars": "^4.2.1",
  "react-dom": "^18.2.0",
+ "react-error-boundary": "^4.0.13",
  "react-hook-form": "^7.43.9",
  "react-json-view": "^1.21.3",
  "react-router-dom": "^6.11.2",

apps/workflows-dashboard/src/components/organisms/XstateVisualizer/XstateVisualizer.tsx

@@ -2,45 +2,53 @@ import { deserializeStateDefinition } from '@/components/organisms/XstateVisuali
 import { inspect } from '@xstate/inspect';
 import { useInterpret, useMachine } from '@xstate/react';
 import { memo, useLayoutEffect, useMemo, useRef } from 'react';
+import { withErrorBoundary } from 'react-error-boundary';
 import { createMachine } from 'xstate';
 
 interface Props {
  stateDefinition: Record<string, any>;
  state?: string;
 }
 
-export const XstateVisualizer = memo(({ stateDefinition, state }: Props) => {
- const _machine = useMemo(
- () =>
- createMachine(
- deserializeStateDefinition({
- ...stateDefinition,
- initial: state || stateDefinition.initial,
- }),
- ),
- [stateDefinition, state],
- );
- const [stateMachine] = useMachine(_machine);
+export const XstateVisualizer = memo(
+ withErrorBoundary(
+ ({ stateDefinition, state }: Props) => {
+ const _machine = useMemo(
+ () =>
+ createMachine(
+ deserializeStateDefinition({
+ ...stateDefinition,
+ initial: state || stateDefinition.initial,
+ }),
+ ),
+ [stateDefinition, state],
+ );
+ const [stateMachine] = useMachine(_machine);
 
- useInterpret(_machine, { devTools: true });
+  useInterpret(_machine, { devTools: true });
 
- const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
- useLayoutEffect(() => {
- if (!iframeRef.current) return;
+  useLayoutEffect(() => {
+  if (!iframeRef.current) return;
 
- inspect({ iframe: iframeRef.current });
- }, [iframeRef, state, stateMachine.value]);
+  inspect({ iframe: iframeRef.current });
+  }, [iframeRef, state, stateMachine.value]);
 
- return (
- <div className="h-full w-full">
- <iframe
- ref={iframeRef}
- data-xstate
- style={{ width: 'calc(100% + clamp(40rem, 40rem + 0px, 100%))' }}
- // width="100%"
- height="100%"
- />
- </div>
- );
-});
+ return (
+ <div className="h-full w-full">
+ <iframe
+ ref={iframeRef}
+ data-xstate
+ style={{ width: 'calc(100% + clamp(40rem, 40rem + 0px, 100%))' }}
+ // width="100%"
+ height="100%"
+ />
+ </div>
+ );
+ },
+ {
+ fallbackRender: ({ error }) => <span>{error.message}</span>,
+ },
+ ),
+);

apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx

@@ -5,6 +5,7 @@ import { DashboardLayout } from '@/components/layouts/DashboardLayout';
 import { XstateVisualizer } from '@/components/organisms/XstateVisualizer';
 import { IWorkflow } from '@/domains/workflows/api/workflow';
 import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
+import { WorkflowDefinitionEditor } from '@/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor';
 import { WorkflowDefinitionSummaryCard } from '@/pages/WorkflowDefinition/components/WorkflowDefinitionSummaryCard';
 import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
 import { useWorkflowDefinitionEdit } from '@/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit';
@@ -83,12 +84,7 @@ export const WorkflowDefinition = () => {
  </div>
  <div className="flex flex-row gap-2">
  <div className="w-1/2">
- <EditorCard
- title="Workflow Definition"
- value={workflowDefinitionValue || {}}
- onSave={workflowDefinitionValue ? handleWorkflowDefinitionSave : undefined}
- onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
- />
+ <WorkflowDefinitionEditor workflowDefinition={data} />
  </div>
  <div className="w-1/2">
  <EditorCard

apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor.tsx

@@ -0,0 +1,33 @@
+import { IWorkflowDefinition } from '@/domains/workflow-definitions';
+import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
+import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
+import { useWorkflowDefinitionEdit } from '@/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit';
+import { FunctionComponent } from 'react';
+
+interface WorkflowDefinitionEditorProps {
+ workflowDefinition: IWorkflowDefinition;
+}
+
+export const WorkflowDefinitionEditor: FunctionComponent<WorkflowDefinitionEditorProps> = ({
+ workflowDefinition,
+}) => {
+ const { workflowDefinitionValue, handleWorkflowDefinitionSave } =
+ useWorkflowDefinitionEdit(workflowDefinition);
+ const { mutate: upgradeWorkflowDefinitionVersion } =
+ useUpgradeWorkflowDefinitionVersionMutation();
+
+ return (
+ <EditorCard
+ title="Workflow Definition"
+ value={workflowDefinitionValue || {}}
+ onSave={
+ workflowDefinitionValue
+ ? definition => handleWorkflowDefinitionSave(definition as any)
+ : undefined
+ }
+ onUpgrade={() =>
+ upgradeWorkflowDefinitionVersion({ workflowDefinitionId: workflowDefinition.id })
+ }
+ />
+ );
+};

apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/index.ts

@@ -0,0 +1 @@
+export * from './WorkflowDefinitionEditor';

apps/workflows-dashboard/src/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit/useWorkflowDefinitionEdit.ts

@@ -6,21 +6,22 @@ export const useWorkflowDefinitionEdit = (workflowDefinition: IWorkflowDefinitio
  const [workflowDefinitionValue, setWorkflowDefinitionValue] = useState(
  workflowDefinition?.definition,
  );
+ const [validationError, setValidationError] = useState<string | null>(null);
  const { mutate, isLoading } = useWorkflowDefinitionUpdateMutation();
 
  useEffect(() => {
  setWorkflowDefinitionValue(workflowDefinition?.definition);
  }, [workflowDefinition]);
 
  const handleWorkflowDefinitionSave = useCallback(
- (value: object) => {
+ (definition: object) => {
  if (!workflowDefinition) return;
 
- setWorkflowDefinitionValue(value);
+ setWorkflowDefinitionValue(definition);
 
  mutate({
  workflowDefinitionId: workflowDefinition.id!,
- definition: value,
+ definition: definition,
  });
  },
  [workflowDefinition],