Unable to add config for reactInit when using electron package

[kyeshmz]

Is there an existing issue for this?

• [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [x] I have reviewed the documentation https://docs.sentry.io/
• [x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Electron SDK Version

^5.9.0

Electron Version

33.2.1

What platform are you using?

MacOS

Link to Sentry event

No response

Steps to Reproduce

electronInit(
    {
      integrations: [
        ElectronSentry.browserTracingIntegration(),
        ElectronSentry.replayIntegration()
      ],
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production
      // Learn more at
      // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
      tracesSampleRate: 1.0,

      // Capture Replay for 10% of all sessions,
      // plus for 100% of sessions with an error
      // Learn more at
      // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0
      /* config */
    },
    reactInit
  )

Expected Result

Be able to plugin custom configs for @sentry/react Kind of reactInit({ my custom config like })

Actual Result

Argument of type 'Client<ClientOptions<BaseTransportOptions>> | undefined' is not assignable to parameter of type '((if_you_get_a_typescript_error_ensure_sdks_use_version_v8_47_0: { integrations: { name: string; afterAllSetup(client: Client<ClientOptions<BaseTransportOptions>>): void; }[]; tracesSampleRate: number; replaysSessionSampleRate: number; replaysOnErrorSampleRate: number; }) => void) | undefined'.
  Type 'Client<ClientOptions<BaseTransportOptions>>' is not assignable to type '(if_you_get_a_typescript_error_ensure_sdks_use_version_v8_47_0: { integrations: { name: string; afterAllSetup(client: Client<ClientOptions<BaseTransportOptions>>): void; }[]; tracesSampleRate: number; replaysSessionSampleRate: number; replaysOnErrorSampleRate: number; }) => void'

and I can confirm that I am using ^v8.47.0

[timfish]

Rather than use a caret ^8.47.0, you need to specify a specific version 8.47.0 otherwise your package manager will use the latest patch version 8.48.0.

[kyeshmz]

Does this mean that it will not be supported from 8.48.0 onwards?

[timfish]

No.

Once this issue gets closed, v5.10.0 of the Electron SDK will be published which uses v8.48.0 of the JavaScript SDKs.

[kyeshmz]

Dope! Will keep this open just for reference for other people and once it lands, I will close.

[kyeshmz]

Sadly this issue still seems to persist even with

  "@sentry/electron": "^5.10.0",
    "@sentry/react": "^8.50.0"

I have also tried just using without the carrot but with no results I have it configured both in the pnpm catalog, but still have the same type error

  '@sentry/[email protected]':
    resolution: {integrity: sha512-eomrwbXMEn3UBEZxgDPVDlT0SBIYjVXAY5TOKZOVvllVMdg0JlGcC1mG5g+hf0wpicbxnFrVjfiuASqT5R0ahA==}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-pnprAuUOc8cxnJdZA09hutHXNsbQZoDgzf3zPyXMNx0ewB/RviFMOgfe7ViX1mIB/oVrcFenXBgO5uvTd7JwPg==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-1JLXgmIvD3T7xn9ypwWW0V3GirNy4BN2fOUbZau/nUX/Jj5DttSoPn7x7xTaPSpfaA24PiP93zXmJEfZvCk00Q==}
    engines: {node: '>=14.18'}
    peerDependencies:
      '@opentelemetry/api': ^1.9.0
      '@opentelemetry/core': ^1.29.0
      '@opentelemetry/instrumentation': ^0.56.0
      '@opentelemetry/sdk-trace-base': ^1.29.0
      '@opentelemetry/semantic-conventions': ^1.28.0

  '@sentry/[email protected]':
    resolution: {integrity: sha512-qkDW5dieROPDf0uk1usXib/SLZTEveN5jvKgBFd+HKWz5JNu+M7L53t9KdZ7ryn4T68utI/LWs4qR3QhmXzUbQ==}
    engines: {node: '>=14.18'}
    peerDependencies:
      react: ^16.14.0 || 17.x || 18.x || 19.x

[timfish]

You need to use the same version of @sentry/react that @sentry/electron uses for it's Sentry dependencies.

So for v5.10.0, you should use v8.48.0:

https://github.com/getsentry/sentry-electron/blob/b6375599e2b3c41d20efa3cea40cba416565f012/package.json#L63-L65

You should also not use a caret version (^8.48.0) because this will not use a specific version.

Your versions should be specified like this:

 "@sentry/electron": "5.10.0",
 "@sentry/react": "8.48.0"

[kyeshmz]

Even with

 "@sentry/electron": "5.10.0",
 "@sentry/react": "8.48.0"

this issue still does not resolve

I am using pnpm 10 with below if this changes any of the deps

node-linker=hoisted
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
shamefully-hoist=true
auto-install-peers = true
public-hoist-pattern=*

[timfish]

What @sentry/* dependencies do you have in your lock file?

[kyeshmz]

This is my pnpm lock, I dont know which parts are relevant

I also want to point out that it is a pnpm monorepo

  '@sentry/[email protected]':
    resolution: {integrity: sha512-AJEt9UtU9euB6tDLRQRpCl0EUvY5UlDQEaMSu948OHC+E2jEDoh9RzmfxtqKaDhjT/6WO6g4UoSBNOLxdZkptw==}
    engines: {node: '>= 14'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-fuuVULB5/1vI8NoIwXwR3xwhJJqk+y4RdSdajExGF7nnUDBpwUJyXsmYJnOkBO+oLeEs58xaCpotCKiPUNnE3g==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-aGJSpuKiHVKkLvd1VklJSZ2oCsl4wcKUVxKIa8dhJC8KjDY0vREQCywrlWuS5KYP0xFy4k28pg6PPR3HKkUlNw==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-vQofxVcdCxogQG4XZ41h4G07lspmN1SXOf30PgdDrR5JSleZrlevtDVbqadX2nMpSRxtyweL1jzzZ01+AMzoXg==}
    engines: {node: '>= 14'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-kiNGNSAkg46LNGatfNH5tfsmI/kCAaPA62KQuFZloZiemTNzhy9/6NJP8HZ/GxGs8GDMxic6wNrV9CkVEgFLJQ==}
    engines: {node: '>=10'}
    os: [darwin]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-5VbVJDatolDrWOgaffsEM7znjs0cR8bHt9Bq0mStM3tBolgAeSDHE89NgHggfZR+DJ2VWOy4vgCwkObrUD6NQw==}
    engines: {node: '>=10'}
    cpu: [arm64]
    os: [linux, freebsd]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-DkENbxyRxUrfLnJLXTA4s5UL/GoctU5Cm4ER1eB7XN7p9WsamFJd/yf2KpltkjEyiTuplv0yAbdjl1KX3vKmEQ==}
    engines: {node: '>=10'}
    cpu: [arm]
    os: [linux, freebsd]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-pXWVoKXCRrY7N8vc9H7mETiV9ZCz+zSnX65JQCzZxgYrayQPJTc+NPRnZTdYdk5RlAupXaFicBI2GwOCRqVRkg==}
    engines: {node: '>=10'}
    cpu: [x86, ia32]
    os: [linux, freebsd]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-IwayNZy+it7FWG4M9LayyUmG1a/8kT9+/IEm67sT5+7dkMIMcpmHDqL8rWcPojOXuTKaOBBjkVdNMBTXy0mXlA==}
    engines: {node: '>=10'}
    cpu: [x64]
    os: [linux, freebsd]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-NglnNoqHSmE+Dz/wHeIVRnV2bLMx7tIn3IQ8vXGO5HWA2f8zYJGktbkLq1Lg23PaQmeZLPGlja3gBQfZYSG10Q==}
    engines: {node: '>=10'}
    cpu: [x86, ia32]
    os: [win32]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-xv0R2CMf/X1Fte3cMWie1NXuHmUyQPDBfCyIt6k6RPFPxAYUgcqgMPznYwVMwWEA1W43PaOkSn3d8ZylsDaETw==}
    engines: {node: '>=10'}
    cpu: [x64]
    os: [win32]

  '@sentry/[email protected]':
    resolution: {integrity: sha512-JIb3e9vh0+OmQ0KxmexMXg9oZsR/G7HMwxt5BUIKAXZ9m17Xll4ETXTRnRUBT3sf7EpNGAmlQk1xEmVN9pYZYQ==}
    engines: {node: '>= 10'}
    hasBin: true

  '@sentry/[email protected]':
    resolution: {integrity: sha512-i+NITuKoK5wVrzKx3TAdhRJ1OoXMak/+/w0TvTY8K3qJudqJOgAb5u2a7cJHCpCyZ1VPMUq/ZvSjksE+K2zHOA==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-VGwYgTfLpvJ5LRO5A+qWo1gpo6SfqaGXL9TOzVgBucAdpzbrYHpZ87sEarDVq/4275uk1b0S293/mfsskFczyw==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-q71m8Ha9YGwqn4Gd7sWvcFTRgbHXxEfU4QeIFtwMBpwHfq2Q+9koiF8DOoOHqIEOsnlvZWRQgGggIOdHzajnVw==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-eomrwbXMEn3UBEZxgDPVDlT0SBIYjVXAY5TOKZOVvllVMdg0JlGcC1mG5g+hf0wpicbxnFrVjfiuASqT5R0ahA==}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-pnprAuUOc8cxnJdZA09hutHXNsbQZoDgzf3zPyXMNx0ewB/RviFMOgfe7ViX1mIB/oVrcFenXBgO5uvTd7JwPg==}
    engines: {node: '>=14.18'}

  '@sentry/[email protected]':
    resolution: {integrity: sha512-1JLXgmIvD3T7xn9ypwWW0V3GirNy4BN2fOUbZau/nUX/Jj5DttSoPn7x7xTaPSpfaA24PiP93zXmJEfZvCk00Q==}
    engines: {node: '>=14.18'}
    peerDependencies:
      '@opentelemetry/api': ^1.9.0
      '@opentelemetry/core': ^1.29.0
      '@opentelemetry/instrumentation': ^0.56.0
      '@opentelemetry/sdk-trace-base': ^1.29.0
      '@opentelemetry/semantic-conventions': ^1.28.0

  '@sentry/[email protected]':
    resolution: {integrity: sha512-J8XAUOJYbsjXnowTEXE+zWJWLWUzQGP8kMb+smoGdRzFJwwXKrbE709Kr/Boz6rK48EbbRT4UUINoTbHgL3RHQ==}
    engines: {node: '>=14.18'}
    peerDependencies:
      react: ^16.14.0 || 17.x || 18.x || 19.x

  '@sentry/[email protected]':
    resolution: {integrity: sha512-qkDW5dieROPDf0uk1usXib/SLZTEveN5jvKgBFd+HKWz5JNu+M7L53t9KdZ7ryn4T68utI/LWs4qR3QhmXzUbQ==}
    engines: {node: '>=14.18'}
    peerDependencies:
      react: ^16.14.0 || 17.x || 18.x || 19.x

  '@sentry/[email protected]':
    resolution: {integrity: sha512-E2elyHjP3Wqnk2uXr9C17jHRQBKX8jEOpzOnEOiXYDI2FBfehs9ttj9yX1I7H8ofCiqO2EsTu5r2a0C26ZWi+w==}
    engines: {node: '>= 14'}

[timfish]

Maybe some kind of pnpm hoisting issue?

Set all @sentry/* dependencies in every package.json in your monorepo to 8.48.0 apart from @sentry/electron which should be 5.10.0.

pnpm list --recursive should point to any dependencies not matching those two versions.

Alternatively, if you share a repository reproducing the issue I can take a look!

[kyeshmz]

This a reproduce, even without other dependencies, it still gives typescript errors

https://github.com/kyeshmz/t3-sentry-reproduce

[timfish]

The docs example for using framework specific SDKs with the Electron SDK says to do this:

import { init } from "@sentry/electron/renderer";
import { init as reactInit } from "@sentry/react";

init(
  {
    /* config */
  },
  reactInit,
);

