> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-parallel-read-in-order-multi-part.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> حزمة SDK لـ React Native من ClickStack - حزمة observability من ClickHouse

# React Native

export const ClickStackIntegrates = ({signals = []}) => {
  const list = Array.isArray(signals) ? signals : String(signals).split(",");
  const supported = list.map(s => String(s).trim().toLowerCase());
  const pillStyle = {
    display: "inline-flex",
    alignItems: "center",
    padding: "0.125rem 0.625rem",
    borderRadius: "9999px",
    fontSize: "0.8125rem",
    fontWeight: 500,
    lineHeight: 1.6,
    color: "#161517",
    backgroundColor: "#faff69",
    border: "1px solid rgba(0, 0, 0, .1)",
    marginRight: "0.5rem"
  };
  return <div style={{
    margin: "0 0 1.25rem"
  }}>
      <span style={{
    marginRight: "0.5rem"
  }}>يتكامل هذا الدليل مع:</span>
      {supported.includes("logs") && <span style={pillStyle}>السجلات</span>}
      {supported.includes("metrics") && <span style={pillStyle}>المقاييس</span>}
      {supported.includes("traces") && <span style={pillStyle}>التتبعات</span>}
    </div>;
};

تتيح لك حزمة SDK الخاصة بـ ClickStack لـ React Native إضافة إمكانات الرصد إلى
تطبيق React Native لإرسال الأحداث إلى ClickStack. ويتيح لك ذلك عرض طلبات
شبكة تطبيقات الجوال والاستثناءات إلى جانب أحداث الخادم الخلفي ضمن مخطط زمني واحد.

<ClickStackIntegrates signals={['traces']} />

<h2 id="getting-started">
  البدء
</h2>

<h3 id="install-via-npm">
  التثبيت باستخدام NPM
</h3>

استخدم الأمر التالي لتثبيت [حزمة ClickStack لـ React Native](https://www.npmjs.com/package/@hyperdx/otel-react-native).

```shell theme={null}
npm install @hyperdx/otel-react-native
```

<h3 id="initialize-clickstack">
  تهيئة ClickStack
</h3>

هيّئ المكتبة في أقرب مرحلة ممكنة من دورة حياة تطبيقك:

```javascript theme={null}
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
});
```

<h3 id="attach-user-information-metadata">
  إرفاق معلومات المستخدم أو البيانات الوصفية (اختياري)
</h3>

يتيح لك إرفاق معلومات المستخدم البحث في الجلسات والأحداث وتصفيتها
في HyperDX. يمكن استدعاء ذلك في أي وقت أثناء جلسة العميل. وسترتبط
جلسة العميل الحالية وجميع الأحداث المُرسلة بعد هذا الاستدعاء
بمعلومات المستخدم.

ستؤدي `userEmail` و`userName` و`teamName` إلى تعبئة واجهة الجلسات بالقيم
المقابلة، ولكن يمكن حذفها. كما يمكن تحديد أي قيم إضافية أخرى واستخدامها
للبحث عن الأحداث.

```javascript theme={null}
HyperDXRum.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // Other custom properties...
});
```

<h3 id="instrument-lower-versions">
  إضافة الرصد إلى الإصدارات الأقدم
</h3>

لإضافة الرصد إلى التطبيقات التي تعمل على إصدارات React Native الأقدم من 0.68،
حرّر ملف `metro.config.js` لإجبار metro على استخدام
حزم مخصّصة للمتصفح. على سبيل المثال:

```javascript theme={null}
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,
      },
    }),
  },
};
```

<h2 id="view-navigation">
  التنقّل بين الشاشات
</h2>

الإصداران 5 و6 من [react-navigation](https://github.com/react-navigation/react-navigation) مدعومان.

يوضح المثال التالي كيفية إضافة الرصد للتنقّل:

```javascript theme={null}
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>
  );
}
```