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

# Error Handling

> Pass custom `onError` callback to handle application level errors gracefully

`C1Component` accepts an `onError` callback to handle errors that occur during rendering.

## Basic Usage

```tsx theme={null}
import { C1Component } from "@thesysai/genui-sdk";

<C1Component
  c1Response={c1Response}
  onError={({ code, c1Response }) => {
    console.error(`C1 Error: ${code}`, c1Response);
  }}
/>
```

## Error Object

The `onError` callback receives an object with:

| Property     | Type     | Description                               |
| ------------ | -------- | ----------------------------------------- |
| `code`       | `number` | Error code indicating the type of error   |
| `c1Response` | `string` | The response content at the time of error |

## Example: Display Error State

```tsx theme={null}
import { C1Component } from "@thesysai/genui-sdk";
import { useState } from "react";

function App() {
  const [error, setError] = useState<{ code: number; message: string } | null>(null);

  if (error) {
    return (
      <div className="error-state">
        Something went wrong (Error {error.code}). Please try again.
      </div>
    );
  }

  return (
    <C1Component
      c1Response={c1Response}
      onError={({ code, c1Response }) => {
        console.error(`C1 Error: ${code}`, c1Response);
        setError({ code, message: c1Response });
      }}
    />
  );
}
```