fix(visual-editor): handle circular pattern dependencies in the tree [SPA-2511]

[Chaoste]

Purpose

When accidentally causing a loop in the chain of pattern dependencies, the SDK would crash and the browser tab becomes not responsible.

Approach

To address this, we want to render a similar error as we do for missing component definitions. To detect a loop during the render cycle, we pass through a list of wrappingPatternIds that gets extended when "diving into" a pattern node.

To detect the loop as early as possible (and not pollute the canvas with multiple instances of a single pattern), we have to know the ID of the opened experience ID. When finding the same ID again deeper inside the tree, we stop immediately the rendering cycle and render the error message. To know the global experience ID, we leverage the blockId of the root node. So far, it was the same as the root node id. Using this for the entry ID sounds more reasonable to me and saves us from adding another attribute or message to the communication layer.

Note: This handles only the editor case. For preview/ delivery, there will be a separate PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nextjs-marketing-demo-bug-test	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 5:19pm

3 Skipped Deployments

Name	Status	Preview	Updated (UTC)
experience-builder-test-app	⬜️ Ignored (Inspect)		Jan 22, 2025 5:19pm
studio-nextjs-marketing-demo	⬜️ Ignored (Inspect)		Jan 22, 2025 5:19pm
studio-react-vite-template	⬜️ Ignored (Inspect)		Jan 22, 2025 5:19pm

[ChidinmaOrajiaku]

Looks good and works well 👍