issue: Creating a calendar event with the date cleared fails with an “[object Object]” toast

在 Open WebUI 日历功能中,清空日期后直接点击“Create”提交,会因为前端未做日期校验而发出无效请求;同时,FastAPI 返回的校验错误(detail 为列表)无法被 Toast 正确渲染,最终显示为 [object Object] 。优先排查组件 CalendarEventModa

快速结论:在 Open WebUI 日历功能中,清空日期后直接点击“Create”提交,会因为前端未做日期校验而发出无效请求;同时,FastAPI 返回的校验错误(detail 为列表)无法被 Toast 正确渲染,最终显示为 [object Object]。优先排查组件 CalendarEventModal.svelte 的日期校验逻辑,以及 API 层对错误 detail 的归一化处理。

适用环境:Open WebUI v0.11.0(dev),安装方式为 Source(uvicorn + vite),浏览器为 Firefox。该问题已在 dev 分支修复。

最快修复方案:暂无确认的一步修复方案。官方修复已合入 dev 分支,涉及两个提交:客户端校验(0007369f4、f100edb70)和错误渲染修复(#28260,d10d55211)。可优先尝试升级到包含这些修复的最新 dev 版本。

注意事项:上述修复属于 dev 分支的未发布版本,可能包含其他未稳定功能。若无法升级,可参考官方提交自行补丁,但未在 Issue 中验证该手动修复方案的完整效果。

问题场景

在 Open WebUI 的日历(Calendar)页面中,用户点击任意日期单元格或“Create”按钮打开事件创建弹窗后,输入标题并清空“When”行中的日期字段,再点击“Create”按钮。此时,请求仍会被发送,但后端返回 HTTP 422 错误,前端 Toast 仅显示 [object Object],用户无法得知具体错误信息。同样的问题也出现在编辑已有事件并清空日期时。

报错原文

issue: Creating a calendar event with the date cleared fails with an "[object Object]" toast

Network 面板中可见:

POST /api/v1/calendars/events/create
HTTP 422

Toast 显示:

[object Object]

原因分析

问题由两个独立的缺陷叠加导致:

  • 无效请求被发送:CalendarEventModal.sveltedateTimeToNs 函数中,当日期被清空后 dateStr 为空字符串,执行 new Date("T22:46") 会产生 Invalid Date,getTime() 返回 NaN,经 JSON.stringify 序列化为 null。后端模型 CalendarEventForm.start_at 是必填的 int 类型,因此请求必然失败。前端 submitHandler 已对标题做了校验,但从未校验日期。
  • 错误信息无法被渲染:FastAPI 的校验错误返回的 detail 是一个列表,而 Open WebUI 自身的 HTTPException 返回的 detail 是字符串。日历模块的 API 封装(src/lib/apis/calendar/index.ts)在捕获错误后直接抛回 err.detail,前端通过 toast.error(`${err}`) 渲染,将一个对象列表插入模板字符串自然变成了 [object Object]。字符串类型的错误在其他模块可正常显示,这个问题只会在 Pydantic 校验错误(detail 为列表)时体现。

环境排查

  • Open WebUI 版本:v0.11.0(dev)或更早版本。
  • 安装方式:Source(uvicorn + vite)编译运行,或通过 Docker 运行 dev 镜像。
  • 浏览器:Firefox,其他浏览器(如 Chrome)也可能存在,但 Issue 中未验证。
  • 后端依赖:FastAPI/Pydantic 版本未在 Issue 中提及,若需复现可关注 backend/open_webui/models/calendar.pystart_at 字段的类型定义。

解决步骤

  1. 升级到已修复的 dev 版本:官方已发布修复,包括客户端校验(提交 0007369f4、f100edb70)和错误渲染修复(#28260 合并的 d10d55211)。获取最新 dev 分支代码并重新构建。
  2. (临时方案,可优先尝试)手动补充前端校验:如果无法升级,可参考官方提交修改 src/lib/components/calendar/CalendarEventModal.svelte,在 submitHandler 中增加对日期字段的校验,清空时阻止提交并显示 “Date is required” 的 Toast。
  3. (临时方案)修正后端错误渲染:参考 src/lib/apis/images/index.tssrc/lib/apis/auths/index.ts 的做法,在 src/lib/apis/calendar/index.ts 的 catch 中对列表形式的 detail 进行归一化(如 detail.map(e => e.msg).join(', ')),确保前端能显示具体错误信息。

验证方法

按照 Issue 的复现步骤操作:进入日历页面 → 点击日期单元格或“Create”按钮 → 输入标题 → 在“When”行打开日期选择器并点击“Clear”清空日期 → 点击“Create”。确认不再出现 [object Object] 的 Toast,而是显示 “Date is required” 之类的明确提示,且请求不会被发送(Network 面板中不应出现 422 请求)。

参考来源

open-webui/open-webui #28133

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 19279

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注