Extensions fail safe

[feruzm]

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Improved rendering stability across multiple components with enhanced error handling and DOM connectivity validation to prevent crashes in edge cases.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Five extension files in the post-renderer feature are hardened with defensive DOM handling. Each adds try/catch blocks, validates element connectivity before DOM operations, logs warnings for disconnected elements, and performs safety checks before replacing nodes to prevent crashes from detached elements.

Changes

Cohort / File(s)	Summary
DOM Safety Hardening in Extension Handlers apps/web/src/features/post-renderer/components/extensions/author-link-extension.tsx, hive-operation-extension.tsx, hive-post-link-extension.tsx, tag-link-extension.tsx, twitter-extension.tsx	Each extension now wraps DOM manipulation logic in try/catch blocks, adds pre-flight checks to verify element connectivity and parentNode existence, logs console warnings for disconnected elements, and confirms element state before performing node replacement. Rendering operations are moved into newly created containers with safety validation gates.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 With whiskers twitching, guards in place,
Each element checks its DOM space,
No crash shall come from nodes detached,
With try-catch arms, extensions matched,
Safe rendering dances here and there,
Through connected trees with utmost care! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Extensions fail safe' clearly and concisely summarizes the main objective of the changeset: adding defensive error handling and DOM safety checks across five extension files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/src/features/post-renderer/components/extensions/twitter-extension.tsx (1)

26-52: Avoid clearing the link before the final connectivity check.

element.innerHTML = "" runs before the final isConnected guard; if the node detaches in between, the original link can be emptied with no replacement. Move the DOM mutation inside the final guard and use replaceChildren to swap in the container safely.

🐛 Proposed fix

-            element.classList.add("ecency-renderer-twitter-extension");
-
-            element.innerHTML = "";
-
-            // Final safety check before appending
-            if (element.isConnected && element.parentNode) {
-              element.appendChild(container);
+            // Final safety check before appending
+            if (element.isConnected && element.parentNode) {
+              element.classList.add("ecency-renderer-twitter-extension");
+              element.replaceChildren(container);
 
               const root = createRoot(container);
               root.render(<ComponentInstance id={tweetId} />);
             }

🧹 Nitpick comments (1)

apps/web/src/features/post-renderer/components/extensions/tag-link-extension.tsx (1)

24-47: Consider unmounting React roots on cleanup.

createRoot is used for each tag, but there’s no cleanup when the extension unmounts. Track roots and unmount in the useEffect cleanup to avoid lingering trees.

♻️ Proposed refactor

   useEffect(() => {
+    const roots: Array<ReturnType<typeof createRoot>> = [];
     const elements = Array.from(
       containerRef.current?.querySelectorAll<HTMLElement>(
             ".markdown-view:not(.markdown-view-pure) .markdown-tag-link"
         ) ?? []
     );
 
     elements.forEach((element) => {
       try {
@@
-        const root = createRoot(container);
+        const root = createRoot(container);
+        roots.push(root);
         root.render(<TagLinkRenderer tag={element.innerText} />);
@@
       } catch (error) {
         console.warn("Error enhancing tag link element:", error);
       }
     });
+
+    return () => {
+      roots.forEach((root) => root.unmount());
+    };
   }, []);