From 44a428331663aff171ebfb7ac47a8b5cfbc2d874 Mon Sep 17 00:00:00 2001 From: RafaelSzmarowski Date: Mon, 3 Jan 2022 14:37:46 +0100 Subject: [PATCH 1/5] Create an error state to catch untracked errors from Svelte to React --- .../src/components/ReactImpl.tsx | 15 ++++++++++- .../src/components/Chart/Chart.svelte | 26 ++++++++++++++++--- .../visualizations/src/components/types.ts | 2 ++ 3 files changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/visualizations-react/src/components/ReactImpl.tsx b/packages/visualizations-react/src/components/ReactImpl.tsx index f46eb96d5..d2472db41 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); @@ -52,7 +62,10 @@ export function wrap { diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte index da834aa7b..fa79ce21d 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -15,19 +15,37 @@ let dataFrame: DataFrame = []; let series: ChartSeries[] = []; - let { labelColumn } = options; + let { labelColumn, setOnError } = options; + + // Function to handle chart creation errors + function tryCreateChart(ctx: CanvasRenderingContext2D, config: ChartConfiguration) { + try { + return new Chart(ctx, config); + } catch(err) { + setOnError(JSON.stringify(err)); + } + } // 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) { + setOnError(JSON.stringify(err)); + } + }, destroy() { - chart.destroy(); + try { + chart?.destroy(); + } catch(err) { + setOnError(JSON.stringify(err)); + } }, }; } diff --git a/packages/visualizations/src/components/types.ts b/packages/visualizations/src/components/types.ts index b1373fce2..76c521338 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 react error boundary */ + setOnError: (error: string) => string; } export interface Source { From e70922c6f5492055a39fb6a3dba1d6f1db5cdcac Mon Sep 17 00:00:00 2001 From: RafaelSzmarowski Date: Mon, 3 Jan 2022 17:38:58 +0100 Subject: [PATCH 2/5] Make the error setter optional --- packages/visualizations/src/components/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/visualizations/src/components/types.ts b/packages/visualizations/src/components/types.ts index 76c521338..d4938e215 100644 --- a/packages/visualizations/src/components/types.ts +++ b/packages/visualizations/src/components/types.ts @@ -23,8 +23,8 @@ export interface ChartOptions { ariaLabel: string; /** Link button to source */ source?: Source; - /** Error setter to send error from svelte to react error boundary */ - setOnError: (error: string) => string; + /** Error setter to send error from svelte to another framework */ + setOnError?: (error: string) => string; } export interface Source { From f9d9007cb58da3ba7b1b87424c9863356f16b13d Mon Sep 17 00:00:00 2001 From: RafaelSzmarowski Date: Mon, 3 Jan 2022 17:40:02 +0100 Subject: [PATCH 3/5] Make the error setter optional part two --- .../visualizations/src/components/Chart/Chart.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte index fa79ce21d..1b90da353 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -15,14 +15,16 @@ let dataFrame: DataFrame = []; let series: ChartSeries[] = []; - let { labelColumn, setOnError } = options; + 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) { - setOnError(JSON.stringify(err)); + setOnError?.(JSON.stringify(err)); + return undefined; } } @@ -36,7 +38,7 @@ try { chart?.update(); } catch(err) { - setOnError(JSON.stringify(err)); + setOnError?.(JSON.stringify(err)); } }, @@ -44,7 +46,7 @@ try { chart?.destroy(); } catch(err) { - setOnError(JSON.stringify(err)); + setOnError?.(JSON.stringify(err)); } }, }; From 443b5cb16c0992a519bf554ae22989d53080672f Mon Sep 17 00:00:00 2001 From: RafaelSzmarowski Date: Mon, 3 Jan 2022 17:52:49 +0100 Subject: [PATCH 4/5] Resolve eslint warnings --- .../src/components/ReactImpl.tsx | 12 ++++-------- .../visualizations/src/components/Chart/Chart.svelte | 7 +++---- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/visualizations-react/src/components/ReactImpl.tsx b/packages/visualizations-react/src/components/ReactImpl.tsx index d2472db41..f49bc65f4 100644 --- a/packages/visualizations-react/src/components/ReactImpl.tsx +++ b/packages/visualizations-react/src/components/ReactImpl.tsx @@ -59,14 +59,10 @@ export function wrap { const container = containerRef.current; if (container) { - const component = new ComponentConstructor( - container, - initialState.data, - { - ...initialState.options, - setOnError, - }, - ); + 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 1b90da353..a1f025697 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -22,7 +22,7 @@ function tryCreateChart(ctx: CanvasRenderingContext2D, config: ChartConfiguration) { try { return new Chart(ctx, config); - } catch(err) { + } catch (err) { setOnError?.(JSON.stringify(err)); return undefined; } @@ -37,15 +37,14 @@ update() { try { chart?.update(); - } catch(err) { + } catch (err) { setOnError?.(JSON.stringify(err)); } - }, destroy() { try { chart?.destroy(); - } catch(err) { + } catch (err) { setOnError?.(JSON.stringify(err)); } }, From d7d774b6605d5f33144550f91d00ffefb3ddef46 Mon Sep 17 00:00:00 2001 From: RafaelSzmarowski Date: Mon, 3 Jan 2022 18:23:21 +0100 Subject: [PATCH 5/5] Change method from JSONstringify to toString to display caught error in try catch --- .../visualizations/src/components/Chart/Chart.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte index a1f025697..11e884043 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -22,8 +22,8 @@ function tryCreateChart(ctx: CanvasRenderingContext2D, config: ChartConfiguration) { try { return new Chart(ctx, config); - } catch (err) { - setOnError?.(JSON.stringify(err)); + } catch (err: any) { + setOnError?.(err.toString()); return undefined; } } @@ -37,15 +37,15 @@ update() { try { chart?.update(); - } catch (err) { - setOnError?.(JSON.stringify(err)); + } catch (err: any) { + setOnError?.(err.toString()); } }, destroy() { try { chart?.destroy(); - } catch (err) { - setOnError?.(JSON.stringify(err)); + } catch (err: any) { + setOnError?.(err.toString()); } }, };