# @sendlab/otel-react-native

> HyperDX distribution of Open Telemetry for react native.

Latest version **0.5.1** (published 2024-05-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @sendlab/otel-react-native
pnpm add @sendlab/otel-react-native
yarn add @sendlab/otel-react-native
bun add @sendlab/otel-react-native
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2024-05-24 |
| First published | 2024-05-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 450 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | HyperDX Observability Instrumentals Team |
| Maintainers | shorpo |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/@sendlab/otel-react-native
- Repository: https://github.com/hyperdxio/hyperdx-otel-react-native
- Homepage: https://github.com/hyperdxio/hyperdx-otel-react-native#readme
- Issues: https://github.com/hyperdxio/hyperdx-otel-react-native/issues
- npm.io page: https://npm.io/package/@sendlab/otel-react-native

## Dependencies (11)

- [shimmer](https://npm.io/package/shimmer.md) ^1.2.1
- [@opentelemetry/api](https://npm.io/package/@opentelemetry/api.md) ^1.7.0
- [@opentelemetry/core](https://npm.io/package/@opentelemetry/core.md) 1.20.0
- [react-native-user-agent](https://npm.io/package/react-native-user-agent.md) ^2.3.1
- [@opentelemetry/resources](https://npm.io/package/@opentelemetry/resources.md) 1.20.0
- [react-native-performance](https://npm.io/package/react-native-performance.md) ^4.0.0
- [react-native-url-polyfill](https://npm.io/package/react-native-url-polyfill.md) ^2.0.0
- [@opentelemetry/sdk-trace-web](https://npm.io/package/@opentelemetry/sdk-trace-web.md) 1.20.0
- [@opentelemetry/sdk-trace-base](https://npm.io/package/@opentelemetry/sdk-trace-base.md) 1.20.0
- [@opentelemetry/semantic-conventions](https://npm.io/package/@opentelemetry/semantic-conventions.md) 1.20.0
- [@opentelemetry/instrumentation-xml-http-request](https://npm.io/package/@opentelemetry/instrumentation-xml-http-request.md) ^0.51.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2024-05-24
- 0.5.0 — 2024-05-23
- 0.4.3 — 2024-05-23
- 0.4.1 — 2024-05-23
- 0.4.0 — 2024-05-23
- 0.3.1-next.2 — 2024-05-23
- 0.3.1-next.1 — 2024-05-23
- 0.3.1-next.0 — 2024-05-23
- 0.3.0-next.1 — 2024-05-23
- 0.3.0-next.0 — 2024-05-23
- 0.2.0-next.1 — 2024-05-23

## README

# HyperDX Distribution of OpenTelemetry for React Native

> :construction: This project is currently **Experimental**. Do not use it in production environments.

## Overview

This library lets you autoinstrument React Native applications. Minimum supported React Native version is 0.68.
To instrument applications running on React Native versions lower than 0.68, see [Instrument lower versions](#instrument-lower-versions).

## Get started

To instrument your React Native application, follow these steps.

1. Install the library using either npm or yarn:

```
# npm
npm install @hyperdx/otel-react-native

# yarn
yarn add @hyperdx/otel-react-native
```

2. Initialize the library as early in your app lifecycle as possible:

```js
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
  networkHeadersCapture: false,
});
```

3. Customize the initialization parameters to specify:

- `apiKey`: Your HyperDX Ingestion API key. You can find it [here](https://www.hyperdx.io/team).
- `service`: Name of your application. Set it to distinguish your app from others in HyperDX.
- `tracePropagationTargets`: A list of regular expressions that match the URLs of your backend services. Set it to link traces from frontend to backend requests.
- `networkHeadersCapture`: networkHeadersCapture is a flag that allows the option to capture header information, with the default flag being false.

### (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.

```js
HyperDXRum.setGlobalAttributes({
  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:

```js
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](https://github.com/react-navigation/react-navigation) version 5 and 6 are supported.

The following example shows how to instrument navigation:

```js
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>
  );
}
```

## Data collection

The library exports data using the Zipkin exporter. Adding your own exporters and processors isn't supported yet.

Supported features:

- Autoinstrumented HTTP requests
- Autoinstrumented JS Error tracking
- Autoinstrumented navigation tracking for react-navigation
- Session tracking
- Custom instrumentation using Opentelemetry
- Capturing native crashes

For more information about how this library uses Opentelemetry and about future plans check [CONTRIBUTING.md](CONTRIBUTING.md#Opentelemetry).

## License

https://github.com/signalfx/splunk-otel-react-native#license

---
_Source: https://npm.io/package/@sendlab/otel-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._