Instrumenting Your React Native App with OpenTelemetry for Enhanced Performance

This guide demonstrates how to effectively instrument your React Native application to send Open Telemetry (OTel) signals to any backend via OTLP-HTTP. We'll leverage the Embrace React Native SDK for seamless integration and enhanced visibility into your app's performance.

Key Advantages of Using the Embrace SDK

• Direct React Native Support: Unlike official OTel packages, Embrace is specifically designed for React Native, eliminating complex workarounds.
• Cross-Layer Telemetry: Embrace captures telemetry from both the JavaScript and native (Android/iOS) layers, providing a holistic view of app behavior and potential issues.
• OTLP-HTTP Export: Embrace exports data to any OTLP-HTTP endpoint, allowing integration with your preferred observability backend (e.g., Grafana Cloud).

Setting Up Your Project

1. Install Necessary Packages:

```bash
npx @react-native-community/cli init Walkthrough
cd Walkthrough/ios
bundle install
bundle exec pod install
cd ..
npx react-native run-ios
npm install @embrace-io/react-native @embrace-io/react-native-otlp
```

2. Initialize the Embrace SDK: In App.tsx, configure the SDK to point to your backend (example using Grafana Cloud):

```typescript
import {useEmbrace} from '@embrace-io/react-native';

function App(): React.JSX.Element {
  const {isPending, isStarted} = useEmbrace({
    ios: {
      disabledUrlPatterns: ['grafana.net'],
    },
    exporters: {
      logExporter: {
        endpoint: 'https://otlp-gateway-prod-us-central-0.grafana.net/otlp/v1/logs',
        headers: [{key: 'Authorization', token: 'Basic __TOKEN__'}],
        timeout: 30000,
      },
      traceExporter: {
        endpoint: 'https://otlp-gateway-prod-us-central-0.grafana.net/otlp/v1/traces',
        headers: [{key: 'Authorization', token: 'Basic __TOKEN__'}],
        timeout: 30000,
      },
    },
  });
  // ... rest of App()
}
```

Automatic and Manual Instrumentation

The Embrace SDK provides automatic instrumentation for network requests and unhandled exceptions. You can add custom tracing using Embrace's tracer provider:

    import {useEmbraceNativeTracerProvider} from "@embrace-io/react-native-tracer-provider";
    // ...
    const {tracerProvider: embraceTracerProvider} = useEmbraceNativeTracerProvider({}, isStarted);
    const tracer = useMemo<Tracer | undefined>(() => {
      if (embraceTracerProvider) {
        return embraceTracerProvider.getTracer("walkthrough-span-test", "1.0.0");
      }
      // ...
    }, [embraceTracerProvider, isStarted]);
    ```

You can then create and manage spans within your application logic.

Navigation Tracking

Use the @embrace-io/react-native-navigation package to automatically instrument navigation flows:

    import {EmbraceNavigationTracker} from "@embrace-io/react-native-navigation";
    // ...
    <EmbraceNavigationTracker ref={{navigationContainerRef}} tracerProvider={{embraceTracerProvider}} screenAttributes={{
          "test.attr": 654321,
          package: "@react-navigation/native",
        }} />
    ```

This will automatically create spans for each navigation event, enriching your telemetry with valuable context.

Leveraging the Embrace Dashboard

The Embrace dashboard offers a powerful User Timeline, providing a chronological view of user interactions, business logic events, and app/device-level information, enabling efficient identification and resolution of performance bottlenecks.

[Insert Embrace Dashboard Screenshot Here]

Embrace also allows seamless integration with your existing observability solutions for enhanced mobile SLO management and streamlined workflows between mobile and backend teams.

[Insert Embrace Integration Screenshot Here]