debug resizeobserver error

sctg-development · Nov 6, 2024 · 1cc94a4 · 1cc94a4
1 parent f544cd9
commit 1cc94a4
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 0 deletions.
diff --git a/src/aipane/components/Header.tsx b/src/aipane/components/Header.tsx
@@ -5,6 +5,7 @@
 */
 import * as React from "react";
 import { Image, tokens, makeStyles } from "@fluentui/react-components";
+import { useEffect } from "react";
 
 export interface HeaderProps {
   title: string;
@@ -32,6 +33,20 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { title, logo, message } = props;
   const styles = useStyles();
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in Header");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <section className={styles.welcome__header}>
       <Image width="90" height="90" src={logo} alt={title} />

diff --git a/src/aipane/components/HeroApiKey.tsx b/src/aipane/components/HeroApiKey.tsx
@@ -6,6 +6,7 @@
 import * as React from "react";
 import { makeStyles, useId, Button, Input, Label } from "@fluentui/react-components";
 import { AIProvider } from "../AIPrompt";
+import { useEffect } from "react";
 
 interface HeroApiKeyProps {
   provider: AIProvider;
@@ -32,6 +33,21 @@ const useStyles = makeStyles({
 const HeroApiKey: React.FC<HeroApiKeyProps> = ({ apiKey, onApiKeyChange, onApiKeySubmit, provider }) => {
   const styles = useStyles();
   const inputId = useId("input");
+
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroApiKey");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.root}>
       <Label htmlFor={inputId} size="large">

diff --git a/src/aipane/components/HeroModels.tsx b/src/aipane/components/HeroModels.tsx
@@ -48,6 +48,20 @@ const HeroModels: React.FC<HeroModelsProps> = ({ onChange, provider }) => {
     onChange(selectedValue);
   }, [selectedValue, onChange]);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroModels");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.root}>
       <Label htmlFor={selectId} size="large">

diff --git a/src/aipane/components/HeroProviders.tsx b/src/aipane/components/HeroProviders.tsx
@@ -38,6 +38,20 @@ const HeroProviders: React.FC<HeroProvidersProps> = ({ onChange }) => {
     setProviders(config.providers);
   }, []);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroProviders");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   const handleChange = React.useCallback(
     (event: React.FormEvent<HTMLButtonElement>, option?: any) => {
       event.preventDefault();

diff --git a/src/aipane/components/TextInsertion.tsx b/src/aipane/components/TextInsertion.tsx
@@ -144,6 +144,20 @@ const TextInsertion: React.FC<TextInsertionProps> = (props: TextInsertionProps):
     });
   }, []);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in TextInsertion");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.textPromptAndInsertion}>
       <Field className={styles.textAreaField} size="large" label="Enter your message.">