21762: added trycatch to observer callback

[arvados.git] / services / workbench2 / src / views-components / side-panel / side-panel.tsx

diff --git a/services/workbench2/src/views-components/side-panel/side-panel.tsx b/services/workbench2/src/views-components/side-panel/side-panel.tsx
index e19daefa87da82817c170659788e0181775455a3..80cfe75b27d4bb3dd61c44ca5a1ac98e5460685b 100644 (file)
--- a/services/workbench2/src/views-components/side-panel/side-panel.tsx
+++ b/services/workbench2/src/views-components/side-panel/side-panel.tsx
@@ -59,13 +59,24 @@ export const SidePanel = withStyles(styles)(
 
             if (!splitPane) return;
 
-            const observer = new ResizeObserver((entries)=>{
-                const width = entries[0].contentRect.width
-                props.setCurrentSideWidth(width)
-            })
+            const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+                try {
+                    //prevents potential infinite resize triggers
+                    window.requestAnimationFrame((): void | undefined => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return;
+                    }
+                        const width = entries[0].contentRect.width
+                        props.setCurrentSideWidth(width)
+                    });
+                } catch (error) {
+                    console.error('Error in resize observer callback', error);
+                }
+              };
 
-            observer.observe(splitPane)
+            const observer = new ResizeObserver(observerCallback)
 
+            observer.observe(splitPane)
             return ()=> observer.disconnect()
         }, [props])
 
@@ -73,22 +84,21 @@ export const SidePanel = withStyles(styles)(
                 <Grid item xs>
                         {props.isCollapsed ? 
                             <div ref={splitPaneRef}>
-                        <>
-
-                            <SidePanelToggle />
-                            <SidePanelCollapsed />
-                        </>
-                        </div>
+                                <>
+                                    <SidePanelToggle />
+                                    <SidePanelCollapsed />
+                                </>
+                            </div>
                             :
                             <>
-                        <div ref={splitPaneRef}>
-                            <Grid className={classes.topButtonContainer}>
-                                <SidePanelButton key={props.currentRoute} />
-                                <SidePanelToggle/>
-                            </Grid>
-                            <SidePanelTree {...props} />
-                        </div>
-                        </>
+                                <div ref={splitPaneRef}>
+                                    <Grid className={classes.topButtonContainer}>
+                                        <SidePanelButton key={props.currentRoute} />
+                                        <SidePanelToggle/>
+                                    </Grid>
+                                    <SidePanelTree {...props} />
+                                </div>
+                            </>
                         }
                     </Grid>
         )}