Detect and Show Errors

Learn how to detect invalid states within the workflow and display helpful feedback.

Getting Started

Navigate to the corresponding folder:

cd step-7-detect-show-errors

Install the dependencies:

npm install

Then run the project:

npm run dev

A workflow can indicate that it is in an invalid state, and we can control when this information is shown, displaying it with red borders and tooltips on the nodes.

In our case, validation runs when a button is clicked to check whether the workflow is valid. The validation logic is implemented in the useWorkflow hook, as shown below.

// src/shared/kits/workflow/hooks/use-workflow.ts

// ...

function reducer(state: State, action: Action): State {
  switch (action.type) {
    // ...

    /**
     * Validates the current workflow and stores the failure if validation does not pass.
     */
    case "validate": {
      const failure = validate(state.current);
      if (failure) {
        return {
          workflows: state.workflows,
          pointer: state.pointer,
          current: {
            ...state.current,
            widget: null,
            active: null,
            failure,
          },
        };
      }
      return state;
    }
  }
}

// ...