> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Filling SDK Error Handling Example

> Show SukiFormFillingError codes and reasons in React and JavaScript UIs using useFormFilling, onError, and form-filling:error events

This example shows how to surface Form filling SDK errors in your app. The SDK reports problems through `SukiFormFillingError`, and `start()` does not throw, so your UI needs an explicit error handler.

In React, read errors from `useFormFilling()`. In JavaScript, use `onError` on the client or listen for `form-filling:error`. Branch on `err.code` and `err.reason` in your handler. Use `err.message` for display only.

## React

`FormFillingProvider` exposes the latest error through `useFormFilling()`:

```jsx React  theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
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>;
}
```

## JavaScript

Pass `onError` when you create the client:

```javascript JavaScript expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
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;
  }
}
```

## Blank UI with no error

If the container stays empty and no error fires, check container height first. The iframe needs explicit height on `rootElement` in JavaScript or on the `FormFilling` wrapper in React.

```html HTML theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
<div id="suki-form-container" style="width: 100%; height: 600px;"></div>
```

Also confirm CSP `frame-src` allows `https://sdk.suki-stage.com` (staging) or `https://sdk.suki.ai` (production), and that `partnerId` and `partnerToken` are valid. Refer to [Error handling](/form-filling-sdk/guides/error-handling) and [Prerequisites](/form-filling-sdk/prerequisites) for full troubleshooting.

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to [Error handling](/form-filling-sdk/guides/error-handling) for all error codes and outcomes

<Icon icon="file-lines" iconType="solid" /> Refer to [Configuration](/form-filling-sdk/guides/configuration) for container sizing

<Icon icon="file-lines" iconType="solid" /> Refer to [Events](/form-filling-sdk/api-reference/events) for `form-filling:error`