WordPress/gutenberg

createInterpolateElement: Add error handling in case unmatched tags are included

Open

#60843 opened on Apr 18, 2024

View on GitHub
 (4 comments) (3 reactions) (1 assignee)JavaScript (9,607 stars) (3,893 forks)batch import
Good First Issue[Package] Element[Status] In Progress[Type] Bug

Description

Description

The problem was discovered in #60654

If a string containing invalid tags is passed to the createInterpolateElement() function, a critical error like the one below will occur.

create-interpolate-element.js:230 Uncaught TypeError: Cannot read properties of undefined (reading 'prevOffset')
    at proceed (create-interpolate-element.js:230:14)
    at createInterpolateElement (create-interpolate-element.js:129:12)
    at CodeEdit (edit.js:20:26)
    at renderWithHooks (react-dom.js?ver=18:16315:20)
    at mountIndeterminateComponent (react-dom.js?ver=18:20084:15)
    at beginWork (react-dom.js?ver=18:21597:18)
    at HTMLUnknownElement.callCallback (react-dom.js?ver=18:4151:16)
    at Object.invokeGuardedCallbackDev (react-dom.js?ver=18:4200:18)
    at invokeGuardedCallback (react-dom.js?ver=18:4264:33)
    at beginWork$1 (react-dom.js?ver=18:27461:9)

This function will most likely be passed a localized string via the __() function. In other words, even if the tags included in the original string are correct, invalid tags may be accidentally mixed in when translated into a specific language.

I think it would be better to prevent this critical error and display a nice error message.

Step-by-step reproduction instructions

  • Add the following code inside a component somewhere.
  • Confirm that a critical error occurs when the component is rendered.
createInterpolateElement( 'Hello </code>World</code>', {
	code: <code />,
} );

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Contributor guide

Tech stack
javascriptreact
Domain
frontenddeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScript basicsReact basicsUnderstanding of createInterpolateElement
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the function createInterpolateElement in create interpolate element.js. The TypeError occurs in the proceed function at line 230 when accessing 'prevOffset' on an undefined value. Review the parsing logic to identify how unmatched tags (e.g., closing tag without opening) lead to this state. The fix should add validation in the main function to reject strings with mismatched tags before calling proceed, and throw a clear error message. Refer to issue #60654 for the original discovery and discussion.