You are doing this:

import { init } from "@sentry/electron/renderer";
import { init as reactInit } from "@sentry/react";

init(
  {
    /* config */
  },
  reactInit({}), // <- this is wrong!
);

[kyeshmz]

The goal and my initial question is to be able to do things like below. Is this not possible?

import { init } from "@sentry/electron/renderer";
import { init as reactInit } from "@sentry/react";

init(
  {
    /* config */
  },
  reactInit({
// ... and other react integrations
 integrations: [
    // See docs for support of different versions of variation of react router
    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
    Sentry.replayIntegration(),
  ],
}),
);

[timfish]

You pass the config where it says /* config */

init({
     integrations: [
      Sentry.reactRouterV6BrowserTracingIntegration({
        useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes,
      }),
      Sentry.replayIntegration(),
    ],
  },
  reactInit,
);

[kyeshmz]

So even if that init is electron, you can still pass react configs? Oh that is very not apparent in just this line https://docs.sentry.io/platforms/javascript/guides/electron/#framework-specific-sdks

I also was not able to confirm that it works

[timfish]

Oh that is very not apparent in just this line

I've opened a PR to improve the docs:

• https://github.com/getsentry/sentry-docs/pull/12429

I also was not able to confirm that it works

We have e2e tests for this. What is not working? Any build error or runtime console output?

[kyeshmz]

I cannot seem to fire react errors even with a config, I've updated the repo to show that I fire an error, but it is uncaught by sentry. Anything that is inside of the node env is.

[timfish]

Sorry, I dropped the ball on this.

Did you manage to get it working? I looked at your repository and couldn't work out how to run the app!

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