NextJS集成New Relic后XHR请求错误未被日志记录的问题

以下是几个可行的配置和调整方案，按优先级尝试：

1. 修正AJAX过滤与错误捕获配置 #

你的NREUM.init中配置了ajax.deny_list，如果该列表包含产生4xx/5xx错误的请求路径，这类请求会被New Relic忽略。同时需显式开启AJAX错误捕获开关：

;window.NREUM||(NREUM={});NREUM.init={
  distributed_tracing:{enabled:true},
  privacy:{cookies_enabled:true},
  ajax:{deny_list:[]}, // 清空或移除不需要过滤的请求路径
  error_collector:{ // 新增该配置，启用AJAX错误捕获
    enable:true,
    capture_ajax_errors:true
  }
};
// 其余loader_config、info配置保持不变

error_collector.capture_ajax_errors是自动捕获XHR HTTP错误的核心开关，显式配置后New Relic会监听XHR请求的状态码并上报4xx/5xx错误。

2. 确保New Relic脚本在客户端正确加载 #

NextJS的服务端渲染特性可能导致传统<script>标签加载时机异常，建议改用NextJS官方的next/script组件加载脚本，确保仅在客户端执行：

// 在pages/_app.js中添加
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script src="/js/newrelic.js" strategy="lazyOnload" />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

strategy="lazyOnload"会在页面空闲时加载脚本，避免阻塞渲染，同时确保脚本在客户端环境正常运行。

3. 手动捕获XHR/Fetch错误（兜底方案） #

如果自动配置仍不生效，可通过手动监听请求事件，调用New Relic的noticeError方法上报错误：

监听XHR错误 #

// 在pages/_app.js的useEffect中添加
useEffect(() => {
  const handleXhrLoad = (event) => {
    const xhr = event.target;
    if (xhr.status >= 400 && window.NREUM) {
      window.NREUM.noticeError(
        new Error(`XHR请求错误: ${xhr.status} ${xhr.statusText}`),
        { url: xhr.responseURL, method: xhr.method, status: xhr.status }
      );
    }
  };

  // 重写XHR的open方法，绑定监听事件
  const originalOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url) {
    this.addEventListener('load', handleXhrLoad);
    originalOpen.call(this, method, url);
  };

  return () => {
    XMLHttpRequest.prototype.open = originalOpen;
  };
}, []);

监听Fetch错误 #

如果项目使用fetch而非XHR，可重写fetch方法捕获错误：

// 在pages/_app.js的useEffect中添加
useEffect(() => {
  const originalFetch = window.fetch;
  window.fetch = async (...args) => {
    const response = await originalFetch(...args);
    if (!response.ok && window.NREUM) {
      window.NREUM.noticeError(
        new Error(`Fetch请求错误: ${response.status} ${response.statusText}`),
        { url: args[0], method: response.method, status: response.status }
      );
    }
    return response;
  };

  return () => {
    window.fetch = originalFetch;
  };
}, []);

验证配置 #

修改配置后，触发一次XHR/Fetch的4xx/5xx请求，等待数分钟后查看New Relic的Errors面板，确认错误是否被记录。

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