Skip to content

TypeError in applyDefaultOptions during Sentry.init() - Cannot read properties of undefined (reading 'id') #18650

@aaqibqadeer

Description

@aaqibqadeer

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

10.32.1

Framework Version

"react": "^18.2.0",

Link to Sentry event

No response

Reproduction Example/SDK Setup

import * as Sentry from '@sentry/react';

Sentry.init({
dsn: process.env.REACT_APP_SENTRY_DSN, // this is correct, I have checked
environment: process.env.NODE_ENV || "development",
sendDefaultPii: true,
tracesSampleRate: 1.0,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({
maskAllText: false,
blockAllMedia: false,
}),
Sentry.httpClientIntegration({
failedRequestStatusCodes: [[400, 599]],
}),
Sentry.feedbackIntegration({
colorScheme: "system",
autoInject: false,
}),
],
enableLogs: true,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});

Steps to Reproduce

  1. Install Sentry package ("@sentry/react": "^10.32.1",)
  2. Call Sentry.init(config) with basic configuration mentioned in the docs
  3. Optional (add ErrorBoundary component) at the top level

Expected Result

Sentry should work fine

Actual Result

Sentry is not working and I am getting this error in the browser console

client.js:112 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at applyDefaultOptions (client.js:112:1)
    at new BrowserClient (client.js:22:1)
    at initAndBind (sdk.js:32:1)
    at init (sdk.js:108:1)
    at Module.init (sdk.js:15:1)
    at ./client.js (client.js:12:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1
    at startup:6:1

If I click applyDefaultOptions

function applyDefaultOptions(optionsArg) {
  return {
    release:
      typeof __SENTRY_RELEASE__ === 'string' // This allows build tooling to find-and-replace __SENTRY_RELEASE__ to inject a release value
        ? __SENTRY_RELEASE__
        : WINDOW.SENTRY_RELEASE?.id, , // This supports the variable that sentry-webpack-plugin injects // <---- this is the actual line
    sendClientReports: true,
    // We default this to true, as it is the safer scenario
    parentSpanIsAlwaysRootSpan: true,
    ...optionsArg,
  };
}

Additional Context

I have tried everything, debugging on my own, playing with configuration, google search, asking chatgpt, claude, and cursor. Maybe I am missing something but I can't figure out. Here is the report generated by cursor

Report

Sentry initialization fails with TypeError: Cannot read properties of undefined (reading 'id') when calling Sentry.init() with any configuration, including minimal configurations. The error occurs in Sentry's internal applyDefaultOptions function during BrowserClient initialization.

Environment

  • Package: @sentry/react
  • Version: 10.32.1
  • React Version: 18.2.0
  • Node Version: >=16.13.0
  • Build Tool: Webpack 5.66.0

Error Details

Error Message

TypeError: Cannot read properties of undefined (reading 'id')
    at applyDefaultOptions (client.js:112:1)
    at new BrowserClient (client.js:22:1)
    at initAndBind (sdk.js:32:1)
    at init (sdk.js:108:1)
    at Module.init (sdk.js:15:1)
    at ./client.js (client.js:18:1)

Impact

The application fails to load because Sentry initialization throws an uncaught error before React can render, completely blocking the application startup.

Steps to Reproduce

  1. Install @sentry/[email protected]
  2. Import Sentry: import * as Sentry from '@sentry/react'
  3. Call Sentry.init() with any of the following configurations:

Minimal Configuration (Fails)

Sentry.init({
  dsn: 'https://[email protected]/project-id'
});

With Empty Integrations (Fails)

Sentry.init({
  dsn: 'https://[email protected]/project-id',
  integrations: []
});

With Default Integrations (Fails)

Sentry.init({
  dsn: 'https://[email protected]/project-id',
  integrations: Sentry.getDefaultIntegrations()
});

With Explicit Transport/StackParser (Fails)

Sentry.init({
  dsn: 'https://[email protected]/project-id',
  transport: Sentry.makeFetchTransport,
  stackParser: Sentry.defaultStackParser,
  integrations: Sentry.getDefaultIntegrations()
});

Full Configuration (Fails)

Sentry.init({
  dsn: 'https://[email protected]/project-id',
  environment: 'development',
  sendDefaultPii: true,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.httpClientIntegration(),
    Sentry.feedbackIntegration()
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0
});

Result: All configurations fail with the same error.

Expected Behavior

Sentry should initialize successfully with any valid configuration, allowing the application to continue loading.

Actual Behavior

Sentry initialization throws TypeError: Cannot read properties of undefined (reading 'id') in the applyDefaultOptions function, preventing the application from loading.

Debugging Evidence

Verified Working Conditions

  • ✅ DSN is correctly formatted (verified: dsnType: 'string', dsnLength: 95)
  • ✅ Window object exists (windowExists: true)
  • ✅ Sentry module is properly loaded (sentryExists: true, sentryInitExists: true)
  • ✅ All expected Sentry functions are available (browserTracingIntegration, replayIntegration, makeFetchTransport, defaultStackParser, etc.)
  • ✅ Webpack DefinePlugin correctly injects environment variables
  • ✅ Default integrations function returns 9 integrations correctly

What We Tried

  1. Minimal config with only dsn - ❌ Failed
  2. Empty integrations: [] array - ❌ Failed
  3. Using getDefaultIntegrations() - ❌ Failed
  4. Explicit transport and stackParser - ❌ Failed
  5. Single integration (browserTracingIntegration) - ❌ Failed
  6. Different environment variables - ❌ Failed
  7. Monkey-patched Sentry.init to inspect options - All options correctly passed, error occurs in internal code

Workaround

Downgrading to @sentry/react@^8.55.0 resolves the issue. The same configuration works correctly with v8.

Code Example

import * as Sentry from '@sentry/react';

// This fails with the error
Sentry.init({
  dsn: 'https://fa64da5aba4c69be09dabb60ccb6ff89@o4510507237965824.ingest.us.sentry.io/4510625104396288'
});

Additional Context

  • The error occurs regardless of configuration options provided
  • The error is consistent across different webpack build configurations (dev, staging, production)
  • The issue appears to be in Sentry's internal initialization logic, not in user-provided configuration
  • The same code works correctly with @sentry/react@^8.55.0

Priority

React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    Waiting for: Product Owner

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions