chore(react-helpers): improve error catching in useResizeObserver (#3058)

apps/trading/components/banner/banner.tsx

@@ -24,6 +24,7 @@ export const Banner = () => {
     <AnnouncementBanner>
       <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
         <button
+          className="flex items-center"
           onClick={() => update({ shouldDisplayAnnouncementBanner: false })}
         >
           <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />

libs/react-helpers/src/hooks/use-resize-observer.ts

@@ -1,6 +1,6 @@
-import { captureException } from '@sentry/react';
 import debounce from 'lodash/debounce';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { localLoggerFactory } from '@vegaprotocol/utils';
 
 type ResizeObserverConfiguration = {
   debounceTime: number;
@@ -19,20 +19,26 @@ export function useResizeObserver(
   callback: ResizeObserverCallback,
   options: ResizeObserverConfiguration = DEFAULT_OPTIONS
 ) {
+  const wrappedCb = useCallback(
+    (entries: ResizeObserverEntry[], observer: ResizeObserver) =>
+      window.requestAnimationFrame(() => {
+        options.debounceTime > 0
+          ? debounce(callback, options.debounceTime)(entries, observer)
+          : callback(entries, observer);
+      }),
+    [callback, options.debounceTime]
+  );
+
   const observer = useMemo(() => {
-    return new ResizeObserver(
-      options.debounceTime > 0
-        ? debounce(callback, options.debounceTime)
-        : callback
-    );
-  }, [callback, options.debounceTime]);
+    return new ResizeObserver(wrappedCb);
+  }, [wrappedCb]);
 
   useEffect(() => {
     if (!observer || !target) return;
     try {
       observer.observe(target, options.config);
     } catch (err) {
-      captureException(err);
+      localLoggerFactory({ application: 'react-helpers' }).debug(err as Error);
     }
     return () => observer?.disconnect();
   }, [observer, options.config, target]);

libs/utils/src/lib/local-logger.ts

@@ -49,10 +49,10 @@ export class LocalLogger {
     return LocalLogger.levelLogMap[this._logLevel];
   }
   private tags: string[] = [];
-  private application = 'trading';
+  private _application = 'trading';
   constructor(conf: LoggerConf) {
     if (conf.application) {
-      this.application = conf.application;
+      this._application = conf.application;
     }
     this.tags = [...(conf.tags || [])];
     this._logLevel = conf.logLevel || this._logLevel;
@@ -85,7 +85,7 @@ export class LocalLogger {
   ) {
     if (this.numberLogLevel <= LocalLogger.levelLogMap[level]) {
       console[logMethod].apply(console, [
-        `${this.application}:${level}: `,
+        `${this._application}:${level}: `,
         ...args,
       ]);
     }
@@ -148,13 +148,23 @@ export class LocalLogger {
   public get logLevel() {
     return this._logLevel;
   }
+  public get application() {
+    return this._application;
+  }
 }
 
-let singleLoggerInstance: LocalLogger;
+let singleLoggerInstances: LocalLogger[];
 
 export const localLoggerFactory = (conf: LoggerConf) => {
+  if (!singleLoggerInstances) {
+    singleLoggerInstances = [];
+  }
+  let singleLoggerInstance = singleLoggerInstances.find(
+    (instance) => instance.application === conf.application
+  );
   if (!singleLoggerInstance) {
     singleLoggerInstance = new LocalLogger(conf);
+    singleLoggerInstances.push(singleLoggerInstance);
   }
   if (conf.logLevel && singleLoggerInstance.logLevel !== conf.logLevel) {
     singleLoggerInstance.setLogLevel(conf.logLevel);