Google Translate 导致的 React 页面崩溃

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

在生产数据监控中,时常看到这条崩溃,如果常规去测试,找不出任何问题。

在网络上搜索,在 github 一条 issue 中找到线索:Google Translate.

大致原因是,当用户使用了 谷歌翻译,在进行一些交互时,部分页面会崩溃报错。直面上看,这应该跟文本替换导致的 React 更新异常。

分析

Google Translate 之后,每一个文本都会被替换为两层 <font> 包裹的译文。

<font> 标签定义了该内容的字体大小、顏色与表现。按道理已经不推荐使用了。

html 复制代码
<font style="vertical-align: inherit;">
    <font style="vertical-align: inherit;">译文 </font>
</font>

为什么是两层?这个不清楚,但是测试主动给文字包裹一层 <font> 就会影响到外面的一层 <font>,但同时也会多出一组空的 <font>(需要是当前 <font> 前/后 还有文字,如果同级没有其它文本,就会正常一些)。

html 复制代码
Text1<font data-id="1">Text2</font>

// =>

<font style="vertical-align: inherit;">
    <font style="vertical-align: inherit;">译文1</font>
    <font data-id="1">
        <font style="vertical-align: inherit;">译文2</font>
    </font>
</font>
<font data-id="1">
    <font style="vertical-align: inherit;"></font>
</font>

崩溃分析

崩溃的发生点,在文本变量的拼接。如果 react 代码中,动态文本直接拼接的话,文本变化时,翻译后的页面会直接崩溃。

解决办法

基于以上原因,所以解决办法是避开动态文本的拼接。将动态文本都进行一次 <span> 包裹。 也不需要将所有 文本包裹,只需保证 静态文本 + 动态文本时,其中有一方是被<span>包裹着。

<span> 一般可以替换其它任意标签。

特殊情况

有的时候文本评价在代码中显示得很明显,有的时候呈现方式不同,比如 <></> 之间的内容也会产生文本拼接,切不易察觉。

相关推荐
呆呆没有脑袋几秒前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe10101 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵1 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试