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

# Error handling

Both `GraphProvider` and `Graph` support error handling to gracefully manage failures.

## GraphProvider error handling

Use the `onError` prop to track errors in data processing, configuration, or provider setup:

```tsx theme={null}
import { GraphProvider, Graph } from '@graphysdk/core';

<GraphProvider
  config={config}
  onChange={setConfig}
  onError={({ error, errorInfo }) => {
    // Log to your error tracking service
    console.error('Error:', error);
  }}
>
  <Graph />
</GraphProvider>;
```

By default, `GraphProvider` re-throws errors (allowing your app's error boundary to handle them). Provide a `fallbackComponent` to show custom UI instead:

```tsx theme={null}
import type { GraphProviderErrorFallbackProps } from '@graphysdk/core';

function ErrorFallback({ error }: GraphProviderErrorFallbackProps) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
    </div>
  );
}

<GraphProvider
  config={config}
  onChange={setConfig}
  onError={({ error }) => logError(error)}
  fallbackComponent={ErrorFallback}
>
  <Graph />
</GraphProvider>;
```

## Graph error handling

`Graph` also accepts `onError` and `errorFallback` props for handling chart rendering errors.

Unlike `GraphProvider`, `Graph` always shows a fallback UI when rendering fails. If you don't provide a custom `errorFallback`, it displays a default "Unable to render chart" message.

```tsx theme={null}
import type { GraphErrorBoundaryFallbackProps } from '@graphysdk/core';

function ChartErrorFallback({ error }: GraphErrorBoundaryFallbackProps) {
  return (
    <div>
      <p>Chart failed to load</p>
      <p>{error.message}</p>
    </div>
  );
}

<GraphProvider config={config} onChange={setConfig}>
  <Graph onError={({ error }) => logError(error)} errorFallback={ChartErrorFallback} />
</GraphProvider>;
```