mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2026-10-28 16:18:23 +08:00
Brandon Pereira
18277b71c9
The HyperDX in-app onboarding mirrors the SDK guides under
docs/clickstack/ingesting-data/sdks/ from this single source of truth, so it
parses them by convention. This standardizes those conventions and adds a
scoped validator so a drifting page cannot silently break the app's parsing.
- Add a `<ClickStackIntegrates signals={[...]} />` component (new snippet at
docs/snippets/components/ClickStackIntegrates/) that renders the
"This guide integrates" indicator as ClickHouse-yellow pills for the
supported signals. The `signals` prop (logs/metrics/traces) is the single
source of truth the app parses; it replaces the drifting hand-written blocks
(HTML tables and ad-hoc bullet lists across the pages).
- Standardize replaceable env-var placeholders: `<YOUR_INGESTION_API_KEY>`
(was also bare, `***`-wrapped, and `<YOUR_INGESTION_KEY>`),
`<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>` for the OTLP endpoint (was
localhost:4318 / your-otel-collector:4318, and fixes the
`<YOU_OTEL_COLLECTOR_HTTP_ENDPOINT>` typo), and `<MY_SERVICE_NAME>` for the
service name (was `<NAME_OF_YOUR_APP_OR_SERVICE>` / `<YOUR_APP_NAME>`).
- Fix a stray newline in the index keywords.
- Add ci/jobs/scripts/docs/sdk_docs_check.py enforcing all of the above: the
ClickStackIntegrates component + valid signals, an allowlist of `<UPPER_SNAKE>`
placeholders (so a new typo/variant is caught generically), and exact
deployment tab titles (Managed ClickStack / ClickStack Open Source). It is
wired into the existing "Docs check (Mintlify)" job and gated to run only when
an SDK page, the component, or the validator changes.
Closes: https://linear.app/clickhouse/issue/HDX-5262/standardize-clickstack-sdk-docs-for-in-app-onboarding
132 lines
3.7 KiB
Plaintext
132 lines
3.7 KiB
Plaintext
---
|
|
slug: /use-cases/observability/clickstack/sdks/react-native
|
|
description: 'React Native SDK for ClickStack - The ClickHouse Observability Stack'
|
|
title: 'React Native'
|
|
doc_type: 'guide'
|
|
keywords: ['clickstack', 'sdk', 'logging', 'integration', 'application monitoring']
|
|
---
|
|
|
|
import { ClickStackIntegrates } from '/snippets/components/ClickStackIntegrates/ClickStackIntegrates.jsx'
|
|
|
|
The ClickStack React Native SDK allows you to instrument your React Native
|
|
application to send events to ClickStack. This allows you to see mobile network
|
|
requests and exceptions alongside backend events in a single timeline.
|
|
|
|
<ClickStackIntegrates signals={['traces']} />
|
|
|
|
## Getting started {#getting-started}
|
|
|
|
### Install via NPM {#install-via-npm}
|
|
|
|
Use the following command to install the [ClickStack React Native package](https://www.npmjs.com/package/@hyperdx/otel-react-native).
|
|
|
|
```shell
|
|
npm install @hyperdx/otel-react-native
|
|
```
|
|
|
|
### Initialize ClickStack {#initialize-clickstack}
|
|
|
|
Initialize the library as early in your app lifecycle as possible:
|
|
|
|
```javascript
|
|
import { HyperDXRum } from '@hyperdx/otel-react-native';
|
|
|
|
HyperDXRum.init({
|
|
url: '<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>',
|
|
service: 'my-rn-app',
|
|
apiKey: '<YOUR_INGESTION_API_KEY>', // Omit for Managed ClickStack
|
|
tracePropagationTargets: [/api.myapp.domain/i], // Set to link traces from frontend to backend requests
|
|
});
|
|
```
|
|
|
|
### Attach user information or metadata (Optional) {#attach-user-information-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.
|
|
|
|
```javascript
|
|
HyperDXRum.setGlobalAttributes({
|
|
userId: user.id,
|
|
userEmail: user.email,
|
|
userName: user.name,
|
|
teamName: user.team.name,
|
|
// Other custom properties...
|
|
});
|
|
```
|
|
|
|
### Instrument lower versions {#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:
|
|
|
|
```javascript
|
|
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 {#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:
|
|
|
|
```javascript
|
|
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>
|
|
);
|
|
}
|
|
```
|