Form Filling SDK Error Handling Example

import { SukiFormFillingError } from "@suki-sdk/form-filling";
import { useFormFilling } from "@suki-sdk/form-filling-react";

function FormFillingErrorBanner() {
  const { error, isSessionActive } = useFormFilling();
  // Hide a stale error once a session is active again after retry.
  if (!error || isSessionActive) return null;

  if (error instanceof SukiFormFillingError) {
    switch (error.code) {
      case "SUKI_FF_001":
        return (
          <p role="alert">
            Invalid template IDs ({error.reason}). Contact Suki support to confirm enabled templates.
          </p>
        );
      case "SUKI_FF_002":
        return <p role="alert">Connection timed out. Check network and CSP, then retry.</p>;
      case "SUKI_FF_003":
        return <p role="alert">Could not load form templates. Retry in a moment.</p>;
      case "SUKI_FF_004":
        return <p role="alert">{error.message || "An error occurred in the form UI. Please retry."}</p>;
      default:
        return <p role="alert">Unknown error: {error.message}</p>;
    }
  }

  return <p role="alert">Something went wrong.</p>;
}

import { FormFillingClient, SukiFormFillingError } from "@suki-sdk/form-filling";

const client = new FormFillingClient({
  authManager,
  onError: (err) => showErrorBanner(mapErrorToMessage(err)),
});

function mapErrorToMessage(err) {
  if (!(err instanceof SukiFormFillingError)) return "Something went wrong.";

  switch (err.code) {
    case "SUKI_FF_001":
      return err.reason === "empty-template-ids"
        ? "Pass at least one template ID."
        : "Invalid template IDs. Contact Suki support.";
    case "SUKI_FF_002":
      return "Connection timed out. Check network and CSP.";
    case "SUKI_FF_003":
      return "Could not load form templates.";
    case "SUKI_FF_004":
      return err.message || "An error occurred in the form UI.";
    default:
      return err.message;
  }
}

<div id="suki-form-container" style="width: 100%; height: 600px;"></div>