Next.js 14点击Link时Sentry记录undefined错误求助

问题描述 #

我在Next.js 14项目中集成了Sentry用于捕获错误，点击Link组件时，Sentry会记录一条奇怪的undefined错误。错误日志如下：

Breadcrumbs

Exception - This event
error
09:56:27.000
Error: undefined

Navigation
info
09:56:27.740

{
  from: /route,
  to: /route/subroute
}

Fetch
info
09:56:27.688
GET: https://app.com/route/subroute?_rsc=1pqyf [200]

{
  __span: b5ac28fa601b4aa2
}

从请求中的_rsc查询参数推测，该问题可能与Next.js预取机制有关。我已尝试为Link添加prefetch={false}，但错误仍会记录，请问该如何解决？

可行解决方法 #

1. 过滤Sentry误报错误 #

在Sentry客户端配置中添加过滤逻辑，排除RSC导航触发的Error: undefined误报：

// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  // 现有配置...
  beforeSend(event) {
    // 匹配目标错误特征并跳过上报
    if (
      event.exception?.values?.[0]?.value === 'Error: undefined' &&
      event.breadcrumbs?.some(breadcrumb => 
        breadcrumb.category === 'fetch' && breadcrumb.data?.url?.includes('_rsc=')
      )
    ) {
      return null;
    }
    return event;
  },
});

2. 全局禁用预取 #

单个Link的prefetch={false}可能无法覆盖所有RSC预取场景，直接在next.config.js中全局禁用：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    prefetchPages: false,
  },
};

module.exports = nextConfig;

3. 给RSC组件添加错误处理 #

检查目标路由的服务端组件，确保异步操作有错误捕获，避免抛出未定义错误：

// app/route/subroute/page.js
async function SubroutePage() {
  try {
    const data = await fetchYourData();
    return <div>{data.content}</div>;
  } catch (err) {
    console.error('加载子路由数据失败:', err);
    return <div>加载失败，请稍后重试</div>;
  }
}

export default SubroutePage;

4. 更新依赖版本 #

兼容性问题可能由版本不匹配导致，更新到最新稳定版的Sentry和Next.js：

npm update @sentry/nextjs next
# 或使用yarn
yarn upgrade @sentry/nextjs next

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