我构建了 react-native-llm-meter，针对 Expo 应用的 LLM 成本跟踪
Source: Dev.to
请提供您想要翻译的文章正文（除代码块和 URL 之外的文本），我将把它翻译成简体中文并保持原有的 Markdown 格式。
概览
如果你在 React Native 应用中调用 Claude、GPT 或 Gemini，却没有办法在设备上查看实际情况，就会遇到麻烦。服务器端的可观测性工具（Langfuse、Helicone、LangSmith、Stripe 的 token‑meter）在 Node 后端表现出色，但它们假设运行在服务器环境，依赖仅在 Node 中可用的 API，并且没有提供 AsyncStorage 适配器——在 Hermes 环境下，流式传输甚至会直接崩溃。
这时就需要 react-native-llm-meter。
该库直接在 Expo 应用上跟踪 LLM 使用情况，提供与供应商无关的指标、预算控制以及开发者覆盖层。
安装
npm install react-native-llm-meter @react-native-async-storage/async-storage基本用法
import { Meter, MeterProvider } from "react-native-llm-meter";
import Anthropic from "@anthropic-ai/sdk";
const anthropic = new Anthropic({
apiKey: process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY,
});
const meter = new Meter();
const client = meter.wrap(anthropic);
export default function App() {
return (
// Your app UI goes here
);
}通过包装后的客户端发出的每一次调用都会记录以下信息：
- 提供者和模型
- 输入/输出 token 计数
- 延迟
- 流式的首 token 时间（TTFT）
- 计算的费用（美元）
包装器保持原始 SDK 的接口不变；您只需更改客户端的构造方式。
获取摘要
meter.summary();
// {
// count: 47,
// totalCostUsd: 0.0894,
// inputTokens: 24103,
// outputTokens: 7379,
// latencyP50: 612,
// latencyP95: 1840,
// ttftP50: 287,
// ttftP95: 612,
// byModel: { … }
// }您还可以使用 useMetrics()（React Hook）获取实时指标，或通过 meter.getEvents({ from, to }) 获取原始事件。
流式 TTFT
TTFT（time‑to‑first‑token）与总延迟分开捕获，因为每个提供商的流式方式不同。它反映了感知的响应速度——用户在出现 任何 输出之前等待了多长时间。
检测规则
| Provider | First‑token signal |
|---|---|
| Anthropic | First content_block_delta chunk |
| OpenAI | First chunk where choices[0].delta.content is non‑empty |
First chunk where candidates[0].content.parts[0].text is non‑empty |
对于 OpenAI 流式，你必须包含 stream_options: { include_usage: true } 以接收使用数据。如果缺少使用数据，库会发出警告。
Storage Adapters
- AsyncStorageAdapter – 在所有环境下工作，以按天分块的方式保留数据。
- SqliteAdapter – 适用于更高容量的使用场景，基于
expo-sqlite构建。
迁移助手可让您在适配器之间切换。如果两者都不使用，事件仅保存在内存中。
预算
meter.setBudget({
daily: 5,
weekly: 25,
onCross: ({ period, threshold, spend }) => {
Alert.alert(`${period} limit hit`, `$${spend.toFixed(2)} / $${threshold}`);
},
});软警报 在不阻塞请求的情况下调用回调函数。硬断路器（会中止调用）正在路线图上。
Developer Overlay
import { MeterOverlay } from "react-native-llm-meter/overlay";一个浮动、可拖动的覆盖层仅在 __DEV__ 构建中出现，因此永远不会随生产环境发布。通过从 overlay 子路径导入，可使 react-native 不被包含在非 RN 包中。
它有意不做的事情
| 功能 | 原因 |
|---|---|
| Prompt content | 从不记录原始提示；仅记录 token 计数、延迟、模型名称、成本以及可选的元数据。 |
| Server‑side observability | 对于基于 Node 的调用使用 Langfuse、Helicone 等。 |
| Web support | 核心是平台无关的，但构建尚未准备好用于浏览器。 |
| Hosted dashboard | 它是一个库；您可以通过可选的远程接收器将事件 POST 到任何端点（Sentry、Datadog 等）。 |
模型令牌费用
Pricing tables are hard‑coded in src/pricing/table.ts and reflect published rates. A PR template makes updates quick (≈2 minutes). Unknown models emit a one‑time warning per provider/model pair during development.
尝试一下
npm install react-native-llm-meter @react-native-async-storage/async-storage仓库:
欢迎提交 bug、PR 和定价更新。如果你在 Expo 应用中集成了 Claude 或 GPT 并遇到边缘情况，请告知维护者。
由 Ankit Virdi 构建。