ActivityWatch 0.13版本升级后WebUI报错问题分析与解决方案

ActivityWatch是一款开源的时间追踪工具，在最新发布的0.13版本中，部分用户在升级后遇到了Web界面无法正常显示的问题。本文将深入分析这一问题的成因，并提供详细的解决方案。

问题现象

用户在升级到0.13版本后，使用Firefox、Chrome等浏览器访问Web界面时，控制台会显示"TypeError: e.slice().map is not a function"的错误提示，导致界面无法正常加载活动数据。这个问题主要出现在从0.12.2版本升级到0.13版本的过程中。

根本原因分析

经过开发团队的深入排查，发现问题的根源在于设置数据的迁移过程中出现了异常。具体来说：

1. 0.13版本引入了服务器端设置存储的新特性，取代了之前使用的浏览器本地存储(localStorage)
2. 在迁移过程中，对分类规则(categories)数据的处理出现了类型转换错误
3. 原本应为数组类型的数据被错误地当作字符串处理，导致调用map方法时出现异常

解决方案

对于遇到此问题的用户，可以采用以下两种解决方案：

临时解决方案

1. 清除浏览器针对localhost的cookie数据
2. 重新访问ActivityWatch的Web界面
3. 重新配置分类规则

注意：此方法会清除所有本地存储的分类规则设置，建议先备份。

数据备份与恢复方案

1. 打开浏览器开发者工具(F12)
2. 切换到"应用(Application)"标签页
3. 在"存储(Storage)"部分找到"本地存储(Local Storage)"
4. 选择"http://localhost:5600"项
5. 找到并复制categories键对应的值(JSON格式)
6. 清除cookie后，通过Web界面的导入功能恢复分类规则

技术细节

开发团队已经定位到问题代码位于aw-webui项目的util/classes.ts文件中。错误发生在尝试对分类数据进行slice和map操作时，由于数据类型不匹配导致异常。

修复方案主要涉及对本地存储数据的正确解析，确保在从localStorage读取设置数据时进行适当的JSON解析处理，避免将数组数据误认为字符串。

预防措施

为了避免类似问题，开发团队建议：

1. 定期导出分类规则设置作为备份
2. 关注项目更新日志，了解重大变更内容
3. 在测试环境中先行验证新版本功能

结语

ActivityWatch作为一款优秀的开源时间追踪工具，其开发团队对用户反馈响应迅速，已针对此问题提出了修复方案。用户在遇到类似问题时，可以参考本文提供的解决方案，或等待官方发布包含修复的新版本。

对于时间追踪数据的重要性，建议用户养成定期备份设置的习惯，以确保在系统升级或意外情况发生时能够快速恢复工作环境。