React Native
The HyperDX React Native SDK allows you to instrument your React Native application to send events to HyperDX. This allows you to see mobile network requests and exceptions alongside backend events in a single timeline.
This Guide Integrates:
| ✅ XHR/Fetch Requests |
Getting Started
Install via NPM
Use the following command to install the HyperDX React Native package (opens in a new tab).
npm install @hyperdx/otel-react-nativeInitialize HyperDX
Initialize the library as early in your app lifecycle as possible:
import { HyperDXRum } from '@hyperdx/otel-react-native';
HyperDXRum.init({
service: 'my-rn-app',
apiKey: '<YOUR_API_KEY_HERE>',
tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests
});(Optional) Attach User Information or Metadata
Attaching user information will allow you to search/filter sessions and events in HyperDX. This can be called at any point during the client session. The current client session and all events sent after the call will be associated with the user information.
userEmail, userName, and teamName will populate the sessions UI with the
corresponding values, but can be omitted. Any other additional values can be
specified and used to search for events.
HyperDXRum.setGlobalAttributes({
userId: user.id,
userEmail: user.email,
userName: user.name,
teamName: user.team.name,
// Other custom properties...
});Instrument lower versions
To instrument applications running on React Native versions lower than 0.68,
edit your metro.config.js file to force metro to use browser specific
packages. For example:
const defaultResolver = require('metro-resolver');
module.exports = {
resolver: {
resolveRequest: (context, realModuleName, platform, moduleName) => {
const resolved = defaultResolver.resolve(
{
...context,
resolveRequest: null,
},
moduleName,
platform,
);
if (
resolved.type === 'sourceFile' &&
resolved.filePath.includes('@opentelemetry')
) {
resolved.filePath = resolved.filePath.replace(
'platform\\node',
'platform\\browser',
);
return resolved;
}
return resolved;
},
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};View navigation
react-navigation (opens in a new tab) version 5 and 6 are supported.
The following example shows how to instrument navigation:
import { startNavigationTracking } from '@hyperdx/otel-react-native';
export default function App() {
const navigationRef = useNavigationContainerRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
startNavigationTracking(navigationRef);
}}
>
<Stack.Navigator>...</Stack.Navigator>
</NavigationContainer>
);
}