React Native

React Native SDK для ClickStack — стек обсервабилити ClickHouse

React Native SDK для ClickStack позволяет инструментировать ваше React Native-приложение для отправки событий в ClickStack. Благодаря этому вы сможете видеть сетевые запросы мобильного приложения и исключения рядом с событиями бэкенда на единой временной шкале.

В этом руководстве рассматриваются:

• XHR/Fetch-запросы

​

Начало работы

​

Установка через NPM

Чтобы установить пакет ClickStack React Native, выполните следующую команду.

npm install @hyperdx/otel-react-native

​

Инициализация ClickStack

Инициализируйте библиотеку как можно раньше в жизненном цикле приложения:

import { HyperDXRum } from '@hyperdx/otel-react-native';

HyperDXRum.init({
  url: 'http://your-otel-collector:4318',
  service: 'my-rn-app',
  apiKey: '<YOUR_INGESTION_API_KEY>', // Пропустите для Управляемого ClickStack
  tracePropagationTargets: [/api.myapp.domain/i], // Укажите для связывания трассировок от фронтенда с запросами к backend
});

​

Добавление информации о пользователе или метаданных (необязательно)

Добавление информации о пользователе позволит искать и фильтровать сеансы и события в HyperDX. Это можно вызвать в любой момент в течение клиентского сеанса. Текущий клиентский сеанс и все события, отправленные после этого вызова, будут связаны с информацией о пользователе.

userEmail, userName и teamName будут отображаться в интерфейсе сеансов как соответствующие значения, но их можно не указывать. Любые другие дополнительные значения также можно задать и использовать для поиска событий.

HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // Другие пользовательские свойства...
});

​

Инструментирование более старых версий

Чтобы инструментировать приложения на React Native версий ниже 0.68, отредактируйте файл metro.config.js, чтобы принудительно использовать в metro пакеты для браузера. Например:

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,
      },
    }),
  },
};

​

Навигация между экранами

Поддерживаются версии 5 и 6 библиотеки react-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>
  );
}