Bug Report: Error with Default Integrations in @sentry/capacitor 1.0.1

[RobSchilderr]

Environment

Sentry versions (latest):

@sentry/capacitor version: 1.0.1
"@sentry/nextjs": "8.33.0",

Next.js version (latest of V13):

"next": "13.5.7"

Capacitor versions (latest):

    "@capacitor/browser": "^6.0.1",
    "@capacitor/camera": "^6.0.1",
    "@capacitor/cli": "^6.1.1",
    "@capacitor/core": "^6.1.1",
    "@capacitor/filesystem": "^6.0.0",
    "@capacitor/ios": "^6.1.1"

TypeScript version:

"typescript": "5.1.3"

Platform: Capacitor app running on iOS

Steps to Reproduce

1. Initialize Sentry in a Capacitor app using @sentry/capacitor version 1.0.1 with default integrations.

   // src/pages/_app.tsx
   import { useEffect } from 'react';
   import { Capacitor } from '@capacitor/core';
   import { App as CapApp } from '@capacitor/app';
   import * as Sentry from '@sentry/capacitor';

   useEffect(() => {
     const initSentry = async () => {
       if (Capacitor.isNativePlatform()) {
         const appInfo = await CapApp.getInfo();

         Sentry.init({
           dsn: 'YOUR_SENTRY_DSN',
           release: `${appInfo.id}@${appInfo.version}+${appInfo.build}`,
           enableOutOfMemoryTracking: false,
           // No customization of defaultIntegrations
         });
       }
     };

     initSentry().catch((err: Error) => {
       console.error(err);
     });
   }, []);

2. Build and run the Capacitor app on a device or emulator.
3. Perform any action that triggers network requests or other operations that Sentry might instrument.

Expected Result

• The app should run without any errors related to Sentry.
• Sentry should capture errors and performance data as configured.
• Default integrations should work as in previous versions without causing issues.

This used to work in the previous Sentry versions.

Actual Result

The app encounters runtime errors related to Sentry's default integrations. Error messages observed:

TypeError: Cannot create proxy with a non-object as target or handler

TypeError: A Proxy's 'target' should be an Object

Stack trace snippet:

  Cannot create proxy with a non-object as target or handler

  /_next/static/chunks/8363.5460f4c2d4fc202b.js in instrumentXHR at line 1:4143

  /_next/static/chunks/8363.5460f4c2d4fc202b.js in maybeInstrument at line 16:5949

  /_next/static/chunks/8363.5460f4c2d4fc202b.js in addXhrInstrumentationHandler at line 1:4028

  Object.setup at line 5:7634

These errors occur when Sentry tries to instrument XMLHttpRequest or related APIs. The issue did not occur in previous versions of @sentry/capacitor before version 1 and Sentry V8.

What you thought would happen.

Additional Info / My Thoughts:

• Impact: We get errors regarding this, not sure how important they are, it seems it doesn't affect the app itself.

• Is the issue is specifically with the XHR instrumentation?

Temporary solution:

• Disabling default integrations. What is the affect of this?

Questions

• Is there a known issue with default integrations in @sentry/capacitor version 1.0.1 causing these errors?

• Are there any recommended changes to configuration to resolve this without disabling default integrations?

• If disabling the default integrations is the solution for now: how do we add integrations with Sentry Capacitor and which ones should work?

Thanks for working on this package, it's crucial to us and we are happy that Sentry is recognising Capacitor!

[j-hennig]

The same error occurs with these dependencies:

"@sentry/capacitor": "1.0.0",
"@sentry/vue": "8.27.0",

Interestingly in our configuration only for android builds - for web and iOS everything works fine.

[lucas-zimerman]

Thank you for opening this issue! We will investigate further what's going on here.

[lucas-zimerman]

This issue is likely related to this one: https://github.com/getsentry/sentry-javascript/issues/14077

@j-hennig does it happen with any kind of requests? could you share a code snippet or sample of the code that is failing to log?

[NRodriguezcuellar]

Are you using the capacitor HTTP plugin? I am getting a similar error, and I have been able to prevent it by disabling the patching of fetch and XMLHTTPRequest.

Preferably they should work together as the Capacitor HTTP plugin stabilizes a lot of weird behaviour of using fetch on native platforms.

[lucas-zimerman]

One thing that could be done for the moment is instead of removing all integrations, add the breadcrumb integration and only disable the xhr option, example:

+ import { breadcrumbsIntegration, init as sentryAngularInit } from '@sentry/angular'; // or from @sentry/vue, @sentry/react,...
import * as Sentry from '@sentry/capacitor';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// ATTENTION: Change the DSN below with your own to see the events in Sentry. Get one at sentry.io
Sentry.init(
  {
    dsn:
      'https://[email protected]/5522756',
    // An array of strings or regexps that'll be used to ignore specific errors based on their type/message
    ignoreErrors: [/MiddleEarth_\d\d/, 'RangeError'],
    // To see what the Sentry SDK is doing; Helps when setting things up
    debug: true,
    // Whether SDK should be enabled or not
    enabled: true,
    // Use the tracing integration to see traces and add performance monitoring
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration({
        maskAllText: false,
        blockAllMedia: true,
      }),
+     breadcrumbsIntegration({
+      console: true,
+      dom: true,
+      fetch: true,
+      history: true,
+      xhr: false,
+    })
    ],
  },
  sentryAngularInit,
);

[NRodriguezcuellar]

I am not sure why but the even after disabling the breadcrumb integration the code that tries to add the XHR instrument still runs and causes the error, does it get called or bundled anyhow?

[lucas-zimerman]

This error should be fixed on the latest version, feel free to reopen this issue if the same persist for you