SpitfireYük Testi ve Gözlemlenebilirlikv1.1.0 · Yenilikler

Sürüm: 1.1.0Bu dokümantasyon Spitfire 1.1.0 içindir.

React Native uygulamasını OTel ile bağlamak

React Native ve Expo: fetch/XHR çağrıları trace olarak; backend'e traceparent ile bağlanır. Değerler: Servisleri OTel ile bağlamak: genel bakış.

Sürüm tablosu

React Native Metro Expo Paketler
0.79 ve sonrası gelen sürüm SDK 53 ve sonrası React.js sürümleri; document-load, user-interaction, context-zone, zone.js olmadan
0.76 – 0.78 0.81.3 ve sonrası SDK 52 aynı
0.75 ve öncesi – – desteklenmiyor; 0.79'a yükseltin

Sürümünüzü bulun: npx react-native --version (Expo: npx expo --version)

Yalnızca trace. OTel tarayıcı ve React Native instrumentation'ını deneysel sayar. Cihazda çalıştırma denetimimizde yoktu; kod bu paketlerle tip denetiminden geçti.

Doğrulandı: 2026-11-04. Kaynak: OTel JS 3.0.0 README, React Native support, OTel JS 3.x migration guide, npm @opentelemetry/sdk-trace, npm @opentelemetry/exporter-trace-otlp-http.

Gerekenler

  • Spitfire adresi https://<spitfire> (HTTPS: Android ve iOS düz HTTP'yi reddeder)
  • Servis adı <service-name>, sürüm <service-version>, ortam <environment>
  • Uygulama klasörü (burada /srv/app, package.json dosyasının olduğu yer)
  • API adresiniz, düzenli ifade olarak (burada ^https://api\.example\.com/)

React Native ve Expo

  1. Anahtarı oluşturun: Gözlemlenebilirlik → Tarayıcı ve uygulama anahtarı, İzin verilen kökenler boş; sfrum_… anahtarını kopyalayın (Gözlemlenebilirlik).

  2. Paketleri ekleyin:

bash
cd /srv/app && npm i @opentelemetry/api@1.10.0 @opentelemetry/sdk-trace@3.0.0 @opentelemetry/core@3.0.0 @opentelemetry/resources@3.0.0 @opentelemetry/exporter-trace-otlp-http@0.300.0 @opentelemetry/instrumentation@0.300.0 @opentelemetry/instrumentation-fetch@0.300.0 @opentelemetry/instrumentation-xml-http-request@0.300.0
  1. /srv/app/otel.ts dosyasını oluşturun, yapıştırın:
ts
// IS_OTEL_ENABLED=true: OTel on; any other value: off.
import { context, propagation, trace } from '@opentelemetry/api';
import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from '@opentelemetry/core';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { BatchSpanProcessor, ParentBasedSampler, StackContextManager, TraceIdRatioBasedSampler, TracerProvider } from '@opentelemetry/sdk-trace';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';

const IS_OTEL_ENABLED: string = 'true';
const OTEL_SERVICE_NAME = '<service-name>';
const OTEL_SERVICE_VERSION = '<service-version>';
const OTEL_ENVIRONMENT = '<environment>';
const OTEL_TRACES_ENDPOINT = 'https://<spitfire>/otlp/v1/traces';
const OTEL_KEY = 'sfrum_…';
const OTEL_TRACES_SAMPLER_ARG = 0.1;
const OTEL_PROPAGATE_URLS = /^https:\/\/api\.example\.com\//;

if (IS_OTEL_ENABLED === 'true') {
  const provider = new TracerProvider({
    resource: resourceFromAttributes({
      'service.name': OTEL_SERVICE_NAME,
      'service.version': OTEL_SERVICE_VERSION,
      'deployment.environment': OTEL_ENVIRONMENT,
    }),
    sampler: new ParentBasedSampler({ root: new TraceIdRatioBasedSampler(OTEL_TRACES_SAMPLER_ARG) }),
    spanProcessors: [new BatchSpanProcessor({
      exporter: new OTLPTraceExporter({ url: OTEL_TRACES_ENDPOINT, headers: { Authorization: `Bearer ${OTEL_KEY}` } }),
    })],
  });
  trace.setGlobalTracerProvider(provider);
  context.setGlobalContextManager(new StackContextManager().enable());
  propagation.setGlobalPropagator(new CompositePropagator({ propagators: [new W3CTraceContextPropagator(), new W3CBaggagePropagator()] }));
  registerInstrumentations({
    instrumentations: [
      new FetchInstrumentation({ propagateTraceHeaderCorsUrls: [OTEL_PROPAGATE_URLS] }),
      new XMLHttpRequestInstrumentation({ propagateTraceHeaderCorsUrls: [OTEL_PROPAGATE_URLS] }),
    ],
  });
}
  1. /srv/app/index.js dosyasının ilk satırı yapın (Expo Router: /srv/app/index.js dosyasını bu satır ve import 'expo-router/entry'; ile oluşturun, package.json içinde "main": "index.js" yazın):
ts
import './otel';
  1. Release derleyin (Android; iOS: run-ios ile --mode Release):
bash
cd /srv/app && npx react-native run-android --mode release
  1. Expo: release derlemesi bunun yerine:
bash
cd /srv/app && npx expo run:android --variant release

Doğrulama

  1. Spitfire anahtarı bir uygulamadan (Origin olmadan) kabul ediyor:
bash
curl -s -o /dev/null -w '%{http_code}' -X POST https://<spitfire>/otlp/v1/traces -H 'Authorization: Bearer sfrum_…' -H 'Content-Type: application/json' -d '{}' | grep -q '^200
  

 && echo OK
  1. Uygulama dosyayı ilk yüklüyor:
bash
head -n 1 /srv/app/index.js | grep -q "import './otel'" && grep -q "IS_OTEL_ENABLED: string = 'true'" /srv/app/otel.ts && echo OK

Kapatma ve kaldırma

  1. Kapatma: otel.ts içinde const IS_OTEL_ENABLED: string = 'false'; yazın, yeniden derleyin.
  2. Kaldırma:
bash
cd /srv/app && npm uninstall @opentelemetry/api @opentelemetry/sdk-trace @opentelemetry/core @opentelemetry/resources @opentelemetry/exporter-trace-otlp-http @opentelemetry/instrumentation @opentelemetry/instrumentation-fetch @opentelemetry/instrumentation-xml-http-request && rm -f otel.ts && sed -i.bak "/import '.\/otel';/d" index.js

Sık karşılaşılan sorunlar

Belirti Çözüm
Metro: bir @opentelemetry dosyası için Unable to resolve React Native 0.79 ya da Metro 0.81.3 ve sonrası
401 Anahtar sfrum_… olmalı, açık olmalı, Bearer sonrasında yazılmalı
403 origin not allowed Web derlemesi (Expo web): adresini İzin verilen kökenler listesine ekleyin
429 Anahtarın Dakikada gönderim değerini artırın ya da OTEL_TRACES_SAMPLER_ARG değerini düşürün
Uygulama ve backend span'leri tek trace değil OTEL_PROPAGATE_URLS API adresinize uymalı
Cihazdan span gelmiyor Telefon https://<spitfire> adresine erişebilmeli

İlgili sayfalar