Skip to content

Resize without observing#21450

Merged
niik merged 12 commits intodevelopmentfrom
resize-without-observing
Jan 13, 2026
Merged

Resize without observing#21450
niik merged 12 commits intodevelopmentfrom
resize-without-observing

Conversation

@niik
Copy link
Member

@niik niik commented Jan 12, 2026

Closes #21311
Closes #20760

Description

We're seeing a ton of crashes with no info attached due to the exception reaching us being null.

Image

I tracked it down to our use of ResizeObserver to observe elements inside of an iframe in our SandboxedMarkdown component. It's reproducible in development by hovering over PRs which pops up our PR preview pane. Our prior workarounds for this have failed so I went down the route of trying to avoid using ResizeObserver entirely and instead subscribe to the DOM events that could cause a resize inside of our markdown component.

As part of this work and to avoid flickering I reworked our filter pipeline to operate on the iframe Document itself instead of stringifying, parsing, mutating, stringifying etc etc. This lead to much snappier response times and dramatically reduced rerenders.

Screenshots

Release notes

Notes:

niik added 12 commits December 9, 2025 19:07
The output we get from the markdown parser doesn't include <head> or <body> but by emitting documentElement.innerHTML here we'll always wrap the contents in <head></head><body>{...}</body>

This in turn will break our logic to only re-render the sandboxed markdown component if the markup changes.
Replaces manual div ref management with React.createRef for frameContainingDivRef in SandboxedMarkdown. Updates related logic to use the current property and removes the custom ref callback for improved clarity and consistency.
Previously we would render markdown to string, put that in the iframe, then parse that string into a Document, apply a filter on it, stringify it, push to iframe, repeating for each filter.

Now instead we can just let the filters loose on the iframe document and only recalculate the height when something has changed inside the iframe DOM.
No need for error handler, it won't cause a crash
@@ -0,0 +1,9 @@
export function isElement<T extends keyof HTMLElementTagNameMap>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice readability improvement. :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think it turned out pretty nice but this change is primarily needed because you can no longer do element instanceof HTMLAnchorElement because the HTMLAnchorElement type available in the renderer is different from the HTMLAnchorElement in the iframe due to sandboxing. This wasn't an issue in the previous logic because we were instantiating elements in the renderer, then stringifying them and having them be recreated in the iframe.

Copy link
Contributor

@tidy-dev tidy-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💖 Makes sense. I kicked it around via the pull request previewer and some notifications and appears to work great.

@niik niik merged commit 98519ce into development Jan 13, 2026
8 checks passed
@niik niik deleted the resize-without-observing branch January 13, 2026 07:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

GH crashes, after clicking on notification [Unknown] crash when opening notifications

3 participants