在 Capacitor 中设置性能监控

想优化你的 Capacitor App 性能吗？ 像 Firebase 以及 Sentry 这样的监控工具可以帮助你追踪崩溃、资源使用情况和响应时间，从而确保更流畅的用户体验。以下是简要说明：

• 为什么要监控性能：识别崩溃，优化资源使用，并改善响应时间。
• 推荐使用的工具:
  • Firebase：通过 Firebase 实现实时性能数据、网络监控和自定义事件追踪 @capgo/capacitor-firebase-performance 以及 @capgo/capacitor-firebase-crashlytics.
  • Sentry：详细的错误追踪、堆栈跟踪分析和实时通知。
• 设置步骤:
  • 安装 Firebase 或 Sentry SDK。
  • 配置应用以追踪性能指标或错误。
  • 使用 dashboard 分析和优化应用性能。

快速对比:

对于 Live Updates，可集成以下工具 Capgo 从而无需等待应用商店审核即可即时推送修复。立即开始监控，提升应用效率与用户满意度。

使用以下工具优化应用健康度 Firebase 性能监控 …

选择监控工具

请根据应用需求和团队的技术专长选择合适的监控工具。下面介绍 Firebase Performance Monitoring 和 Sentry，帮你做出选择。

工具对比

选型标准

在选择这些工具时，请考虑以下因素：

• 应用体积与流量：对于预期快速增长的应用，Firebase 是稳妥之选。Sentry 可能更适合小规模的应用场景。
• 技术要求：Firebase 需要 Google Play 服务，因此非常适合该生态系统内的应用。Sentry 独立运行，在跨平台方面提供了更大的灵活性。
• 团队体验：Firebase 与熟悉 Google 工具团队的契合度较高，而 Sentry 简洁的 SDK 设置更易于在更广泛的用例中使用。
• 预算限制：两款工具均提供免费套餐，但请比较扩展功能的成本，以确保符合您的预算。
• 集成目标：Firebase 与基于 Google 的工作流无缝集成，而 Sentry 在错误追踪方面表现尤为出色。
• 合规要求：确保工具符合诸如 GDPR、等标准，尤其是当您的应用处理敏感用户数据时。
• 更新频率：如果频繁更新至关重要，像 Capgo 这样的工具可以加速实时修复，从而补充您的监控配置。

Firebase 配置指南

在您的项目中设置 Firebase Performance Monitoring Capacitor 应用 需要遵循几个明确的步骤，以确保数据追踪的准确性。

安装 Firebase SDK

首先将 Firebase SDK 添加到项目中，并针对您的平台进行配置：

• 安装 Firebase 依赖项

运行以下命令来安装必要的 Firebase 包。详情请参阅 @capgo/capacitor-firebase-performance 以及 @capgo/capacitor-firebase-crashlytics 插件页面了解完整设置详情：

npm install @capgo/capacitor-firebase-performance
npm install firebase

• 初始化 Firebase

在主应用文件中配置 Firebase：

import { FirebasePerformance } from '@capgo/capacitor-firebase-performance';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  // Add your Firebase configuration object here
};

initializeApp(firebaseConfig);
await FirebasePerformance.initializePerformance();

• 添加平台配置

更新您的 capacitor.config.json 文件，以启用性能监控：

{
  "plugins": {
    "FirebasePerformance": {
      "collectMetrics": true,
      "instrumentationEnabled": true,
      "dataCollectionEnabled": true
    }
  }
}

配置性能追踪

你可以使用 Firebase Performance Monitoring 开始追踪特定的应用活动，例如数据库查询或网络请求。

• 追踪数据库查询

async function trackDatabaseQuery() {
  const trace = await FirebasePerformance.startTrace({ traceName: 'database_query' });

  // Perform your database operation
  await performDatabaseOperation();

  await FirebasePerformance.stopTrace({ traceName: 'database_query' });
}

• 监控网络请求

await FirebasePerformance.setAttributes({
  traceName: 'api_call',
  attributes: {
    endpoint: '/users',
    method: 'GET'
  }
});

• 追踪自定义指标

对于自定义指标，例如追踪购物车金额：

await FirebasePerformance.putMetric({
  traceName: 'checkout_flow',
  metricName: 'cart_value',
  value: 99.99
});

实现这些 trace 后，你可以在 Firebase Console 中查看收集到的数据。

使用 Firebase Console

配置好监控后，您可以在 Firebase Console 中查看并分析应用的性能数据：

1. 查看性能数据

   • 登录 Firebase Console。
   • 选择您的项目。
   • 前往 性能监控.
   • 从下拉菜单中选择您的应用。

2. 监控关键指标

Dashboard 可帮助您深入了解各项性能指标，包括：

• 应用启动时间
• 网络请求成功率
• 屏幕渲染时间
• 自定义 trace 结果

3. 设置自定义报告

创建定制报告，以分析应用性能的特定方面，例如：

• 不同地区的性能差异
• 按设备类型划分的指标
• 网络状况的影响
• 自定义 trace 中的模式

使用这些工具有效定位并解决性能瓶颈。

Sentry 错误追踪设置

Firebase 负责性能指标，而 Sentry 专注于捕获和诊断错误。两者结合，能给你一套强大的监控方案。

安装 Sentry SDK

先安装所需的 Sentry 包：

npm install @sentry/capacitor
# Add the Sentry package for your specific framework

安装完成后，在应用的入口点配置 Sentry。

初始化 Sentry

在应用的入口点用以下配置设置 Sentry：

import * as Sentry from "@sentry/capacitor";
import { BrowserTracing } from "@sentry/browser";

