xLog Patch Note - Application Crash Caused by Plain Text Nodes

Background#

I have previously discovered a subtle bug on this platform:
When using Chrome's built-in translation tool for global translation, an error occurs on the page, with the specific prompt:

Application Error: A client exception has occurred (for more information, please see the browser console).

However, because the platform itself has good i18n and there is no overly complex content, global translation is rarely used on relevant pages, so I didn't pay much attention to it. Until recently, I saw other colleagues mention this issue here, which piqued my curiosity, so I decided to take a simple look at the specific cause.

Investigation#

Since it mentioned referring to the console, let's see what it actually says:

react-dom.production.min.js:189 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at e (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:89708)
    at e (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:89781)
    at e (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:89781)
    at uK (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:89833)
    at uq (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86503)
    at uQ (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86382)
    at uq (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86495)
    at uQ (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86382)
    at uq (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86692)
    at uQ (https://xlog.xlog.app/_next/static/chunks/framework-9e494f4410668bc3.js:9:86382)

After a quick scan, hmm, I can't tell. Let's take another look. I guess it should be an error thrown by React internally. So I turned to Google directly and easily found the cause and solution: here

The problem is that Google Translate replaces text nodes with <font> tags that contain translations, and React keeps a reference to text nodes that are not in the DOM tree.

And the solution is quite simple:

The simplest solution is to wrap those text nodes with <span>, so that the nodes referenced by React will remain in the DOM tree even if their content is replaced with <font> tags.

Solution#

With the cause and solution in hand, all we need to do is find the problematic area and fix it.

xLog's code is not small, so it would be quite a task to search directly. Therefore, in order to locate it, I used a brute force approach and gradually deleted elements in the console using binary search.

Luckily, it didn't take long to find the problematic area: src/components/site/SiteFooter.tsx

<div className="max-w-screen-md mx-auto px-5 py-10 text-xs flex justify-between">
  <div className="font-medium text-base">
    &copy;{" "}
    <UniLink href="/" className="hover:text-accent">
      {site?.name}
    </UniLink>{" "}
    ·{" "}
    <Trans
      i18nKey="powered by"
      defaults={"Powered by <name/>"}
      components={{
        name: <LogoWithLink />,
      }}
      ns="site"
    />
</div>

Two steps to fix it:

Wrap the plain text with <span> tags directly.
Correct the output structure of the Trans component: modify the corresponding string template in the language file according to this, and add the corresponding span declaration in the components field.

After a quick look, there doesn't seem to be any issues, but I won't rule out the possibility of missing something. I'll address it if I encounter any.

Conclusion#

There's not much to say, just use Google more often :_)