React项目中New Relic库函数在index.html可用但app.js中失效如何解决

问题原因 #

你动态创建script标签时设置了错误的type属性：text/jsx不属于浏览器默认会执行的JavaScript脚本类型，浏览器会直接跳过这段脚本的解析执行，自然没有初始化New Relic的全局NRJS相关变量，调用对应函数就会报不存在的错误。

修复方案 #

修改App.js中动态创建script的逻辑，删掉错误的type配置，同时建议把脚本插入到head标签中，和直接写在index.html里的执行时机更接近，避免漏统计页面加载早期的性能和错误数据。

修正后的代码如下：

import { useEffect } from "react";
import { newRelicConfig } from "./newRelic";
import "./styles.css";

export default function App() {
  useEffect(() => {
    let script = document.createElement("script");
    script.innerHTML = newRelicConfig(
      "3277692",
      "3277692",
      "NRJS-93eea892ddd7204acfd",
      "1091749869"
    );
    document.head.appendChild(script);
  }, []);
  return (
    <div className="App">
      <h1>New Relic</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

补充建议 #

如果对New Relic的监控数据完整性要求较高，更推荐直接把初始化脚本放在public/index.html的head标签顶部，避免React应用渲染延迟导致的早期数据漏采。如果必须做动态封装，确保初始化代码执行时没有依赖后续才加载的资源即可。

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