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:

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

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

GraphProvider error handling

Graph error handling

​GraphProvider error handling

​Graph error handling

GraphProvider error handling

Graph error handling