> ## 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

> Learn how to surface SukiFormFillingError codes in your UI using the Form filling SDK

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`