sentry-react-native icon indicating copy to clipboard operation
sentry-react-native copied to clipboard

Call stack exception (crash) when Tracing is used in combination with core-js and fetch

Open laurensk opened this issue 1 year ago • 8 comments

What React Native libraries do you use?

React Navigation, Hermes, React Native without Frameworks

Are you using sentry.io or on-premise?

on-premise (Self-Hosted)

@sentry/react-native SDK Version

6.0.0

How does your development environment look like?

info Fetching system and libraries information... System: OS: macOS 14.7 CPU: (12) arm64 Apple M2 Max Memory: 1.23 GB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.19.0 path: ~/.nvm/versions/node/v18.19.0/bin/node Yarn: Not Found npm: version: 10.2.3 path: ~/.nvm/versions/node/v18.19.0/bin/npm Watchman: version: 2024.09.30.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /Users/laurens/.rbenv/shims/pod SDKs: iOS SDK: Platforms: - DriverKit 23.5 - iOS 17.5 - macOS 14.5 - tvOS 17.5 - visionOS 1.2 - watchOS 10.5 Android SDK: Not Found IDEs: Android Studio: 2023.3 AI-233.14808.21.2331.11842104 Xcode: version: 15.4/15F31d path: /usr/bin/xcodebuild Languages: Java: version: 17.0.11 path: /opt/homebrew/opt/openjdk@17/bin/javac Ruby: version: 3.2.2 path: /Users/laurens/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.75.4 wanted: 0.75.4 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Sentry.init()

Sentry.init({ dsn: '<MY_DSN>, tracesSampleRate: 1.0, });

Steps to Reproduce

  1. Have "tracesSampleRate" enabled in Sentry.init
  2. Start bundler
  3. Install and open native application
  4. Loop/Crash happens

Expected Result

The app should start and tracing should work.

Actual Result

The app hangs in an infinite loop, the console logs:

RangeError: Maximum call stack size exceeded (native stack depth), js engine: hermes

laurensk avatar Oct 18 '24 07:10 laurensk

Hi @laurensk, thank you for the message,

I have a few more questions?

Have you upgraded from v5? If so, from what version?

Do you have any other @sentry/* dependencies installed? If so, which ones and what versions?

krystofwoldrich avatar Oct 18 '24 09:10 krystofwoldrich

Hi,

it's a fresh install into the project, so no upgrade.

No, only have "@sentry/react-native": "^6.0.0", in my package.json.

Thank you very much for looking into this - I really tried a lot before opening this issue and just couldn't fix it.

laurensk avatar Oct 18 '24 09:10 laurensk

Thank you,

could you add debug: true to your Sentry.init?

Sentry.init({
debug: true,
dsn: '<MY_DSN>,
tracesSampleRate: 1.0,
});

And share with us the JS logs leading to the RangeError.

krystofwoldrich avatar Oct 21 '24 09:10 krystofwoldrich

Sure, here is my output:

 LOG  Sentry Logger [log]: Unhandled promise rejections will be caught by Sentry.
 LOG  Sentry Logger [log]: Integration installed: ReactNativeErrorHandlers
 LOG  Sentry Logger [log]: Integration installed: NativeLinkedErrors
 LOG  Sentry Logger [log]: Integration installed: InboundFilters
 LOG  Sentry Logger [log]: Integration installed: FunctionToString
 LOG  Sentry Logger [log]: Integration installed: Breadcrumbs
 LOG  Sentry Logger [log]: Integration installed: Dedupe
 LOG  Sentry Logger [log]: Integration installed: HttpContext
 LOG  Sentry Logger [log]: Integration installed: Release
 LOG  Sentry Logger [log]: Integration installed: EventOrigin
 LOG  Sentry Logger [log]: Integration installed: SdkInfo
 LOG  Sentry Logger [log]: Integration installed: ReactNativeInfo
 LOG  Sentry Logger [log]: Integration installed: DebugSymbolicator
 LOG  Sentry Logger [log]: Integration installed: RewriteFrames
 LOG  Sentry Logger [log]: Integration installed: DeviceContext
 LOG  Sentry Logger [log]: Integration installed: ModulesLoader
 LOG  Sentry Logger [log]: Integration installed: AppStart
 LOG  Sentry Logger [log]: Integration installed: NativeFrames
 LOG  Sentry Logger [log]: Integration installed: StallTracking
 LOG  Sentry Logger [log]: Integration installed: ReactNativeTracing
 LOG  Running "<REDACTED>" with {"rootTag":11,"initialProps":{"concurrentRoot":false}}
 LOG  Sentry Logger [log]: Integration installed: ReactNativeProfiler
 DEBUG  Sentry Logger [debug]: [AppStart] App start tracking is enabled. App start will be added to the first transaction as a child span.
 LOG  Sentry Logger [log]: Integration installed: TouchEventBoundary
 ERROR  RangeError: Maximum call stack size exceeded (native stack depth), js engine: hermes
 LOG  Sentry Logger [log]: Not capturing exception because it's already been captured.
 ERROR  RangeError: Maximum call stack size exceeded (native stack depth), js engine: hermes
 LOG  Sentry Logger [log]: Not capturing exception because it's already been captured.
 ERROR  RangeError: Maximum call stack size exceeded (native stack depth), js engine: hermes
 LOG  Sentry Logger [log]: Not capturing exception because it's already been captured.
 // this goes on forever

laurensk avatar Oct 21 '24 10:10 laurensk

Thank you,

can you also share with us the stack trace of the RangeError error?

krystofwoldrich avatar Oct 21 '24 12:10 krystofwoldrich

Hi, this is everything that got printed to the console, and YellowBox isn’t opening.

Do you have a way in mind to print a stack trace?

laurensk avatar Oct 21 '24 12:10 laurensk

Yes, I had in mind the red or yellow box with the stack trace of the RangeError.

I see that Sentry is capturing some errors (possibly the error), so you can add the following to your Sentry.init.

beforeSend: (event) => {
    console.log('Sentry Event: ', event);
}

Would you be able to reproduce this in a new app which you could share with us? This would speed up the debugging.

krystofwoldrich avatar Oct 21 '24 13:10 krystofwoldrich

Hi, here is my example project: https://github.com/laurensk/sentry-range-error

Turns out, it seems to be an issue with core-js, especially with url and url-search-params in combination with using fetch.

You can see it here: https://github.com/laurensk/sentry-range-error/blob/d51574058f7897bbc88d996cb3d8fc91e7ef446b/index.js#L6 And here: https://github.com/laurensk/sentry-range-error/blob/d51574058f7897bbc88d996cb3d8fc91e7ef446b/src/App.tsx#L25

I don't know if this is something which can/will be fixed...

laurensk avatar Oct 22 '24 08:10 laurensk

Hi, thank you for the reproducer.

I was able to get the same error just by using the following code, creating a new URL.

It seems to me that the core-js polyfill is not compatible with RN Hermes environment.

new URL('https://example.com');

krystofwoldrich avatar Oct 24 '24 07:10 krystofwoldrich

Alright, but does not seem like an issue with Sentry, so we can probably close this issue.

laurensk avatar Oct 24 '24 07:10 laurensk