Create an error state to catch untracked errors from Svelte to React

packages/visualizations-react/src/components/ReactImpl.tsx

@@ -27,6 +27,16 @@ export function wrap<Data, Options, ComponentClass extends BaseComponent<Data, O
         });
         const [lastTag, setLastTag] = useState(tag);
 
+        // Throw errors coming from Svelte that cannot be caught by react error boundary
+        // FIXME: a better solution would be to implement a global error boundary in svelte when it will be available
+        const [onError, setOnError] = useState<string | null>(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<Data, Options, ComponentClass extends BaseComponent<Data, O
         useEffect(() => {
             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();

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());
+                }
             },
         };
     }

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 {