Error events not automatically reported to Sentry when running on device or emulator

[rodolfoBee]

Environment

Capacitor SDK v0.18.0 Framework: React/Remix in SPA mode

Steps to Reproduce

Initialise the SDK as the following:

import { RemixBrowser } from '@remix-run/react'
import { startTransition, StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'
import * as Sentry from '@sentry/capacitor'
import * as SentryReact from '@sentry/react'
Sentry.init(
  {
    enabled: import.meta.env.PROD,
    dsn: '__MY_DSN__',
    integrations: [
      SentryReact.browserTracingIntegration({
        tracePropagationTargets: ['localhost'],
      }),
      SentryReact.replayIntegration({
        maskAllInputs: true,
        maskAllText: false,
        blockAllMedia: false,
        networkDetailAllowUrls: ['[redacted]'],
        // networkRequestHeaders: ['Cookie', 'X-Fallback-Cookies'],
      }),
      SentryReact.captureConsoleIntegration({
        levels: ['log', 'warn'],
      }),
    ],
    // Performance Monitoring
    tracesSampleRate: 1.0, 
    // Session Replay
    replaysSessionSampleRate: 0.1, 
    replaysOnErrorSampleRate: 1.0, 
  },
  // Forward the init method from @sentry/react
  SentryReact.init,
)

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>,
  )
})

After initialisation, the app will try to execute an undefined function and run into an error. This happens automatically after initialisation.

Expected Result

Events are reported to Sentry on all environments.

Actual Result

Events are correctly reported when running in a browser, but are not captured by the SDK when running the app on an ios device or emulator. Logs: https://gist.github.com/devo-devo/0a6090c08dc880db3a87410197ce8475

The workaround was to add captureException method in the errorBoundary component: https://gist.github.com/devo-devo/e4e6b37511c8453b70f41afaaff9b197 https://gist.github.com/devo-devo/780c62fabc6f7fb0dbfb150811634926

Removing the errorBoundary has no effect on the final result, the errors are not captured on the device.

Original report

[lucas-zimerman]

Since the project is using Remix, it is recommended to use Sentry Remix instead of React (using version 7.114.0).

The setup for Remix is different, so I recommend using the following documentation to set up Sentry with it: Sentry Remix Manual Setup.

Sentry Capacitor is currently not officially supported by Remix. Ideally, you should use the Sentry Remix SDK by itself. However, you can also use Sentry Capacitor with it. The difference is that in entry.client.tsx, you initialize Sentry Capacitor along with the Remix SDK. On the server side, you only initialize the Remix SDK.

[devo-devo]

I'm using Remix in SPA mode, which essentially builds everything into a client side app of only html and js - so I won't need to initialize on the server side.

Is it confirmed that deploying to a simulator or device using sentry/remix & sentry/capacitor on the client side captures the exceptions w/o the manual workarounds? Is there en example Sentry.init for the client side that you've found works in this scenario?

[lucas-zimerman]

I would recommend following this setup for using Remix with Capacitor for the time being