Sentry.init({
    dsn: "your-project-dsn",
    integrations: [new BrowserTracing()],
    tracesSampleRate: 0.2,
    environment: "production",
    release: "app-version@" + process.env.VERSION,
    dist: process.env.BUILD_NUMBER,
    debug: false
});

该配置包含 release 追踪，可将错误关联到具体的应用版本。

配置错误追踪

你还可以用自定义 Error Boundary 和 try-catch 代码块进一步定制错误追踪。

自定义 Error Boundary：

class ErrorBoundary extends React.Component {
    componentDidCatch(error, errorInfo) {
        Sentry.captureException(error, { extra: errorInfo });
    }
}

追踪特定错误：

try {
    riskyOperation();
} catch (error) {
    Sentry.captureException(error, {
        tags: { operation: "data_sync", severity: "critical" },
        extra: { userId: currentUser.id, timestamp: new Date().toISOString() }
    });
}

性能监控：

const transaction = Sentry.startTransaction({
    name: "API Request",
    op: "http.request"
});

try {
    await makeApiCall();
} finally {
    transaction.finish();
}

这些方法可确保应用有效记录错误，便于通过 Sentry 追踪和解决。

使用 Sentry Dashboard

Sentry dashboard 提供工具，帮助深入分析并更好地理解错误：

• 实时监控：查看错误频率、解决状态以及受影响的用户。
• 错误分析：查看堆栈跟踪，对相似错误进行分组，并按环境筛选。
• 告警：设置错误阈值，配置通知选项，并创建自定义告警规则。

此仪表盘让诊断和修复问题变得简单直接。

监控最佳实践

关注关键指标

Capgo 对 750 个生产环境应用的分析 [1] 突出了需要监控的关键指标：

• 更新成功率：目标至少达到 82%。
• 更新速度：全球 CDN 应在 114 毫秒内交付 5 MB。
• 用户采用率：95% 的用户应在 24 小时内完成更新。
• API 响应时间：保持在 500 毫秒以内（全球平均为 434 毫秒）。

设置警报，以便快速检测这些指标的任何偏差。

创建有效的警报规则

以下是配置性能监控警报的示例：

// Example alert configuration
{
    performance: {
        apiLatency: {
            threshold: 1000, // ms
            period: "5m",
            condition: "above"
        },
        errorRate: {
            threshold: 1.0, // percentage
            period: "15m",
            condition: "above"
        },
        updateSuccess: {
            threshold: 75, // percentage
            period: "1h",
            condition: "below"
        }
    }
}

持续监控与调整

警报设置完成后，重点关注持续监控和优化：

• 定期性能检查：按地区审查更新成功率，分析不同应用版本的错误趋势，并监控高峰时段的 API 响应时间。

• 更新的分阶段发布：前 24 小时先向 10% 的用户推送。如果一切顺利，则提升至 50%，并在性能稳定 48 小时后完成全量发布。

• 持续优化：排查失败的更新，识别响应缓慢的 API 端点，并评估更新后的用户参与度，以确保改进效果持续。

Capgo 更新与监控

Capgo 核心功能

Capgo 的 live update 系统已在 750 个生产应用中验证，仅需 114ms 即可交付 5MB 的 bundle [1].

核心功能包括：

• 实时分析：监控更新成功率，目前全球平均为 82% [1].
• 即时部署：无需等待应用商店审核，即可推送关键修复。
• 增量更新：仅下载变更的组件，节省带宽和时间。
• 版本控制：快速回滚对性能产生负面影响的更新。

该系统可轻松集成现有监控工具，确保平稳运行。

“我们在生产环境中向 5000 多名用户推送了 Capgo OTA 更新。几乎所有用户在 OTA 部署到 @Capgo 后的几分钟内就更新到了最新版本，运行非常流畅。” - colenso [1]

将工具与 Capgo 结合使用

Capgo 的分析功能支持分阶段发布，帮助团队在全面发布前确保稳定性。

要有效配置 Capgo 的通道系统：

• 先将更新部署给 Beta 测试者。
• 使用 Capgo 的分析功能监控性能指标。
• 逐步扩大推送范围，覆盖更多用户。

“我们采用敏捷开发，@Capgo 对于向用户持续交付至关重要！” —— Rodrigo Mantica [1]

凭借全球已交付的 2350 万次更新，Capgo 的实时仪表盘提供清晰洞察，助力团队就更新和性能优化做出明智决策。

下一步

核心要点

密切关注关键指标对有效的性能监控至关重要。使用工具来追踪这些关键指标：

通过以下列出的资源，深入了解这些指标和工具。

了解更多

性能监控工具和实践在不断演进。探索这些指南和策略，保持领先：

官方文档:

• Firebase Performance 监控文档
• Sentry 的 Capacitor 集成指南
• Capacitor 官方性能优化指南

高级实现：探索 Capgo 的分析系统，已成功应用于 750 多个生产应用 [1]. 其文档介绍了监控模式以及与其它性能追踪工具无缝配合的 live update 策略。

继续阅读：在 Capacitor 中设置性能监控

如果你正在使用 在 Capacitor 中设置性能监控 要规划原生插件工作，请将其与 Capgo 插件目录 查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件 查看由 Capgo 提供的 Capacitor 插件中的实现细节， 添加或更新插件 查看添加或更新插件中的实现细节， Ionic Enterprise 插件替代方案 查看 Ionic Enterprise 插件替代方案中的产品工作流，以及 Capgo Native Build 查看 Capgo Native Builds 中的产品工作流。