[plasmicpkgs] Fix Embed HTML crash when a <script> is detached mid-rehydration#162
Open
jlubawy wants to merge 3 commits into
Open
[plasmicpkgs] Fix Embed HTML crash when a <script> is detached mid-rehydration#162jlubawy wants to merge 3 commits into
jlubawy wants to merge 3 commits into
Conversation
…id-rehydration The Embed component re-executes embedded <script> tags in an async loop, awaiting each external (src) script's load event before moving on. It asserts `ensure(oldScript.parentNode).replaceChild(...)` on every iteration. If a re-render happens while an earlier script's load is being awaited, React re-applies `dangerouslySetInnerHTML` and detaches the original <script> nodes captured at the start of the loop. On the next iteration `oldScript.parentNode` is null, so `ensure()` throws "Value must not be undefined or null" — an uncaught promise rejection (it's post-await), which surfaces as an "application error" even though page content already rendered. This reproduces reliably on a page whose embed contains an external script (e.g. an analytics loader). Fixes: - Skip <script> nodes whose parentNode has become null instead of asserting. - Bail out of the loop when the effect's cleanup has run (unmount / dep change). - Actually register the cleanup: it was previously returned from the async IIFE rather than the useEffect callback, so `cleanup` was never set to true and the post-await guard was dead code. - Capture `rootElt.current` once and guard it, dropping the now-unused `ensure`. No behavior change on the happy path.
|
@jlubawy is attempting to deploy a commit to the Plasmic Team on Vercel. A member of the Team first needs to authorize it. |
|
All contributors have signed the CLA ✍️ ✅ |
Author
|
I have read, agree to, and hereby sign Plasmic's Individual Contributor License Agreement |
Adds a Storybook interaction story that reproduces the Embed HTML crash where the rehydration loop throws "Value must not be undefined or null" when the code prop changes while an earlier external script's load event is still pending. The story uses the existing generic MSW-mocked scripts (example.com/scriptN.js): it waits until script1 is loading, changes the code prop (detaching the captured <script> nodes), and asserts no unhandled rejection occurs once script1's load resolves and the loop advances to the detached node. Expected to fail on the current implementation (reproducing the bug) and to pass once the rehydration loop tolerates detached nodes / cancels on cleanup.
The script-rehydration race is now fixed, so reframe the story's doc comment as a passing regression test instead of an expected-to-fail repro. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Embed(Embed HTML) re-executes embedded<script>tags in an async loop, awaiting each external (src) script'sloadevent before continuing. Every iteration asserts:If a re-render occurs while an earlier script's
loadis being awaited, React re-appliesdangerouslySetInnerHTMLand detaches the original<script>nodes that were captured at the start of the loop. On the next iterationoldScript.parentNodeisnull, soensure()throws:Because the throw happens in a post-
awaitmicrotask it becomes an unhandled promise rejection, which is reported as an "application error" even though the page content already rendered. It reproduces reliably on a page whose embed loads an external script (e.g. an analytics/tag loader such as CallRail): the firstsrcscript's awaitedloadopens the window, and the next iteration throws.While here, I also noticed the cleanup function was returned from the async IIFE rather than from the
useEffectcallback, so it was never registered —cleanupnever becametrueand the existing post-awaitguard was dead code.Fix
<script>nodes whoseparentNodehas becomenull(detached by a re-render) instead of asserting on them.useEffect(not the async IIFE), so the post-awaitguard works as intended.rootElt.currentonce and guard it, dropping the now-unusedensure.No behavior change on the happy path — the same scripts are rehydrated in the same order; the loop now just tolerates a tree that React swapped out from under it instead of throwing.
Notes
Verified against a live site that embeds an external script: without the fix the page throws the assertion as an unhandled rejection on load; with the fix the rehydration completes (or cleanly stops when the DOM is replaced) and no error is thrown.