HTML5上传日志记录核心是监听XMLHttpRequest.upload.onprogress等事件，需手动用XHR或fetch发起上传，捕获进度、状态、错误等信号，而非依赖表单提交；关键字段包括文件名、大小、起止时间、状态码、错误详情及响应体，须脱敏处理并避免高频日志影响性能。
HTML5 上传日志记录的核心是监听 XMLHttpRequest 或 fetch 的底层事件
浏览器本身不提供“上传日志”API，所谓日志记录，本质是对上传过程的主动观测与数据采集。关键不是 HTML 表单提交本身，而是你用 JavaScript 控制上传时是否捕获了进度、状态、错误等信号。
直接用 提交表单（无 JS 干预）无法获取上传进度或失败原因——它走的是传统表单提交流，没有可监听的中间状态。
- 必须使用
XMLHttpRequest或fetch+FormData手动发起上传 - 日志字段通常包括：
filename、filesize、startTime、endTime、status（200/500/timeout）、error（如有）、loaded/total（用于计算最终速率） - 不要依赖
onload单一回调来记“成功日志”——它不区分 HTTP 状态码，400/500 也会触发
XMLHttpRequest.upload.onprogress 是唯一能实时记录上传行为的钩子
这是实现“过程日志”的不可替代接口。注意：它只存在于 XMLHttpRequest.upload 对象上，XMLHttpRequest 实例本身没有 onprogress。
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total * 100).toFixed(1);
console.log(`[${new Date().toISOString()}] ${file.name}: ${percent}% (${e.loaded}/${e.total})`);
}
};
xhr.onload = () => {
console.log(`[${new Date().toISOString()}] ${file.name} finished: ${xhr.status}`);
};
xhr.onerror = () => {
console.log(`[${new Date().toISOString()}] ${file.name} failed: network error`);
};
xhr.send(formData);-
e.lengthComputable必须判断，某些服务端未返回Content-Length时e.total为 0，会导致除零错误 - 不要在
onprogress中频繁写入本地文件或发日志请求——会拖慢上传，建议节流（如每 500ms 最多记一次）或暂存内存，上传完成后批量上报 -
XMLHttpRequest比fetch更适合日志场景，因为fetch不暴露上传进度（目前标准仍无upload.onprogress等效机制）
捕获上传失败的真实原因不能只看 xhr.status
xhr.status === 0 很常见，但它不代表“没发出去”，而往往意味着请求被 CORS 拦截、HTTPS 混合内容阻止、或用户手动取消。此时 xhr.statusText 是空字符串，xhr.responseText 为空，但日志里必须区分类型。
立即学习“前端免费学习笔记（深入）”；
- 检查
xhr.readyState：如果为0（UNSENT）或1（OPENED），说明根本没发；若为4（DONE）但status === 0，大概率是网络层失败 - 监听
xhr.upload.onerror和xhr.upload.onabort—— 它们比xhr.onerror更早触发，能捕获上传阶段中断（如用户点了取消按钮） - 对超时要单独处理：
xhr.timeout = 30000并监听xhr.ontimeout，否则它会归入onerror，和 DNS 失败混在一起
服务端返回非 2xx 响应时，前端日志必须保留原始响应体
很多后端在验证失败时返回 400 Bad Request 并附带 JSON 错误信息（如 {"code":"FILE_TOO_LARGE","message":"文件不能超过10MB"}），但默认情况下 xhr.response 在非 2xx 状态下可能为空或被忽略。
- 务必设置
xhr.responseType = 'json'（或'text'），并在onload中统一检查xhr.status，而不是只信任onload的存在 - 即使
xhr.status >= 400，只要xhr.response可读，就应记入日志字段serverResponse，这对排查“为什么被拒”至关重要 - 避免在日志中拼接敏感字段（如完整 token、用户 ID），上传日志常被导出分析，需做基础脱敏（如
filename.replace(/(\.[^.]*)$/, '[REDACTED]$1')）
上传日志真正的难点不在“怎么记”，而在“记什么才有用”——时间戳精度、错误分类粒度、是否关联 request ID、是否包含客户端环境（UA、网络类型），这些决定日志能否真正辅助定位问题。别只满足于 console.log。
