不能，navigator.sendbeacon在file://协议下被浏览器明确禁止，需运行于http://或https://环境（如vs code live server），否则会抛出domexception或静默失败。
Navigator.sendBeacon 能否在 HTML 预览环境（如 VS Code Live Server、CodePen、本地 file://）中正常工作
不能，绝大多数情况下会失败。因为 sendBeacon 要求页面处于「可导航」状态且协议为 http: 或 https:，而 file:// 协议被浏览器明确禁止使用该 API —— Chrome 会直接抛出 DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not CORS-same-origin is not supported.，Firefox 则静默忽略或报 SecurityError。
常见误操作是直接双击打开 index.html 测试崩溃上报，结果控制台无报错、服务端收不到数据，却以为代码写错了。
- 必须用本地 HTTP 服务：例如 VS Code 的
Live Server扩展（启动后地址是http://127.0.0.1:5500）、npx http-server、或 Python 的python -m http.server 8000 - 避免使用浏览器“打开文件”方式；检查地址栏是否以
http://开头 - CodePen / JSFiddle 等在线编辑器默认支持
sendBeacon，但需确保项目设置里没勾选「Force HTTPS only」之类导致混合内容拦截
如何在页面即将卸载前可靠捕获并上报 JavaScript 崩溃
sendBeacon 的核心价值在于「页面关闭/跳转时仍能发出请求」，但它本身不捕获错误 —— 必须配合 window.addEventListener('beforeunload') 或 window.addEventListener('pagehide')，再结合全局错误监听。
注意：error 事件无法在 beforeunload 中触发上报（此时 JS 执行已受限），所以得提前注册监听，并在卸载前把错误暂存到内存或 sessionStorage。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
window.addEventListener('error')和window.addEventListener('unhandledrejection')捕获所有同步/异步错误，存入全局数组或sessionStorage.crashLog - 在
beforeunload回调中读取缓存，调用navigator.sendBeacon('/api/log', payload)；payload 推荐用URLSearchParams或Blob（类型必须是text/plain或application/x-www-form-urlencoded） - 不要在
beforeunload里做复杂计算或 await，浏览器可能中断执行 -
pagehide比beforeunload更可靠（尤其对 iOS Safari 和后台标签页），建议两个事件都监听并去重
sendBeacon 请求体格式与后端接收注意事项
sendBeacon 只支持 POST，且只接受 ArrayBuffer、Blob、FormData、URLSearchParams 或 USVString 作为 body。它不会触发 CORS 预检，但服务端必须允许 Content-Type: text/plain（这是默认值）或显式声明的类型。
如果后端框架（如 Express、Django）默认只解析 application/json，就会收不到数据 —— 这是上线后最常被忽略的兼容问题。
- 前端推荐用
new URLSearchParams({ error: e.message, stack: e.stack, url: location.href })构造 payload，简洁且服务端易解析 - 若用
Blob，务必指定 type：new Blob([jsonStr], { type: 'application/json' })，否则部分浏览器会当text/plain发送 - Node.js + Express 示例：需加
app.use(express.text({ type: 'text/plain' }))或app.use(express.urlencoded({ extended: true }))才能拿到URLSearchParams数据 - Nginx 默认不限制 POST 大小，但若上报含完整堆栈，建议限制单次 payload ≤ 64KB（
sendBeacon无明确上限，但过大会失败且无提示）
为什么崩溃上报有时发不出去？几个真实踩坑点
不是代码写错，而是浏览器行为和运行环境共同作用的结果 —— 很多问题只有压测或用户真实退出时才暴露。
- Chrome 对同一域名下
sendBeacon调用有频率限制（约每秒 1–2 次），连续崩溃多次只会上报最后一次 - iOS Safari 在页面进入后台后约 5 秒内终止所有 JS，
pagehide触发后若未立即调用sendBeacon，请求会被丢弃 - 如果页面因脚本卡死（long task > 50ms）导致
beforeunload无法及时执行，上报就彻底丢失 —— 此时应考虑降级方案：错误发生时立刻发一次普通fetch（带keepalive: true），再在卸载时补一次sendBeacon -
sendBeacon不返回 Promise，无法await或判断成功；唯一验证方式是服务端日志 + 浏览器 Network 面板过滤beacon类型请求（DevTools → Network → Filter →is:beacon）
真正难的不是调用 API，而是在各种浏览器、各种退出路径（关标签、关窗口、前进后退、iOS 滑动返回、PWA 后台杀进程）下，让那条关键日志稳定抵达服务器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
