From 5a23c976814d113f00276667db4dfc746fc5ad8e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 17 Jul 2025 16:48:03 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(service-worker)=20Fix=20useOffline?= =?UTF-8?q?=20Maximum=20update=20depth=20exceeded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sentry was reporting a "Maximum update depth exceeded" error comming from the `useOffline` hook. We updated the hook to avoid mutation. Seems to impact mainly edge browsers. --- CHANGELOG.md | 8 ++++++-- .../src/features/service-worker/hooks/useOffline.tsx | 10 +++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b0922849b7..9727892e41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,13 @@ and this project adheres to ## [Unreleased] -## Fixed +### Changed + +- 🔧(project) change env.d system by using local files #1200 +### Fixed + +- 🐛(service-worker) Fix useOffline Maximum update depth exceeded #1196 - 🐛(helm) charts generate invalid YAML for collaboration API / WS #890 ## [3.4.2] - 2025-07-18 @@ -17,7 +22,6 @@ and this project adheres to ### Changed - ⚡️(docker) Optimize Dockerfile to use apk with --no-cache #743 -- 🔧(project) change env.d system by using local files #1200 ### Fixed diff --git a/src/frontend/apps/impress/src/features/service-worker/hooks/useOffline.tsx b/src/frontend/apps/impress/src/features/service-worker/hooks/useOffline.tsx index 3dd4994223..498ed467d6 100644 --- a/src/frontend/apps/impress/src/features/service-worker/hooks/useOffline.tsx +++ b/src/frontend/apps/impress/src/features/service-worker/hooks/useOffline.tsx @@ -14,13 +14,17 @@ interface IsOfflineState { setIsOffline: (value: boolean) => void; } -export const useIsOffline = create((set) => ({ +export const useIsOffline = create((set, get) => ({ isOffline: typeof navigator !== 'undefined' && !navigator.onLine, - setIsOffline: (value: boolean) => set({ isOffline: value }), + setIsOffline: (value: boolean) => { + if (get().isOffline !== value) { + set({ isOffline: value }); + } + }, })); export const useOffline = () => { - const { setIsOffline } = useIsOffline(); + const setIsOffline = useIsOffline((state) => state.setIsOffline); useEffect(() => { const handleMessage = (event: MessageEvent) => {