From 709fe1a1a82c2b0fc0b913acc9145d05e4dd7398 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 16 Apr 2025 14:40:04 +0200 Subject: [PATCH 1/2] fix(platform): Avoid IntersectionObserver issues We have a lot of issues like this: https://sentry.sentry.io/issues/5543047544/?project=1267915 TBH not sure how that happens, but I guess we can try to be defensive here. Maybe inner height is missing somehow? --- src/components/sidebarTableOfContents/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/sidebarTableOfContents/index.tsx b/src/components/sidebarTableOfContents/index.tsx index 3a55c069a61c8..458eea23bdfd0 100644 --- a/src/components/sidebarTableOfContents/index.tsx +++ b/src/components/sidebarTableOfContents/index.tsx @@ -157,16 +157,17 @@ export function SidebarTableOfContents() { // Mark the active item based on the scroll position useEffect(() => { - if (!tocItems.length) { + const innerHeight = window.innerHeight; + if (!tocItems.length || !innerHeight) { return () => {}; } // account for the header height const rootMarginTop = 100; // element is consiered in view if it is in the top 1/3 of the screen - const rootMarginBottomRaw = (2 / 3) * window.innerHeight - rootMarginTop; - const rootMarginBottom = Math.floor(rootMarginBottomRaw); + const rootMarginBottomRaw = (2 / 3) * innerHeight - rootMarginTop; + const rootMarginBottom = Math.floor(rootMarginBottomRaw) * -1; const observerOptions = { - rootMargin: `${rootMarginTop}px 0px -${rootMarginBottom}px 0px`, + rootMargin: `${rootMarginTop}px 0px ${rootMarginBottom}px 0px`, threshold: 1, }; const observer = new IntersectionObserver(entries => { From 4fa0baa0f8201e5e2acfbba5e652c3abfdeddf0a Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 16 Apr 2025 14:42:33 +0200 Subject: [PATCH 2/2] disconnect on tear down --- src/components/sidebarTableOfContents/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebarTableOfContents/index.tsx b/src/components/sidebarTableOfContents/index.tsx index 458eea23bdfd0..5b1cf57988393 100644 --- a/src/components/sidebarTableOfContents/index.tsx +++ b/src/components/sidebarTableOfContents/index.tsx @@ -184,7 +184,7 @@ export function SidebarTableOfContents() { }, observerOptions); const headings = tocItems.map(item => item.element); headings.forEach(heading => observer.observe(heading)); - return () => headings.forEach(heading => observer.unobserve(heading)); + return () => observer.disconnect(); }, [tocItems]); return (