Skip to main content
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: 
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: 
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. 
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>