设置Capacitor

想优化你的 Capacitor 应用的性能? 监控工具如 Firebase 和 Sentry 可以帮助你追踪崩溃、资源使用情况和响应时间，确保用户体验更加流畅。以下是快速概述:

• 为什么监控性能:识别崩溃、优化资源使用和提高响应时间。
• 使用的工具:
  • Firebase:通过@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-firebase-performance和 @capgo/capacitor-firebase-性能监控 and @capgo/capacitor-firebase-crashlytics.
  • Setup Steps安装Firebase或Sentry__CAPGO_KEEP_0__
• 配置应用程序以跟踪性能指标或错误:
  • Install Firebase or Sentry SDK.
  • 快速比较
  • Install Firebase or Sentry __CAPGO_KEEP_0__.

Configure your app for tracking performance metrics or errors.:

For live updates, integrate tools like Capgo 立即推送修复，避免应用商店延迟。今天开始监控，提高应用的效率和用户满意度。

优化应用健康 Firebase 性能监控

选择监控工具

选择一个适合你的应用需求和团队专业性的监控工具。以下是 Firebase Performance Monitoring 和 Sentry 的对比帮助你做出决定。

工具比较

选择标准

在选择这些工具时，请考虑以下几点：

• 应用大小和流量: 对于预期快速增长的应用，Firebase是一个坚实的选择。 Sentry可能更适合用于较小规模的实施。
• 技术要求: Firebase需要 Google Play Services,使其成为该生态系统内的应用的理想选择。 Sentry独立工作，提供了更大的灵活性跨平台。
• 团队经验: Firebase与Google工具熟悉的团队保持一致，而Sentry的简单SDK设置更适合广泛的用例。
• 预算限制: 两者都提供免费的层次，但比较扩展功能的成本，以确保它们符合您的预算。
• 集成目标: Firebase 与 Google 基础工作流程紧密集成， Sentry 在错误跟踪方面尤其强大。
• 法规要求: 确保工具符合标准，如 GDPR,尤其是如果您的应用程序处理敏感用户数据。
• 更新频率: 如果频繁更新至关重要，工具如 Capgo 可以加快实时修复，补充您的监控设置。

Firebase 配置指南

在您的 Capacitor 应用程序 中设置 Firebase 性能监控

Install Firebase SDK

首先添加 Firebase SDK 到您的项目中，并为您的平台配置它：

• 安装 Firebase 依赖项

运行以下命令来安装必要的 Firebase 包。请参阅 @capgo/capacitor-firebase-性能监控 和 @capgo/capacitor-firebase-crashlytics Capacitor 插件页面，查看完整设置细节。

npm install @capgo/capacitor-firebase-performance
npm install 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();

• 在主应用文件中设置 Firebase：

添加平台配置 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
});

一旦这些跟踪实现了，您就可以在 Firebase Console 中查看收集的数据。

使用 Firebase Console

在设置监控后，您可以在 Firebase Console 中查看和分析应用程序性能数据：

1. 访问性能数据

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

2. 监控关键指标

仪表盘提供了各种性能指标的见解，包括：

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

3. 设置自定义报告

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

• 不同位置的性能差异
• 基于设备类型的指标
• 网络条件的影响
• 自定义跟踪的模式

使用这些工具有效地识别和解决性能瓶颈。

Sentinel 错误跟踪设置

Firebase处理性能指标，但Sentinel专注于捕获和诊断错误。它们一起为您提供强大的监控设置。

安装Sentinel SDK

首先安装所需的Sentinel包:

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

安装完成后，在应用程序入口点中设置Sentinel。

初始化Sentinel

在应用程序入口点中使用以下设置配置 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
});

此配置包括发布跟踪，链接错误到特定应用程序版本。

配置错误跟踪

您可以通过使用自定义错误边界和 try-catch 块来进一步定制错误跟踪。

自定义错误边界：

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 控制台

Sentry 控制台提供工具来深入了解错误并更好地理解它们：

• 实时监控: 检查错误频率、解决状态和受影响用户。
• 错误分析: 检查堆栈跟踪，按类别分组错误，并根据环境过滤。
• 警报: 设置错误阈值，配置通知选项，并创建自定义警报规则。

本仪表板使诊断和修复问题变得简单。

监控最佳实践

关注关键指标

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

• 更新成功率: 尽量达到82%。
• 更新速度: 全球 CDN 应该在 114 ms 内传输 5 MB。
• 用户采纳率: 24 小时内 95% 的用户应该更新。
• API 响应时间: 保持在 500 ms 以下（全球平均值为 434 ms）。

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

创建有效的警报规则

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

// 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%的用户作为测试对象。如果一切顺利，则在48小时内稳定后将其扩展到50%并最终完成更新。

• 持续优化: 检查更新失败情况，找出性能较慢的API端点，并评估用户在更新后对产品的参与度，以确保持续改进。

Capgo context

Capgo __CAPGO_KEEP_1__控制台界面

Capgo的live update系统，经过750个生产应用的测试，仅需114毫秒即可打包5MB的资源。 [1].

__CAPGO_KEEP_0__的__CAPGO_KEEP_1__系统，已在750个生产应用中测试，仅需114ms即可打包5MB的bundle

• 关键功能包括:实时分析工具 [1].
• 即刻部署: 无需等待应用商店审批即可推送关键修复。
• 部分更新: 只下载更改的组件，节省带宽和时间。
• 版本控制: 快速回滚对性能产生负面影响的更新。

该系统与现有监控工具集成，确保smooth操作。

“我们在生产环境中部署了Capgo OTA更新，用户数量超过5000。我们看到的操作非常smooth，几乎所有用户在Capgo OTA部署后几分钟内就更新了。” - colenso [1]

结合工具与Capgo

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

为了有效配置 Capgo 的频道系统：

• 首先将更新部署到 beta 测试者
• 使用 Capgo 的分析工具来监控性能指标。
• 逐步扩大到更广泛的用户群。

“我们实行敏捷开发，@Capgo 在持续交付给用户方面是 mission-critical！” - Rodrigo Mantica [1]

全球共交付 2.35 亿次更新，Capgo 的实时仪表板提供了清晰的见解，赋予团队做出明智决策的能力，关于更新和性能改进。

下一步

主要点

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

深入了解这些指标和工具，请参阅以下资源。

了解更多

context: Capgo营销网站。角色:短UI标签或导航项。见于：组件定价/FAQ.Astro，页面集成.Astro。消息键`learn_more`（了解更多）。

性能监控工具和实践一直在进步。通过浏览这些指南和策略来领先::

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

高级实现: 探索Capgo的分析系统，成功用于超过750个生产应用 [1]. 他们的文档提供了监控模式和live update策略的见解，能够与其他性能跟踪工具无缝工作

继续设置Capacitor中的性能监控

如果您正在使用 Set Up Performance Monitoring in Capacitor 来规划原生插件工作，连接它与 Capgo 插件目录 为Capacitor产品工作流程中的Capgo插件目录 Capacitor 插件由 Capgo 为 Capacitor 的 Capacitor 插件提供实现细节，了解 Capgo 的使用方法。 添加或更新插件 为添加或更新插件的实现细节 Ionic 企业插件替代品 为 Ionic 企业插件替代品的产品工作流程，和 Capgo 原生构建 为 Capgo 原生构建的产品工作流程。