定时任务前端日志不显示，bug排查

一、问题现象在定时任务管理页面中点击「Logs」按钮查看任务执行日志时弹窗中没有任何数据显示但后端接口返回正常。二、排查过程第一步确认后端接口是否正常打开浏览器开发者工具F12切换到 Network 选项卡点击「Logs」按钮查看请求请求 URL/scheduler/job/logs?jobId46响应状态200 OK响应内容json{ status: 200, message: Successful, data: { logs: [ { id: 47, jobId: 46, jobName: bbb, status: 0, startTime: 2026-04-15T05:40:04.39000:00, endTime: 2026-04-15T05:40:37.43000:00 } ] } }结论后端接口正常数据已返回。第二步在loadLogs方法中添加日志在loadLogs方法中添加console.log打印响应数据javascriptasync loadLogs() { console.log( 开始加载日志 ) const res await this.axios.get(/scheduler/job/logs, { params: { jobId: this.currentJob.id } }) console.log(完整响应:, res) console.log(res.data:, res.data) console.log(res.data.data:, res.data.data) // ... }控制台输出text完整响应: {data: {…}, status: 200, ...} res.data: {status: 200, message: Successful, data: {…}} res.data.data: {logs: Array(1)}结论前端收到了数据res.data.data是{logs: [...]}不是数组。第三步检查前端解析逻辑原有解析代码javascriptif (Array.isArray(data)) { this.logList data } else if (data data.list) { this.logList data.list } else { this.logList [] }问题发现后端返回的是{ logs: [...] }前端只处理了list字段没有处理logs字段所以走了else分支logList被设为空数组第四步对比任务列表接口任务列表接口/list返回的是{ list: [...] }前端能正常显示。对比接口返回格式前端处理结果/list{ list: [...] }data.list✅ 正常/logs{ logs: [...] }没有处理logs❌ 空白三、解决方案修改loadLogs方法增加对logs字段的处理javascriptasync loadLogs() { if (!this.currentJob) return this.logLoading true try { const res await this.axios.get(/scheduler/job/logs, { params: { jobId: this.currentJob.id, pageNum: this.logPageNum, pageSize: this.logPageSize } }) if (res.data res.data.status 200) { const data res.data.data // 兼容多种返回格式 if (Array.isArray(data)) { this.logList data this.logTotal data.length } else if (data data.list Array.isArray(data.list)) { this.logList data.list this.logTotal data.total || data.list.length } else if (data data.logs Array.isArray(data.logs)) { // ✅ 新增处理 logs 字段 this.logList data.logs this.logTotal data.total || data.logs.length } else { console.warn(未知的日志数据格式:, data) this.logList [] this.logTotal 0 } } } catch (err) { console.error(err) } finally { this.logLoading false } }四、验证结果修改后再次点击「Logs」按钮text控制台输出: 日志加载成功共 1 条 页面显示: 日志列表正常展示五、问题根因总结问题原因解决方案日志不显示后端返回{ logs: [...] }前端只处理了list增加对logs字段的处理任务列表正常后端返回{ list: [...] }前端有处理-六、经验教训前后端字段命名要统一建议统一使用list或data前端解析要兼容多种格式不要假设只有一种返回格式调试时善用 console.log打印关键变量快速定位问题对比正常接口和异常接口找出差异点