Skip to content

fix(chat): defer scroller resize correction off the ResizeObserver callback#624

Draft
posthog[bot] wants to merge 1 commit into
mainfrom
posthog-code/fix-resizeobserver-loop-scroller
Draft

fix(chat): defer scroller resize correction off the ResizeObserver callback#624
posthog[bot] wants to merge 1 commit into
mainfrom
posthog-code/fix-resizeobserver-loop-scroller

Conversation

@posthog

@posthog posthog Bot commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Summary

A single chat session logged the browser warning "ResizeObserver loop completed with undelivered notifications" hundreds of times, and it was also being forwarded into error tracking as a real exception.

Two changes:

  • Root cause — the message scroller's ResizeObserver callback (handleResize) wrote viewport.scrollTop synchronously (via scrollToEnd / reanchorToAnchoredMessage), mutating layout inside the same observer delivery — the classic trigger for that warning. The resize-driven scroll correction is now coalesced onto a requestAnimationFrame, so the write lands outside the observer callback. The frame is cancelled on unmount for StrictMode safety, matching the existing state-commit frame handling.
  • Noise — the PostHog global error handler now drops the known-benign ResizeObserver loop* warnings, so a stray occurrence can't bury genuine errors in error tracking.

An earlier scroll-stabilization pass didn't stop the loop; deferring the mutation off the observer callback is the direct fix.

Why

One user hit this loop repeatedly in a single chat session while using web access; session replay flagged it a blocking_exception, and the unfiltered global handler was logging every occurrence as an error-tracking issue. It's both a real UX degradation for affected users and clutter that can hide genuine errors.

Testing notes

  • pnpm check (format, lint, types) — passes
  • pnpm test — 14 passed

The symptom is a browser layout-timing warning surfaced through error tracking rather than a rendered visual glitch; reproducing it live needs a streaming chat session against the backend, which wasn't available in this environment. The requestAnimationFrame deferral is the established mitigation for this specific warning and preserves the existing follow-bottom / anchor behavior (the append/anchor path via the content mutation observer is unchanged).


Created with PostHog Code from an inbox report.


View with Codesmith Autofix with Codesmith
Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.

Review in cubic

The message scroller's ResizeObserver callback wrote viewport.scrollTop
synchronously (via scrollToEnd / reanchorToAnchoredMessage), mutating layout
inside the same observer delivery. Browsers report this as "ResizeObserver
loop completed with undelivered notifications" — benign, but it fires on
every frame of a streaming reply and one session logged it hundreds of times.

Coalesce the resize-driven scroll correction onto a requestAnimationFrame so
the scrollTop write lands outside the observer callback, breaking the loop.
The frame is cancelled on unmount for StrictMode safety, matching the existing
state-commit frame handling.

Also drop the known-benign ResizeObserver warnings in the PostHog global error
handler so a stray occurrence no longer pollutes error tracking.

Generated-By: PostHog Code
Task-Id: 230c0026-2cbc-41ca-9911-b2b86dfd746b
@github-actions

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit 8ad9b4f.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

0 participants