WordPress Playground项目中的错误日志收集优化方案

背景介绍

WordPress Playground是一个在浏览器中运行WordPress的创新项目，它允许用户直接在浏览器环境中学习、测试和使用WordPress。然而，在运行过程中，系统偶尔会遇到内存不足等错误，现有的错误日志收集机制无法提供足够的信息来诊断和解决问题。

现有问题分析

当前系统收集的错误日志存在信息不完整的问题，例如最近报告的一个"WebAssembly.instantiate(): Out of memory"错误，仅提供了基本错误信息和发生时间，缺乏以下关键信息：

1. 具体的PHP和WordPress构建版本号
2. 用户设备类型（如移动设备）
3. 浏览器名称和版本
4. 同时打开的Playground标签页数量
5. 可用内存信息
6. 完整的错误堆栈跟踪

这些信息的缺失使得开发团队难以准确复现问题并找到根本原因。

解决方案设计

1. 增强错误日志收集机制

开发团队计划改进错误日志收集系统，增加以下关键信息的捕获：

• 系统版本信息：精确记录PHP和WordPress的构建ID和版本号，即使这些信息可以通过URL获取，也要单独记录以应对每日部署带来的变化。

• 环境信息：收集用户设备类型、浏览器名称和版本等环境数据。

• 内存使用情况：虽然JavaScript在获取可用内存方面有限制（目前仅发现Chrome支持的非标准已弃用API），但仍会尽可能收集相关信息。

• 并发情况：通过查询Service Worker获取同时打开的Playground标签页数量，帮助判断是单个标签页耗尽内存还是多个标签页共同导致的问题。

2. 全面错误跟踪

当前系统仅收集PHP和WASM崩溃错误。新的方案将扩展错误收集范围：

• 替换console调用：将所有console...调用替换为自定义logger函数，确保所有日志信息都能被系统捕获。

• 日志分级控制：引入调试标志，通过JS和查询API控制日志的显示级别。默认情况下，所有日志将被收集但不显示在浏览器控制台中。

• 可视化日志界面：添加一个模态窗口显示所有日志记录，用户可以通过头部菜单手动打开，或在特定情况下（如蓝图步骤失败时）自动弹出。

实施意义

这项改进将显著提升WordPress Playground项目的可靠性：

1. 问题诊断效率：开发团队能够获取更全面的错误上下文，快速定位和解决问题。

2. 用户体验改善：通过可视化日志界面，用户和开发者都能更方便地查看系统运行状态。

3. 系统稳定性提升：全面的错误跟踪有助于发现潜在问题，预防严重故障发生。

4. 开发流程优化：详细的错误信息将加速开发调试过程，提高团队工作效率。

未来展望

随着错误日志收集系统的完善，WordPress Playground项目将能够更好地处理复杂场景下的运行问题，为用户提供更稳定、可靠的浏览器端WordPress体验。开发团队还将持续监控系统表现，根据实际运行数据进一步优化日志收集和分析机制。