React-Markdown配rehype-mathjax接入OpenTelemetry后渲染公式报错

问题 #

原本可正常渲染的复杂LaTeX公式文本，在React应用接入OpenTelemetry后出现渲染报错，但简单公式（如$x^2 + y^2 = z^2 $）不受影响。

环境 #

• Node.js版本：v20.10.0
• React-Markdown组件配置：

<ReactMarkdown
  remarkPlugins={[remarkGfm, remarkMath]}
  rehypePlugins={[rehypeMathjax]}
  components={{ ... }}
/>

待渲染的复杂文本示例 #

"Sure thing! Here's a mathematical formula that includes powers, roots, subscripts, and the Greek letter lambda (λ):

$$\lambda^2 x^{3/2} + \frac{1}{x^{1/2}} = \lambda^2 x^{3/2} + \frac{1}{\sqrt[3]{x}}$$

In this formula, λ is a scalar and x is a positive real number. The formula includes powers (2 and 3/2), roots (1/2), and subscripts (3).

I hope this helps! Let me know if you have any questions or need further assistance. 
 "

排查与解决方案 #

1. 排除OpenTelemetry对MathJax相关逻辑的追踪 #

OpenTelemetry的代码注入可能干扰MathJax的DOM操作、异步渲染流程。可在OpenTelemetry配置中添加忽略规则，跳过mathjax、rehype-mathjax、remark-math相关模块的追踪，避免其修改关键渲染逻辑。

2. 检查LaTeX转义字符是否被篡改 #

复杂公式中的反斜杠（如\lambda、\frac）可能被OpenTelemetry的日志或注入逻辑二次转义，导致MathJax无法识别。需确保传递给React-Markdown的文本中LaTeX语法的转义字符完整，未被额外处理。若存在转义异常，可在传递文本前手动修复转义格式。

3. 排查依赖版本冲突 #

接入OpenTelemetry后可能引入了与react-markdown、remark-math、rehype-mathjax不兼容的依赖版本。可：

• 查看锁文件（package-lock.json/yarn.lock）确认相关包的版本兼容性；
• 更新所有Markdown渲染相关依赖到最新兼容版本，重新安装后测试。

内容的提问来源于stack exchange，提问作者Atul