Skip to content
ClickHouse Docs
ClickHouse DocsClickHouse Docs
49.6kGet Started

React Native

View as MarkdownEdit this pageReport an issueSet up docs MCP

ClickStack React Native SDK를 사용하면 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>', // Managed ClickStack의 경우 생략
  tracePropagationTargets: [/api.myapp.domain/i], // 프론트엔드에서 백엔드 요청까지 traces를 연결하려면 설정하세요
});

사용자 정보 또는 메타데이터 첨부(선택 사항)

사용자 정보를 첨부하면 HyperDX에서 세션과 이벤트를 검색하거나 필터링할 수 있습니다. 이는 클라이언트 세션 중 어느 시점에서나 호출할 수 있습니다. 현재 클라이언트 세션과 호출 이후 전송되는 모든 이벤트는 사용자 정보와 연결됩니다.

userEmail, userName, teamName은 세션 UI에 해당 값을 표시하는 데 사용되며, 생략할 수도 있습니다. 그 외의 추가 값도 지정할 수 있으며 이벤트를 검색하는 데 사용할 수 있습니다.

HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // 기타 사용자 정의 속성...
});

하위 버전 계측

0.68 미만 버전의 React Native에서 실행되는 애플리케이션을 계측하려면 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,
      },
    }),
  },
};

화면 내비게이션

react-navigation 버전 5와 6이 지원됩니다.

다음 예시는 내비게이션 계측을 설정하는 방법을 보여줍니다.

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