Exception capture context is overwritten by native scope sync

[lucas-zimerman]

Environment

How do you use Sentry?
Sentry SaaS (sentry.io)
Which SDK and version?
e.g: Sentry React Native 3.3.3

Steps to Reproduce

Sample code:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as Sentry from '@sentry/react-native';
Sentry.init({
  dsn:   'https://[email protected]/5428561',
  debug: true,
});

Sentry.captureException(new Error(`${Date.now()}: a test error occurred`),
context => context.addBreadcrumb({ message: 'error with breadcrumbs' }));

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Expected Result

The exception captured with the breadcrumb error with breadcrumbs

Actual Result

Breadcrumb got removed
https://sentry.io/organizations/sentry-sdks/issues/3114951206/?project=5428561&query=is%3Aunresolved&statsPeriod=1h

sentry-react-native/src/js/wrapper.ts

Lines 108 to 110 in a085ec4

	if (event.exception?.values?.[0]?.mechanism?.handled) {
	event.breadcrumbs = [];
	}

This code doesnt differentiate from synced breadcrumbs and local breadcrumbs, resulting on local breadcrumbs getting removed when setting an isolated scope/context.

[marandaneto]

I believe the right solution here would be to align the way how we capture events, which is what iOS does, on RN, we call the native bridge to get all device context and assemble the event on RN with already all the context, so this won't need to be done on Android, after the envelope is written to the disk, and because of that, breadcrumbs won't be duplicated.
This is a side-effect of this hacky solution of enriching the events on the Android side.
We can patch the current version to fix it, but ideally, we'd do it properly.

[lucas-zimerman]

I agree with this solution

[marandaneto]

@krystofwoldrich have you tested that this is fixed after #3170?

[krystofwoldrich]

@marandaneto I'll check it, the logic removing breadcrumbs was completely removed.

[krystofwoldrich]

Although we are not removing the breadcrumbs anymore, the captureContext is not working due to native scope sync.

Device context integration overwrites the captureContext with the context from the native layer. This works under the assumption that all scope changes are synced to the native layer. But this is not true for the captureContex which operates on a scope clone that is not (and should not be) synchronized to the native layer.

sentry-react-native/src/js/integrations/devicecontext.ts

Lines 87 to 93 in 2c394d1

	const nativeBreadcrumbs = Array.isArray(native['breadcrumbs'])
	? native['breadcrumbs'].map(breadcrumbFromObject)
	: undefined;
	if (nativeBreadcrumbs) {
	event.breadcrumbs = nativeBreadcrumbs;
	}

[krystofwoldrich]

The breadcrumb origin and fixing the breadcrumbs merging, which should not rely on using purely breadcrumbs from the native layer, will be needed also for supporting Expo DOM Components.