Skip to main content

前端监控 - 技术文档

Alt text

1. 介绍​

随着 Web 和 APP 应用的复杂度持续增长，前端监控变得越来越重要。本文档旨在提供一个简单而全面的前端监控解决方案，并解释其背后的技术细节。

2. 监控数据流程​

  1. Web/APP
    用户与应用交互时产生数据。

  2. Nestjs (数据收集处理)
    Nestjs 后端框架负责收集来自前端的数据。数据可以是错误日志、性能数据、用户行为等。

  3. 生成日志
    根据收集到的数据生成相应的日志记录。

  4. 日志服务器
    存储和管理生成的日志。

  5. LogsWeb
    一个用于查看和分析日志的 Web 界面。

3. 开发流程​

  1. 协调字段
    确定需要收集的数据字段和格式。例如，用户 ID、访问时间、浏览器类型、错误信息等。

  2. Nestjs 接口研发
    根据协调的字段开发相应的 API 接口来收集数据。

  3. Web 事件/APP 声明周期 调试服务器
    在 Web 和 APP 端，通过特定的事件或生命周期来触发数据的发送。例如，当页面加载完成、用户点击某个按钮或应用崩溃时。

4. 监控数据流程细化：发送数据的时机​

对于不同的平台（Windows事件、APP Android、iOS），数据的发送时机是关键，因为我们不希望这些操作影响到用户的操作逻辑和页面的渲染。

Windows 事件​

  1. 应用启动与关闭: 在应用启动时和关闭时发送相应的日志，这可以帮助开发者理解应用的使用情况及潜在的启动/关闭问题。
  2. 后台任务: 在Windows事件应用在后台执行任务时（例如自动更新或数据同步），可以在任务完成或发生错误时发送日志。
  3. 闲置时: 当应用处于非活跃状态，例如用户切换到其他应用或桌面时，可以考虑发送积累的数据。

Android​

  1. 应用生命周期: 利用Android的生命周期回调，如 onStart(), onResume(), onPause() 等发送日志，但确保这些操作是非阻塞性的。

  2. Service: 使用Android Service在后台发送数据，这样可以在不干扰用户操作的情况下进行。

  3. 网络状态变更: 当检测到网络从无到有或从移动数据切换到Wi-Fi时，可以考虑发送积累的数据。

  4. 闲置时: 当用户离开应用一段时间后，可以利用此时发送数据。

iOS​

  1. 应用生命周期: 利用iOS的生命周期方法，如 viewWillAppear, viewWillDisappear, applicationDidEnterBackground 等来发送日志，但要确保这些操作不会阻碍主线程。

  2. 后台任务执行: 使用iOS的后台任务执行机制 (beginBackgroundTask) 来在后台发送数据。

  3. 网络状态变更: 利用iOS的网络状态变更通知，当检测到有网络连接时，可以考虑发送之前积累的数据。

  4. 闲置时: 当应用进入后台或用户在应用中处于非活跃状态时，可以考虑发送数据。

总的来说，无论是哪个平台，都需要确保数据的发送操作是异步的、非阻塞性的，并且要在不干扰用户操作和页面渲染的前提下进行。可以考虑使用队列、缓存等机制来暂存数据，并在适当的时机批量发送。

4. 注意事项​

  1. 数据隐私
    保证用户数据的安全性和隐私性。不收集敏感信息，如密码、支付信息等。

  2. 数据压缩
    考虑到性能和带宽，发送到服务器的数据应该尽可能地被压缩。

  3. 异常处理
    确保在任何情况下，监控系统都不会影响到主应用的正常运行。

  4. 数据过滤
    避免不必要的数据冗余，只发送真正有用的数据。

  5. 版本管理
    随着应用的迭代，监控系统也需要进行版本管理，确保新旧版本之间的数据兼容。