diff --git a/packages/visualizations-react/src/components/ReactImpl.tsx b/packages/visualizations-react/src/components/ReactImpl.tsx index f46eb96d..f49bc65f 100644 --- a/packages/visualizations-react/src/components/ReactImpl.tsx +++ b/packages/visualizations-react/src/components/ReactImpl.tsx @@ -27,6 +27,16 @@ export function wrap(null); + + useEffect(() => { + if (onError) { + throw onError; + } + }, [onError]); + // Update data (put before creating the component to skip the initial render) useEffect(() => { componentRef.current?.updateData(data); @@ -49,11 +59,10 @@ export function wrap { const container = containerRef.current; if (container) { - const component = new ComponentConstructor( - container, - initialState.data, - initialState.options - ); + const component = new ComponentConstructor(container, initialState.data, { + ...initialState.options, + setOnError, + }); componentRef.current = component; return () => { component.destroy(); diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte index da834aa7..11e88404 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -16,18 +16,37 @@ let dataFrame: DataFrame = []; let series: ChartSeries[] = []; let { labelColumn } = options; + const { setOnError } = options; + + // Function to handle chart creation errors + function tryCreateChart(ctx: CanvasRenderingContext2D, config: ChartConfiguration) { + try { + return new Chart(ctx, config); + } catch (err: any) { + setOnError?.(err.toString()); + return undefined; + } + } // Hook to handle chart lifecycle function chartJs(node: HTMLCanvasElement, config: ChartConfiguration) { const ctx = node.getContext('2d'); if (!ctx) throw new Error('Failed to get canvas context'); - const chart = new Chart(ctx, config); + const chart: Chart | undefined = tryCreateChart(ctx, config); return { update() { - chart.update(); + try { + chart?.update(); + } catch (err: any) { + setOnError?.(err.toString()); + } }, destroy() { - chart.destroy(); + try { + chart?.destroy(); + } catch (err: any) { + setOnError?.(err.toString()); + } }, }; } diff --git a/packages/visualizations/src/components/types.ts b/packages/visualizations/src/components/types.ts index b1373fce..d4938e21 100644 --- a/packages/visualizations/src/components/types.ts +++ b/packages/visualizations/src/components/types.ts @@ -23,6 +23,8 @@ export interface ChartOptions { ariaLabel: string; /** Link button to source */ source?: Source; + /** Error setter to send error from svelte to another framework */ + setOnError?: (error: string) => string; } export interface Source {