React集成Sentry报错：_mergeOptions is not a function

按照Sentry官方文档配置React（v18+）与Sentry（v7+）集成React Router，但无法正常工作。所有上报到Sentry的问题都会触发如下报错：

TypeError ?(bundle)
o._mergeOptions is not a function

堆栈追踪指向./node_modules/@sentry/core/esm/integrations/inboundfilters.js，说明问题出在Sentry端。

React入口代码 #

import ReactDOM from 'react-dom/client';
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromChildren,
  matchRoutes,
  useLocation,
  useNavigationType,
} from 'react-router-dom';
import './assets/styles/global.css';
import reportWebVitals from './reportWebVitals';
import Home from './pages/home';
import Error from './pages/error';
import MyAppointments from './pages/my-appointments';
import Meetings from './pages/meetings';
import CancelAppointment from './pages/cancel-appointment';
import { useEffect } from 'react';

// basic sentry setup without react-router
// if (process.env.REACT_APP_SENTRY_DSN) {
//   Sentry.init({
//     dsn: process.env.REACT_APP_SENTRY_DSN,
//     integrations: [new BrowserTracing()],
//     environment: process.env.NODE_ENV,
//     tracesSampleRate: 1.0),
//     release: process.env.REACT_APP_SENTRY_RELEASE,
//   });
// }

// sentry setup with react-router instrumentation
if (process.env.REACT_APP_SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
          useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes,
        ),
      }),
    ],
    tracesSampleRate: parseFloat(process.env.REACT_APP_SENTRY_TRACES_SAMPLE_RATE || '0.2'),
    environment: process.env.NODE_ENV,
    release: process.env.REACT_APP_SENTRY_RELEASE,
  });
}

const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouter);
const router = sentryCreateBrowserRouter([
  {
    path: '/',
    element: <Home />,
    errorElement: <Error />,
  },
  {
    path: '/my_appointments',
    element: <MyAppointments />,
    errorElement: <Error />,
  },
  {
    path: '/meetings',
    element: <Meetings />,
    errorElement: <Error />,
  },
  {
    path: '/cancel_appointment',
    element: <CancelAppointment />,
    errorElement: <Error />,
  },
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <RouterProvider router={router} />,
);

reportWebVitals();

依赖版本 #

"dependencies": {
    "@sentry/react": "^7.34.0",
    "@sentry/tracing": "^7.35.0",
    "axios": "^1.2.3",
    "dayjs": "^1.11.7",
    "react": "^18.2.0",
    "react-countdown": "^2.3.5",
    "react-dom": "^18.2.0",
    "react-router-dom": "6",
    "react-scripts": "5.0.1",
    "simple-crypto-js": "^3.0.1",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.0"
  },

在MyAppointments页面添加测试异常throw new Error('testing sentry error report');，但始终触发上述报错。即使硬编码环境变量或使用不带React Router instrumentation的基础配置，问题依然存在。

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