Skip to content

N/A: Add ErrorBoundary for the SaveArticleButton - #14326

Draft
elvinasv wants to merge 2 commits into
latestfrom
notask-fix-save-article-button-browser-translation
Draft

N/A: Add ErrorBoundary for the SaveArticleButton#14326
elvinasv wants to merge 2 commits into
latestfrom
notask-fix-save-article-button-browser-translation

Conversation

@elvinasv

Copy link
Copy Markdown
Member

Resolves JIRA:

Summary

  • When translating a Simorgh article page with Chrome's built-in translate feature, clicking the "save article" button crashes the page with a client-side React error (NotFoundError: Failed to execute 'insertBefore' on 'Node'). This happens because Chrome Translate rewrites text nodes in the DOM (wrapping them in its own elements) outside of React's control. When the save action then triggers a state update and React tries to re-render the button (swapping icons and label text as siblings within the same element), React's reconciler tries to insert/remove DOM nodes at positions that no longer match what Chrome Translate left behind, throwing the error and crashing the app. This is a known class of conflict between browser translation tools and React's DOM reconciliation, not a logic bug in the save button itself.
  • The fix reduces the chance of triggering it by keeping a single stable icon element and wrapping the dynamic label text in its own child element, and a new ErrorBoundary component was added around SaveArticleButton so that if this (or any other runtime error) does occur in that widget, it no longer takes down the whole article page — the error is caught, logged, and the widget fails gracefully instead.

Code changes

  • List key code changes that have been made.

Testing

  1. List the steps required to test this PR.

Useful Links

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.

1 participant