TypeError: Cannot set properties of undefined (setting 'Accept')

[kelnei]

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 SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/react

SDK Version

7.47.0

Framework Version

React 18.2.0, Axios 1.3.5

Link to Sentry event

https://sentry.io/organizations/fullbeakercom/issues/4065197371/events/4fed505225e1467d9ba84d2e607105bc/?project=1274657

SDK Setup

import {
  BrowserClient,
  BrowserTracing,
  Hub,
  defaultIntegrations,
  defaultStackParser,
  makeFetchTransport,
} from '@sentry/react'

export const init = (options: { dsn: string; environment?: string }) => {
  const release =
    options.environment === 'production'
      ? process.env.RELEASE
      : process.env.RELEASE + '-' + process.env.GIT_SHA
  const tracesSampleRate = options.environment === 'production' ? 0.01 : 1.0

  hub = new Hub(
    new BrowserClient({
      ...options,
      transport: makeFetchTransport,
      stackParser: defaultStackParser,
      integrations: [...defaultIntegrations, new BrowserTracing()],
      release,
      tracesSampleRate,
      dist: process.env.GIT_SHA,
    }),
  )
}

// ... in src/index.tsx
  init({
    dsn: process.env.REACT_APP_SENTRY_URL,
    environment,
  })

Steps to Reproduce

We are making a typed axios request and awaiting the result.

return (await axios.get<ReturnType>(url, { params })).data

And for some reason the internal sentry_xhr object doesn't not have a request_headers property and so setting the Accept header fails.

Expected Result

I expect Sentry's instrumentation not to cause an exception when intercepting the XHR.

Actual Result

[Stack Trace]

TypeError: Cannot set properties of undefined (setting 'Accept')
  at setRequestHeader(./node_modules/@sentry/src/instrument.ts:307:1)
  at call(./node_modules/axios/lib/adapters/xhr.js:196:17)
  at forEach(./node_modules/axios/lib/utils.js:261:10)
  at <anonymous>(./node_modules/axios/lib/adapters/xhr.js:195:13)
  at new Promise(<anonymous>)
  at knownAdapters.xhr(./node_modules/axios/lib/adapters/xhr.js:49:10)
  at dispatchRequest(./node_modules/axios/lib/core/dispatchRequest.js:51:10)
  at <object>.value(./node_modules/axios/lib/core/Axios.js:148:33)
  at Axios.prototype[method](./node_modules/axios/lib/core/Axios.js:174:17)
  at axios(./node_modules/axios/lib/helpers/bind.js:5:15)
  at call(./src/api/dashboard.ts:83:11)
  at tryCatch(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:44:17)
  at _invoke(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:125:22)
  at key(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:69:21)
  at asyncGeneratorStep(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:20)
  at _next(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:9)
  at <anonymous>(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:7)
  at new Promise(<anonymous>)
  at apply(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:19:12)
  at getFormById(./src/api/dashboard.ts:66:25)
  at call(./src/actions/fetchInitialData.ts:247:16)
  at tryCatch(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:44:17)
  at _invoke(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:125:22)
  at key(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:69:21)
  at asyncGeneratorStep(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:20)
  at _next(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:9)
  at <anonymous>(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:7)
  at new Promise(<anonymous>)
  at apply(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:19:12)
  at fetchInitialData(./src/actions/fetchInitialData.ts:244:30)
  at call(./src/hooks/useLoadForm.ts:38:19)
  at tryCatch(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:44:17)
  at _invoke(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:125:22)
  at key(./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:69:21)
  at asyncGeneratorStep(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:20)
  at _next(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:9)
  at <anonymous>(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:7)
  at new Promise(<anonymous>)
  at apply(./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:19:12)
  at initialize(./src/hooks/useLoadForm.ts:29:21)
  at d(./src/hooks/useLoadForm.ts:50:5)
  at Rj(./node_modules/react-dom/cjs/react-dom.production.min.js:244:332)
  at Ik(./node_modules/react-dom/cjs/react-dom.production.min.js:286:111)
  at Fk(./node_modules/react-dom/cjs/react-dom.production.min.js:273:185)
  at jg(./node_modules/react-dom/cjs/react-dom.production.min.js:127:105)
  at Xk(./node_modules/react-dom/cjs/react-dom.production.min.js:283:470)
  at Qk(./node_modules/react-dom/cjs/react-dom.production.min.js:281:398)
  at Hk(./node_modules/react-dom/cjs/react-dom.production.min.js:270:269)
  at J(./node_modules/scheduler/cjs/scheduler.production.min.js:13:203)
  at R(./node_modules/scheduler/cjs/scheduler.production.min.js:14:128)

[MalkovVladimir]

+++, have same bug after deps update

[MalkovVladimir]

@kelnei I've solved it by aligning sentry packages version (tracing had newer version than core sentry package)

[lforst]

@kelnei can you verify that all your Sentry package versions are aligned as @MalkovVladimir suggested?

[mydea]

@kelnei I've solved it by aligning sentry packages version (tracing had newer version than core sentry package)

Side note, you do not need to install @sentry/tracing anymore - you can remove it from your package.json and just import directly from e.g. @sentry/browser instead! This way, dependencies can't go out of sync anymore that easily.

[kelnei]

@kelnei can you verify that all your Sentry package versions are aligned as @MalkovVladimir suggested?

In this specific project, I'm only using @sentry/react, and importing BrowserTracing directly from that (as part of the upgrade to 7.47.0), so it's not a misalignment in the current project, but I do think you and @MalkovVladimir are right. We run multiple instances of Sentry, this bundle is ran on multiple sites and includes it's own monitoring (hence the reason it uses Hub directly and not Sentry.init), but some of these sites use their own Sentry JS too and that's where the version misalignment is.

[kelnei]

I was able to test this in one of our staging environments by deploying our bundle and simultaneously updating the sentry bundle on one of our sites, and the error did indeed go away when aligning the versions of the multiple instances of sentry on the page.

[surger]

Have a same problem

[lforst]

@surger Please align all the versions of your Sentry dependencies.

[lforst]

Closing this as it seems solvable by aligning dependencies.

[aleksandr-gorokhov]

My code is embedded into other website, which has their own version of sentry installed. I can't control it, had to rollback sentry update from 7.47.0 back to 6.11.0.
Pay attention to this issue please.

@lforst Can you reopen, please?

[lforst]

@puwka makes sense. A fix for this is incoming: #7836