diff --git a/libs/react-helpers/src/hooks/use-resize-observer.ts b/libs/react-helpers/src/hooks/use-resize-observer.ts index fb492ef36..3d83dbaf8 100644 --- a/libs/react-helpers/src/hooks/use-resize-observer.ts +++ b/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 cb = 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(cb); + }, [cb]); 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]); diff --git a/libs/utils/src/lib/local-logger.ts b/libs/utils/src/lib/local-logger.ts index 4e7e58eef..52cd5f9e8 100644 --- a/libs/utils/src/lib/local-logger.ts +++ b/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);