App Start Cold and Warm not being sent to Sentry

[plgrazon]

What React Native libraries do you use?

React Navigation

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

5.34.0

How does your development environment look like?

"react-native": "0.76.6"

Sentry.init()

 Sentry.init({
        sampleRate: 1,
        tracesSampleRate: 1,
        // When this property is set, it will only profile transactions sent
        profilesSampleRate: 1,
        dsn: Config.SENTRY_DSN_PUBLIC,
        normalizeDepth: 10,
        environment: SENTRY_STAGING_ENV,
        attachViewHierarchy: true,
        integrations(defaultIntegration) {
            return [...defaultIntegration, tracingIntegration as unknown as Integration];
        },
        beforeSendTransaction(event) {
            // console.info('Transaction beforeSend:', event.event_id);
            return event;
        },
        _experiments: {
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        },
        debug: true,
    });

Steps to Reproduce

Sentry Helpers

import * as Sentry from '@sentry/react-native';
import { Integration } from '@sentry/types';
import Config from 'react-native-config';

import { defaultSentryConfig } from 'bilt-core/vendor-sentry/config';

const SENTRY_STAGING_ENV = 'staging';
const SENTRY_PRODUCTION_ENV = 'production';

export const reactNavigationIntegration = Sentry.reactNavigationIntegration({
    routeChangeTimeoutMs: 500, // How long it will wait for the route change to complete. Default is 1000ms
    enableTimeToInitialDisplay: true,
});

const tracingIntegration = Sentry.reactNativeTracingIntegration({
    idleTimeout: 5000,
    routingInstrumentation: reactNavigationIntegration,
    ignoreEmptyBackNavigationTransactions: true,
    enableAppStartTracking: true,
    enableNativeFramesTracking: true,
    enableStallTracking: true,
    enableUserInteractionTracing: false,
});

export const initializeStagingSentrySdk = () => {
    Sentry.init({
        sampleRate: 1,
        tracesSampleRate: 1,
        // When this property is set, it will only profile transactions sent
        profilesSampleRate: 1,
        dsn: Config.SENTRY_DSN_PUBLIC,
        normalizeDepth: 10,
        environment: SENTRY_STAGING_ENV,
        attachViewHierarchy: true,
        integrations(defaultIntegration) {
            return [...defaultIntegration, tracingIntegration as unknown as Integration];
        },
        beforeSendTransaction(event) {
            // console.info('Transaction beforeSend:', event.event_id);
            return event;
        },
        _experiments: {
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        },
        debug: true,
    });
};

export const initializeProductionSentrySdk = () => {
    Sentry.init({
        sampleRate: 1,
        tracesSampleRate: 1,
        // When this property is set, it will only profile transactions sent
        profilesSampleRate: 1,
        dsn: Config.SENTRY_DSN_PUBLIC,
        normalizeDepth: 10,
        environment: SENTRY_PRODUCTION_ENV,
        attachViewHierarchy: true,
        integrations(defaultIntegration) {
            return [...defaultIntegration, tracingIntegration as unknown as Integration];
        },
        _experiments: {
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        },
        debug: false,
    });
};

App.tsx (entry file)

if (__DEV__) {
    initializeStagingSentrySdk();
} else {
    initializeProductionSentrySdk();
}

function App() {
    return (
        <Sentry.TouchEventBoundary>
            <AppNavigator reactNavigationIntegration={reactNavigationIntegration}/>
        </Sentry.TouchEventBoundary>
    );
}

/**
 * If you don't wrap your root component with Sentry, the App Start measurement
 * will finish when the JavaScript code is initialized instead of when the first
 * component mount.
 */
export default gestureHandlerRootHOC(Sentry.wrap(App));

AppNavigator.tsx

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as Sentry from '@sentry/react-native';

const navigationRef = createNavigationContainerRef<RootStackParamList>();

const App = createNativeStackNavigator();

function AppNavigator({
    reactNavigationIntegration,
}: {
    reactNavigationIntegration: Sentry.ReactNavigationInstrumentation;
}) {
    const [navigationReady, setNavigationReady] = useState(false);

    return (
        <NavigationContainer
            onReady={() => {
                reactNavigationIntegration.registerNavigationContainer(navigationRef);
                setNavigationReady(true);
            }}
            ref={navigationRef}
            linking={linking}
        >
                </App.Navigator>
        </NavigationContainer>
    );
}

export default AppNavigator;

Expected Result

With this setup above, I'm able to get the navigation spans but the cold and warm starts are missing. On my logs I'm getting this error:

Sentry Logger [warn]: [ReactNativeTracing] Not instrumenting App Start because native returned null.

If I use the following set up I get AppStart but not the navigation spans:

// App.tsx (entry file):

Sentry.init({
    sampleRate: 1, // this controls error sample rate
    tracesSampleRate: 0.025, // this conontrols performance transaction sample rate
    dsn: Config.SENTRY_DSN_PUBLIC,
    normalizeDepth: 10,
});

export default gestureHandlerRootHOC(App);

Is there a way to get app start from the setup above?

Actual Result

On my Sentry dashboard, I get the navigation logs but not the app start whether cold or warm

[markushi]

@plgrazon thanks for raising this issue, could you let us know on which platform (Android, iOS, ..) you're seeing this issue?

[krystofwoldrich]

Hi @plgrazon,
thank you for all the code snippets and the detailed description,

since the JS log points us towards the native layer not returning the app start data, could you share a Logcat logs for Android or iOS Console logs from Xcode, so we can investigate the issue further?

[plgrazon]

Closing this issue, I've decided to update our SDK to V6 and I've added the appStartIntegration

const appStartIntegration = Sentry.appStartIntegration({
    standalone: true, // If this is false, the app start will be tracked as child span of the first transaction.
});