_mergeOptions is not a function at React SDK

[matheusgoc]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

^7.34.0

Framework Version

react ^18.2.0

Link to Sentry event

https://ventricle-health.sentry.io/issues/3910525852

SDK Setup

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: parseFloat(process.env.REACT_APP_SENTRY_TRACES_SAMPLE_RATE || '0.2'),
//     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} />,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Steps to Reproduce

1. create a React app with CRA
2. set up React Router
3. set up Sentry React SDK
4. start react app by yarn start

Expected Result

Should not report an issue to Sentry since there isn't any.

Actual Result

It reports the following issue to Sentry:

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

pointing to ./node_modules/@sentry/core/esm/integrations/inboundfilters.js which suggest that this is might be a issue on Sentry.

Even forcing an error it will always report Sentry like that. There are similar tickets related but none of them address React SDK or has a reasonable solution:

#2622
#5572
#4956
#2622
#4118

I appreciate any help! I've tried all possibilities and couldn't solve that out.

[Lms24]

Hi @matheusgoc thanks for writing in! Usually such errors occur for two reasons:

• Installed Sentry packages are not aligned to the same version: Please check if all your @sentry/ (react, browser, core, utils, types, tracing, etc.) packages are updated to the latest version. It's best to check your lock file for that.
  • I think this might be the case here, as the error message suggests that the method we replaced with a function in ref(core): Reduce inboundfilters bundle size #4625 is still called.
• Multiple Sentry instances on different versions collide on one page. This happens for instance, if people are using browser extensions that use Sentry or third party scripts that include Sentry are used

[matheusgoc]

Hey @Lms24, thank you so much for the answer. You help me found it out. 💪🏾 There was a third party library called OnschedJS which uses Sentry internally. It works fine when I take it out. The problem is that this library must be added by script tags instead of npm dependencies. I found out so how to manipulate it to not get conflicted with my Sentry set up.

[AbhiPrasad]

@matheusgoc glad you were able to figure it out!

I assume the 3rd party script comes from: https://onsched.com/ - we're going to reach out and ask them to not use Sentry for these cases (or at least avoid patching the global integrations). Sentry is meant to instrument applications, not libraries.

[matheusgoc]

Yep @AbhiPrasad you're right! That's belong from onsched.com. They have a kind of UI elements library to interact with their API: https://docs.onsched.com/docs/onschedjs-overview. Would be nice to tell them to not use Sentry then. Thank you!