mcpField
O
otel-expo-style

otel-expo-style

github.com/superloglabs開発13373 回インストール21 週間前に更新
リポジトリ

otel-expo-style について

Expoモバイルアプリ向けに、実行環境のガードを保ちながらOpenTelemetryを設定するスキルです。SDK初期化、自動計装、業務処理のトレースを扱います。

主な機能

  1. 01実行環境に応じた初期化
  2. 02OpenTelemetryのトレーサーとメーター設定
  3. 03fetch/XHRの自動計装
  4. 04業務処理のスパンとメトリクス記録
  5. 05Superlogのエンドポイントとトークン設定

活用シーン

  1. 01対応するExpoビルドでのみ計測を初期化
  2. 02アプリコードをラップせずAPI呼び出しをトレース
  3. 03業務処理のスパンとカウンターを記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/superloglabs/skills --skill otel-expo-style

インストール後、Claude Code で/otel-expo-styleを入力して読み込まれたか確認します。

詳細

OTel Expo スタイル

既存のランタイムガードを維持してください。Expo Go またはサポート対象外のランタイム分岐ではネイティブ SDK を使用しないアプリの場合、OTel の初期化はサポート対象の分岐内でのみ行ってください。

const isExpoGo = process.env.EXPO_PUBLIC_RUNTIME === "expo-go";

if (!isExpoGo) {
  initObservability();
  Sentry.init({ dsn: process.env.EXPO_PUBLIC_SENTRY_DSN });
}

registerRootComponent(App);

サポート対象のビルドでは、Sentry の初期化およびアプリの登録／ユーザーコードの実行より前に initObservability() を呼び出してください。

SDK の構成

ネイティブの OTel JS API と、ブラウザー／モバイル対応のプロバイダーおよびエクスポーターを使用してください。recordCounter、sendSuperlogSpan、トラッキング専用のヘルパーファイルは作成しないでください。

export const tracer = trace.getTracer("mugline.mobile");
export const meter = metrics.getMeter("mugline.mobile");
export const ordersSubmitted = meter.createCounter("mug.orders.submitted");

互換性がある場合は自動の fetch/XHR 計装を追加し、アプリケーションコードをラップしなくても API 呼び出しにスパンが付与されるようにしてください。

プロダクトアクション

リスクの低いビジネス処理を、ネイティブのアクティブスパンでラップしてください。

await tracer.startActiveSpan("mug.order.submit", async (span) => {
  try {
    span.setAttribute("tenant.id", tenantId);
    ordersSubmitted.add(1, { "tenant.id": tenantId, outcome: "success" });
  } catch (error) {
    span.recordException(error as Error);
    span.setStatus({ code: SpanStatusCode.ERROR });
    throw error;
  } finally {
    span.end();
  }
});

設定

エンドポイントと sl_public_ トークンは、オブザーバビリティモジュールに直接インラインで記述してください。このトークンはプロジェクト単位でスコープされ、書き込み専用であり、クライアントバンドルに含めても安全なものです。Superlog では EXPO_PUBLIC_* 環境変数を使わないでください。そうすることで、モバイルビルドがデプロイ時の設定に依存しなくなります。

const SUPERLOG_ENDPOINT = "https://intake.superlog.sh";
const SUPERLOG_PUBLIC_TOKEN = "sl_public_...";
const SERVICE_NAME = "mugline-mobile";

// The token MUST be sent as the `x-api-key` header. Ingest only reads
// `x-api-key` or `Authorization: Bearer <token>`; any other header name 401s.
function superlogHeaders(token: string): Record<string, string> {
  return { "x-api-key": token };
}

const exporter = new OTLPTraceExporter({
  url: `${SUPERLOG_ENDPOINT}/v1/traces`,
  headers: superlogHeaders(SUPERLOG_PUBLIC_TOKEN),
});

コメント

Markdown 対応