Sentry-react-native: Segregation of native and JS breadcrumbs

[awinograd]

OS:

• [ ] Windows
• [x] MacOS
• [ ] Linux

Platform:

• [x] iOS
• [x] Android

SDK:

• [x] @sentry/react-native (>= 1.0.0)
• [ ] react-native-sentry (<= 0.43.2)

SDK version: 1.4.2

react-native version: 0.63.1

Are you using Expo?

• [x] Yes (bare workflow)
• [ ] No

Are you using sentry.io or on-premise?

• [x] sentry.io (SaaS)
• [ ] on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

https://sentry.io/organizations/oui/issues/1806688837/?project=1512711&referrer=slack

Configuration:

(@sentry/react-native)

  Sentry.init({
    environment: environment,
    dsn: SENTRY_DSN,
    maxBreadcrumbs: 100,
    enableAutoSessionTracking: true,
    beforeBreadcrumb(breadcrumb, hint) {
      const is204 =
        breadcrumb.category === 'xhr' &&
        breadcrumb.data?.url === 'https://clients3.google.com/generate_204' &&
        breadcrumb.data?.status_code === 204;
      return is204 ? null : breadcrumb;
    },
    integrations = [
    ...((options.integrations as []) || []),
    new Sentry.Integrations.ReactNativeErrorHandlers({
      onerror: false,
      onunhandledrejection: true,
    }),
    new ExpoIntegration(),
    new RewriteFrames({
      iteratee: (frame) => {
        if (frame.filename) {
          frame.filename = normalizeUrl(frame.filename);
        }
        return frame;
      },
    }),
  ]
  });

---

I have following issue:

When a sentry message / error is recorded, the associated breadcrumbs don't appear in a linear timeline as expected. Rather, the JS breadcrumbs all happen linearly, and the native breadcrumbs happen linearly, offset by a few hours. As a result, in the sentry UI, the JS breadcrumbs and native breadcrumbs are not interleaved.

Steps to reproduce:

• Enable native integration (which records default breadcrumbs)
• Run through an app with JS breadcrumbs
• Capture a message / error

Actual result:

JS breadcrumb 1
JS breadcrumb 2
JS breadcrumb 3
Native breadcrumb 1
Native breadcrumb 2
Native breadcrumb 3

Expected result:

JS breadcrumb 1
Native breadcrumb 1
JS breadcrumb 2
Native breadcrumb 2
JS breadcrumb 3
Native breadcrumb 3

[jennmueng]

@awinograd When you mentioned

offset by a few hours

does this mean one or the other is incorrectly timestamped? This is an issue with some events that we've noticed from the past week or so where they are incorrectly timestamped. This could be a side effect of that.

[awinograd]

Yep that's exactly what I mean. Sorry if I missed a previous related issue!

On Mon, Jul 27, 2020, 3:45 AM Jenn Mueng [e-mail] wrote:

@awinograd https://github.com/awinograd When you mentioned

offset by a few hours

does this mean one or the other is incorrectly timestamped? This is an
issue with some events that we've noticed from the past week or so where
they are incorrectly timestamped. This could be a side effect of that.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/getsentry/sentry-react-native/issues/994#issuecomment-664207565,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACKD6LSI4UIR3CEDZHVO23R5U5BTANCNFSM4PIBVNJQ
.

[danmaas]

I am also seeing weird segregation of breadcrumbs. In my case, the timestamps on each breadcrumb do appear to be correct, but in the Sentry web UI, the breadcrumbs are not all listed in sorted time order.

Here is an example issue showing this problem: https://sentry.io/share/issue/f1a08e268b30480781221e669c776874/ (note: the breadcrumbs will probably only be visible to Sentry staff, via the "Details" view).

The linked issue is from my React Native app running in production on Android, using @sentry/react-native version 1.6.3. It's emitting breadcrumbs both in JavaScript and in Java code.

In the Sentry web UI, after clicking "Show 191 collapsed crumbs" to show all breadcrumbs, I see the following sequence of timestamps:

18:35:17
...
18:35:48

18:35:17
...
18:35:48

There are two distinct "runs" of breadcrumbs. Each "run" appears to be in sorted order. It looks to me like the first "run" includes only JavaScript breadcrumbs, while the second "run" includes a duplicate copy of all the JavaScript breadcrumbs, plus the Java breadcrumbs.

[StarryFire]

Any updates on this?

[jennmueng]

This has now been fixed in the latest release. https://github.com/getsentry/sentry-react-native/releases/tag/1.8.1