@honeycombio/opentelemetry-react-native v0.3.0

Honeycomb OpenTelemetry React Native

Honeycomb wrapper for OpenTelemetry in React Native apps.

STATUS: this library is experimental. Data shapes are unstable and subject to change. We are actively seeking feedback to ensure usability.

Getting started

1. Install this library:

yarn add @honeycombio/opentelemetry-react-native

2. Get a Honeycomb API key.

3. Initialize tracing at the start of your application:

import { HoneycombReactNativeSDK } from '@honeycombio/opentelemetry-react-native';

const sdk = new HoneycombReactNativeSDK({
  apiKey: 'api-key-goes-here',
  serviceName: 'your-great-browser-application',
  instrumentations: [], // add automatic instrumentation
});
sdk.start();

4. Build and run your application, and then look for data in Honeycomb. On the Home screen, choose your application by looking for the service name in the Dataset dropdown at the top. Data should populate.

Refer to our Honeycomb documentation for more information on instrumentation and troubleshooting.

SDK Configuration Options

See the Honeycomb Web SDK for more most options.

These are the React Native-specific options:

Default Attributes

All spans will include the following attributes

TODO

Auto-instrumentation

Error handler

The Honeycomb React Native SDK includes a global error handler for uncaught exceptions. To use it, include it in the instrumentations config property.

import { 
  HoneycombReactNativeSDK,
  UncaughtExceptionInstrumentation,
} from '@honeycombio/opentelemetry-react-native';

const sdk = new HoneycombReactNativeSDK({
  apiKey: 'api-key-goes-here',
  serviceName: 'your-great-browser-application',
  instrumentations: [
    new UncaughtExceptionInstrumentation() // Any uncaught errors will be automatically recorded
  ],
});
sdk.start();

Manual Instrumentation

Navigation

Navigation instrumentation depends on if you are using React NativeRouter or Expo Router for navigation. Honeycomb SDK provides a component (<NavigationInstrumentation>) that you can place in your main app or layout file. Below are examples on using it with both ReactNative Router.

ReactNative Router

In ReactNative Router you will need to pass the ref into your navigation container as well as into the <NavigationInstrumentation> component.

Note: the <NavigationInstrumentation> component has to be a child of your <NavigationContainer> component.

import { NavigationInstrumentation } from '@honeycombio/opentelemetry-react-native';
import { useNavigationContainerRef, NavigationContainer } from '@react-navigation/native';


export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NavigationContainer
      ref={navigationRef}
    >
      <NavigationInstrumentation
        ref={navigationRef}
      >
        {/* Navigation/UI code*/}
      </NavigationInstrumentation>
    </NavigationContainer>
  );
}

Expo Router

The same component can also be used with expo's provided useNavigationContainerRef hook. Since Expo generates its own NavigationContainer you do not need to pass the ref in again.

import { NavigationInstrumentation } from '@honeycombio/opentelemetry-react-native';
import { useNavigationContainerRef } from 'expo-router';


export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NavigationInstrumentation
      ref={navigationRef}
    >
      {/* Navigation/UI code*/}
    </NavigationInstrumentation>
  );
}

Sending a custom span.

let span = trace
  .getTracer('your-tracer-name')
  .startSpan('some-span');
span.end();