DEV Community

Cover image for Add observability to your React Native application in 5 minutes
LaunchDarkly profile image Alexis Roberson
Alexis Roberson for LaunchDarkly

Posted on • Originally published at launchdarkly.com

Add observability to your React Native application in 5 minutes

#observability #reactnative #sdk #ios

Originally published in the LaunchDarkly Docs

Overview

In modern application development, feature flags are the guardrails that keep experiments controlled and rollbacks safe when conditions shift. If feature flags act as the guardrails, observability provides the visibility: the headlights (traces), mirrors (logs), and dashboard instruments (metrics) that reveal what’s happening in the environment and how well a feature is performing. Together, feature flags and observability unlock powerful insights by correlating code changes with real-time system behavior. This combination reduces time-to-diagnosis and builds greater confidence when rolling out new features.

In this post, we’ll walk through just how to add observability to a React Native application using LaunchDarkly’s observability SDK. To demonstrate the process, we’ll build on the PlusOne app, a simple counter app that includes increment (+1), reset, and error-triggering buttons. This lightweight demo provides a clean foundation to showcase how logs, traces, and errors can seamlessly flow into LaunchDarkly for monitoring and debugging.

Screenshot final result of PlusOne app.

Prerequisites

All code from this tutorial can be found on GitHub.

Setting up your environment

Before running a React Native app, make sure your development environment is set up correctly. You can find the full setup instructions for both Android and iOS here.

In this tutorial, we'll be running iOS, but keep in mind Expo Orbit, the platform we'll be using to run our iOS simulator, requires both Xcode and Android Studio to be installed.

After going through the instructions you should have the following installed:

  • Node JS (preferably via nvm)
  • Watchman for file monitoring
  • JDK via zulu package manager.
  • Android Studio. Don’t forget to set your Android_Home environment variables.
  • Xcode for the iOS simulator.
  • Cocoapods for iOS dependency management.
  • Expo orbit for running expo apps Android or iOS.

If you're using Android, don't forget to add your environment variables to bash or zsh profile.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
Enter fullscreen mode Exit fullscreen mode

Starting up the PlusOne app

To get started, let’s clone the repo for the PlusOne app and run npm install to ensure the proper dependencies are present in our node_modules file.

Clone the repo.

git clone https://github.com/arober39/PlusOne
Enter fullscreen mode Exit fullscreen mode

Install dependencies using npm

cd PlusOne
npm install
Enter fullscreen mode Exit fullscreen mode

We’ll also need to run both the prebuild command to generate the ios file and the expo run command to run the iOS simulator.

Prebuild for iOS

npx expo prebuild
Enter fullscreen mode Exit fullscreen mode

Run expo app

npm expo run:ios
Enter fullscreen mode Exit fullscreen mode

Now we can view the iOS app in the iPhone simulator using npm.

# iOS
npm run ios

# Android
npm run android
Enter fullscreen mode Exit fullscreen mode

The app should look something like this:

Screenshot final result of PlusOne app.

Feel free to interact with the app to ensure all is working as expected.

As you can see in the code, we have three buttons: one that adds one to the displayed number, one to bring the count back to zero and an intentional Error button to test error monitoring within the LaunchDarkly UI.

// app/index.tsx

import { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function Index() {
 const [count, setCount] = useState(0);

 const handleReset = () => setCount(0);
 const handleIncrement = () => setCount((prev) => prev + 1);

 const triggerRecordedError = () => {
   try {
     throw new Error("Simulated controlled error from Plus One app")
   } catch (e) {
     alert("You intentionally threw an error")
   }
 };

 return (
   <View style={styles.container}>
     <View style={styles.header}>
       <Text style={styles.headerText}>Plus One</Text>
     </View>
     <View style={styles.counterWrapper}>
       <Text style={styles.counterText}>{count}</Text>
     </View>
     <View style={styles.actionsRow}>
       <ButtonBox label="Reset" onPress={handleReset} />
       <ButtonBox label="+1" onPress={handleIncrement} />
       <ButtonBox label="Error" onPress={triggerRecordedError} />
     </View>
   </View>
 );
}

type ButtonBoxProps = {
 label: string;
 onPress: () => void;
};

function ButtonBox({ label, onPress }: ButtonBoxProps) {
 return (
   <TouchableOpacity onPress={onPress} style={styles.button} activeOpacity={0.8}>
     <Text style={styles.buttonText}>{label}</Text>
   </TouchableOpacity>
 );
}


/* The rest of the application code */
Enter fullscreen mode Exit fullscreen mode

Now that we have verified a working app, we can add observability support by downloading the observability React Native SDK.

Install LaunchDarkly SDK dependencies.

npm install @launchdarkly/react-native-client-sdk
npm install @launchdarkly/observability-react-native
Enter fullscreen mode Exit fullscreen mode

Next, you’ll need to initialize the React Native LD client in the _layout file. Replace the in the layout file by pasting the following code.

// app/_layout.tsx

import { Observability } from '@launchdarkly/observability-react-native';
import { AutoEnvAttributes, LDOptions, LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';
import { Stack } from 'expo-router';
import { useEffect, useState } from 'react';

const options: LDOptions = {
 applicationInfo: {
   id: 'Plus-One',
   name: 'Sample Application',
   version: '1.0.0',
   versionName: 'v1',
 },
 debug: true,
 plugins: [
   new Observability({
     serviceName: 'my-react-native-app',
     serviceVersion: '1.0.0',
   })
 ],
};

const userContext = { kind: 'user', key: 'test-hello' };

export default function RootLayout() {
 const [client, setClient] = useState<ReactNativeLDClient | null>(null);
  useEffect(() => {
   // Initialize client
   const featureClient = new ReactNativeLDClient(
     'mob-abc123',
     AutoEnvAttributes.Enabled,
     options,
   );

   featureClient.identify(userContext).catch((e: any) => console.log(e));

   setClient(featureClient);

   // Cleanup function that runs when component unmounts
   return () => {
     featureClient.close();
   };
 }, []);

 if (!client) {
   return null;
 }
 return (
   <LDProvider client={client}>
     <Stack />
   </LDProvider>
 );
}
Enter fullscreen mode Exit fullscreen mode

First, we’re importing the Observability SDK as well as a few LD libraries to add options and attributes to the LD client.- Initialized the SDK and plugin options.

  • Defined the user context.
  • Lastly, you initialized the client.

Now that you have defined your LD React Native client, you can implement different observability methods within your application logic.

We can do this by importing the LDObserve library in the app/_layout.tsx file.

import { LDObserve } from '@launchdarkly/observability-react-native';
Enter fullscreen mode Exit fullscreen mode

Then, add the recordError() method within the triggerRecordedError function inside the app/_layout.tsx file. This will allow for error messages to be sent back to the LD UI.

 const triggerRecordedError = () => {
   try {
     throw new Error("Simulated controlled error from Plus One app")
   } catch (e) {
     LDObserve.recordError(e as Error, {feature: "test-button"})
     alert("You intentionally threw an error")
   }
 };
Enter fullscreen mode Exit fullscreen mode

Before being able to receive data in the LD UI, you’ll need to add your mobile key to the React Native LD client, which can be found by logging in to the LD UI.

Screenshot of Sign in page

Once logged in, tap the settings button at the bottom left.

Screenshot of landing page after sign in

Navigate to the Projects page and click create to create a new project.

Screenshot of Project page.

Define the new Project and click Create Project.

Screenshot of New project widget page.

Then, define the environment where you would like your data to be sent.

Screenshot of page to create new environment.

Now, grab the mobile key by pressing the three dots for the environment and selecting the mobile key, which will copy the key to your keyboard.

Screenshot of steps to copy mobile key

Then, add it to the app/_layout file.

   const featureClient = new ReactNativeLDClient(
     ‘mob-abc123’,
     AutoEnvAttributes.Enabled,
     options,
   );
Enter fullscreen mode Exit fullscreen mode

Finally, you can generate data by interacting with your app in the iOS app simulator.

Feel free to restart the app to ensure data is displaying in real time.

npm expo run:ios
Enter fullscreen mode Exit fullscreen mode

Once you navigate back to the LD UI, you should be able to see the logs, traces, and errors under the Monitor section.

Logs

Screenshot of final logs page.

Traces

Screenshot of final traces page.

Errors

Screenshot of final error page.

Conclusion

In just a few minutes, we’ve taken the PlusOne React Native app from a simple counter to a fully observable application connected to LaunchDarkly. By setting up the SDK, initializing observability plugins, and recording errors, we now have a live feedback loop where application behavior is visible in the LaunchDarkly UI. This makes it far easier to diagnose issues, validate feature flag rollouts, and ensure smooth user experiences.

Next Steps

Looking ahead, there are many ways to expand on what we’ve built by including features like recording custom metrics and session replay, which provide even deeper insights into app behavior. By integrating observability at the foundation of your React Native projects, you equip your team with the clarity needed to debug faster, ship features more confidently, and deliver reliable experiences to your users.

You can also read this article to learn more about observability and guarded releases.

Top comments (1)

Collapse
 
annthurium profile image
Tilde A. Thurium LaunchDarkly •

Good job on making mobile development (and Observability) accessible to beginners!