mcpField
O
otel-expo-style

otel-expo-style

github.com/superloglabs开发13373 次安装21 周前更新
代码仓库

关于 otel-expo-style

面向 Expo 移动应用的 OpenTelemetry 监控配置技能，强调保留运行时判断，并涵盖 SDK 初始化、自动埋点和业务操作追踪。

主要功能

  1. 01按运行时条件初始化
  2. 02配置 OpenTelemetry tracer 和 meter
  3. 03自动埋点 fetch/XHR
  4. 04记录业务操作 span 和指标
  5. 05配置 Superlog 端点与令牌

适用场景

  1. 01仅在支持的 Expo 构建中初始化监控
  2. 02无需包装应用代码即可追踪 API 调用
  3. 03为业务操作记录 span 和计数器

安装

复制下面的命令，在终端中运行。

$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);

在受支持的构建中，先调用 initObservability()，再初始化 Sentry，并在应用注册或用户代码执行之前完成。

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 调用自动生成 span，无需包装应用代码。

产品操作

使用原生活动 span 包装低风险业务操作。

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