Is there an existing issue for this?
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)
Is there an existing issue for this?
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
Steps to Reproduce
We are making a typed axios request and awaiting the result.
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