可观测性后端【免费下载链接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.项目地址https://gitcode.com/gh_mirrors/hi/highlight点击查看免费下载本指南基于 highlight.io 官方集成文档docs-content/general/7_integrations/vercel-integration.md展开系统讲解如何将部署在 Vercel 上的应用接入 highlight.io 全栈监控平台。文章覆盖集成的两大核心能力——Vercel SDK 集成自动注入 Source Map 上传所需的 API Key与Vercel Log Drain 集成自动转发服务器端日志并结合仓库源码说明底层实现细节。读完本文你将掌握在 Vercel 上完成 Source Map 上传与日志收集的完整配置方法并理解其背后的工作机制。Vercel 集成概览一次安装两项能力highlight.io 为 Vercel 用户提供了官方集成在 Vercel 的 Integration 市场安装 highlight 集成后即可使用。安装并授权后该集成会为你提供两个核心能力能力作用适用场景Vercel SDK 集成将 Vercel 项目与你的 Highlight 项目关联并自动注入HIGHLIGHT_SOURCEMAP_API_KEY环境变量需要为前端/服务端代码上传 Source Map让错误堆栈可还原为源代码Vercel Log Drain 集成将 Vercel 产生的构建日志、函数日志、访问日志实时转发到 Highlight部署在 Vercel 上的 Serverless 应用需要集中化日志监控安装入口位于 Vercel 的 Highlight Integration 页面https://vercel.com/integrations/highlight安装时你可以在 Vercel 账户中按项目粒度授予访问权限。仓库中 Vercel Log Drain 的快速上手内容highlight.io/components/QuickstartContent/logging/hosting/vercel.tsx明确指出A log drain will automatically be created for all projects you grant access to.一旦安装集成并授权项目系统会自动为这些项目创建 Log Drain。也就是说你无需手动配置日志转发端点授权即接入。Vercel SDK 集成让 Source Map 上传零配置化自动注入的HIGHLIGHT_SOURCEMAP_API_KEY将 Vercel 项目与 Highlight 项目完成关联linking后highlight.io 会自动在你的 Vercel 项目环境中设置HIGHLIGHT_SOURCEMAP_API_KEY环境变量。这样一来凡是会读取该环境变量的工具都会自动获得上传凭证无需你再手工复制粘贴 API Key。官方集成文档特别说明highlight-run/sourcemap-uploader与withHighlightConfig这两个工具都会主动检查这个 API Key。需要提醒的是仓库源码与 Next.js 高级配置文档中使用的完整变量名是HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY见 sdk/highlight-next/src/util/with-highlight-config.ts 中的!!process.env.HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY ||判断集成文档中的写法是同一环境变量的简写实际使用时请以你项目中真实注入的变量名为准。方式一使用highlight-run/sourcemap-uploader命令行上传这是最直接的 Source Map 上传方式。该 CLI 的入口实现位于 sourcemap-uploader/src/index.ts它基于commander提供了upload子命令完整的参数如下npx highlight-run/sourcemap-uploader upload \ -k 你的Highlight API Key # 必填Highlight API Key等价于 -k, --apiKey -av 应用版本号 # 可选当前部署版本用于版本间堆栈还原 -p sourcemap目录 # 可选sourcemap 所在目录默认为当前目录 . -bp basePath # 可选上传 sourcemap 的基础路径 -bu 后端URL # 可选自托管部署时指向自己的 Highlight 后端各参数语义如下--apiKey-k必填项。集成注入的HIGHLIGHT_SOURCEMAP_API_KEY正是为了让你在 CI/CD 或本地脚本中免去硬编码这个值--appVersion-av标记当前部署版本方便在发布新版本后准确定位用户上报错误对应的源码版本--path-p指定 Source Map 文件所在目录默认扫描当前目录--basePath-bp为上传的 Source Map 指定 URL 基础路径用于匹配运行时请求的实际 JS 文件路径--backendUrl-bu仅自托管self-hosted部署需要指向你自己的 Highlight 后端地址SaaS 用户无需设置。在 Vercel 场景下你可以把上传命令放进build脚本或在构建后执行利用集成注入的环境变量完成认证。方式二通过withHighlightConfig在 Next.js 构建时自动上传对于 Next.js 项目更推荐使用highlight-run/next/config导出的withHighlightConfig包装器。它不止负责上传 Source Map还会自动在next.config.js中注入/highlight-events请求代理让前端会话录制与错误上报数据走你自己的域名从而绕过广告拦截器ad-blocker的干扰。完整的配置示例同时开启私有 Source Map 上传与请求代理// next.config.js const { withHighlightConfig } require(highlight-run/next/config) /** type {import(next).NextConfig} */ const nextConfig { experimental: { serverComponentsExternalPackages: [highlight-run/node, require-in-the-middle], }, productionBrowserSourceMaps: false, // 私有 Source Map 场景下保持关闭 } module.exports withHighlightConfig(nextConfig, { apiKey: API KEY, // 若已注入 HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY 环境变量可省略 uploadSourceMaps: true, })几点实践要点开启私有 Source Map 上传时productionBrowserSourceMaps必须为false或直接省略保持不对外公开源码映射如果 Vercel 环境中已经注入了HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY则apiKey参数可以省略——这正是 Vercel SDK 集成省心的地方构建成功后日志中会出现类似Uploaded /root/dev/highlight/next-test/.next/server/pages/index.js的输出表示 Source Map 已上传成功底层上传逻辑由 sdk/highlight-next/src/util/highlight-webpack-plugin.ts 调用highlight-run/sourcemap-uploader的uploadSourcemaps函数完成出错时会输出Highlight Failed to upload sourcemaps便于排查。上传成功后你在前端错误面板中看到的堆栈将直接对应压缩混淆前的源代码行号大幅提升排查效率。为什么要在 Vercel 上做 Source Map 集成Vercel 默认将生产环境前端资源混淆压缩原始堆栈无法直接阅读。通过上述两种方式之一上传 Source Map 后highlight.io 的错误监控会自动进行堆栈还原源码中的增强逻辑见 backend/stacktraces/enhancer.go使每个前端错误都能定位到具体的源文件与行号。而 Vercel 集成最大的价值在于免去了手工管理 API Key 的环节——项目关联后环境变量自动注入CI 构建与本地验证开箱即用。Vercel Log Drain 集成Serverless 场景下的可靠日志通道Log Drain 解决了什么问题highlight.io 的 Next.js SDK 在传统服务器运行时可以通过PageRouterHighlight/AppRouterHighlight包装器直接捕获服务端错误与日志各运行时对应的捕获组件见 docs-content/getting-started/fullstack-frameworks/next-js/7_advanced-config.md 中的对照表。但在 Vercel 的 Serverless 环境下Node.js 与 Edge 函数进程会被极快地回收日志往往来不及全部送出进程就已被冻结。该文档对此有明确说明These wrappers typically fail in serverless runtimes (including Vercel), because we cannot guarantee that the serverless process will stay alive long enough to send all log data to Highlight.Vercel Log Drain 正是解决这一短命进程问题的可靠方案——由 Vercel 平台侧将日志直接转发给 Highlight不依赖应用进程存活。Log Drain 会转发哪些日志根据集成文档Vercel 会向 Highlight 转发以下三类日志构建日志Build Logs部署与构建阶段产生的日志函数日志Lambda / Edge Function LogsServerless Node.js 函数与 Edge 函数的运行时日志静态访问日志Static Access Logs对静态资源与页面的访问记录。快速接入步骤安装集成访问 Vercel 的 Highlight Integration 页面完成安装并授予需要接入的项目权限自动创建 Log Drain授权后系统自动为相关项目创建 Log Drain无需手工配置日志端点查看日志登录 Highlight 控制台在仪表盘中点击Logs日志标签页即可查看实时流转过来的日志控制日志采集量如果你希望限制日志收集范围例如只保留特定项目或按量控制成本可以在 highlight.io 的billing计费设置中配置日志限额。详细的 Vercel 托管日志接入指引见 docs-content/getting-started/4_server/6_hosting/vercel.md该页面以快速上手QuickStart组件的形式呈现与仓库中 highlight.io/components/QuickstartContent/logging/hosting/vercel.tsx 的实现一一对应。与 Next.js 全栈监控结合从日志到会话的完整链路Vercel 集成并非孤立功能它与 highlight.io 的 Next.js 全栈方案协同工作前端HighlightInit /组件负责客户端会话录制Session Replay与前端日志采集服务端PageRouterHighlight、AppRouterHighlight分别包装 Page Router 与 App Router 的 API 端点捕获服务端错误与日志Edge 运行时EdgeHighlight兼容 Vercel Edge Runtime 的精简 API支持在 Edge 函数中上报错误、日志并关联会话Edge 支持在 docs-content/general/changelog/changelog-25.md 的变更记录中有介绍日志兜底由于 Serverless 进程存活时间不可控服务端日志统一依赖 Vercel Log Drain 作为可靠通道。通过withHighlightConfig的请求代理与tracingOrigins配置还能把前后端数据关联到同一条用户会话上实现日志→错误→会话回放的完整排查链路。常见问题与注意事项环境变量名差异集成文档写作HIGHLIGHT_SOURCEMAP_API_KEY而源码sdk/highlight-next/src/util/with-highlight-config.ts与 Next.js 高级配置文档使用HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY配置时请以实际注入到 Vercel 环境变量列表中的名称为准日志丢失如果你在 Vercel 上直接依赖 SDK 包装器收集日志可能因函数进程被快速回收而丢日志请优先使用 Log DrainSource Map 泄露风险私有 Source Map 上传模式下务必保持productionBrowserSourceMaps: false避免源码映射随前端资源公开分发自托管部署自托管用户在使用highlight-run/sourcemap-uploader上传 Source Map 时需通过--backendUrl指定自己的 Highlight 后端地址。小结highlight.io 的 Vercel 集成为部署在 Vercel 上的应用提供了两条开箱即用的监控通路SDK 集成自动注入 Source Map 上传凭证让错误堆栈还原无需手工配 KeyLog Drain 集成则以平台级转发的方式解决 Serverless 短命进程下的日志丢失问题。两者结合配合 Next.js SDK 的前后端包装器即可在 Vercel 上获得覆盖构建、运行时、访问请求与用户会话的全栈可观测能力。赞分享可观测性后端【免费下载链接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.项目地址https://gitcode.com/gh_mirrors/hi/highlight点击查看免费下载相关推荐小爱音箱接入 ChatGPT 完整指南用 MiGPT 4 个阶段跑通专属语音助手小爱音箱接入 ChatGPT 完整指南用 MiGPT 4 个阶段跑通专属语音助手 MiGPT 是个把小爱音箱接入 ChatGPT、豆包等大模型的开源项目装上可观测性后端如何用Alpamayo 1.5-10B构建一个能理解复杂交通场景的自动驾驶大脑如何用Alpamayo 1.5 10B构建一个能理解复杂交通场景的自动驾驶大脑 想象一下你的自动驾驶系统正行驶在繁忙的市中心路口突然一个行人从路边冲出同MobileOne_s3重新定义移动端AI推理速度与效率的平衡艺术MobileOne_s3重新定义移动端AI推理速度与效率的平衡艺术 当移动设备上的实时图像识别成为常态当AR应用需要毫秒级响应当智能摄像头必须在资源受限的上一篇揭秘NW.js背后的开源力量核心开发者的创新旅程与技术突破下一篇NumPy 掩码数组numpy.ma深度指南从 MaskedArray 设计原理到实战性能优化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
jetson-inference 实战：用 Flask + REST 打造多模型 WebRTC 交互式 DNN 控制台 人工智能计算机视觉深度学习微调 【免费下载链接】jetson-inference Hello AI World guide to deploying deep-learning inference networks and deep vision primitives with TensorRT and NVIDIA Jetson. 项目地址： https://gitcode.com/gh_mirrors/je/jetson-inf… · 2026/9/25 7:06:07
Inoproshop库文件管理与封装实战：版本兼容与组态避坑 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 7:06:07
Atlas 300V 24G推理加速卡部署YOLO目标检测全流程指南 最近“atlas”这个词在我们这边的技术群里热度一直不低，尤其是两个问题反复被翻出来问：atlas部署yolo到底怎么搞，还有atlas 300v 24g 是运算加速卡吗。这两个问题其实是一件事的两面：大家手上拿到了一块Atlas 300V 24G，… · 2026/9/25 7:05:48
Windows11本地部署OpenClaw：从WSL2环境到飞书接入的完整实践 最近我在 Windows11 上折腾 OpenClaw，前前后后花了两天，把一个“装不上、跑不通”的状态调到了稳定运行，现在它每天定时抓资讯、生成摘要、发到飞书，基本替代了我早上刷新闻的习惯。OpenClaw 本质上不是又一个聊天框，而… · 2026/9/25 7:33:50
Java+JSP+MySQL学生宿舍管理系统：从环境搭建到部署避坑全解析 简介：Java Web开发中，JSP/Servlet与MySQL的组合是理解服务端动态网页技术的基础。其核心原理在于：浏览器请求经Tomcat容器路由至Servlet，业务逻辑通过JDBC访问MySQL，最终由JSP渲染响应页面。这种分层架构虽然“传统”&… · 2026/9/25 7:33:50
从异步导出到Redis连接池：第三十二周技术复盘与思考 第三十二周的周报我拖到周四深夜才动笔。不是没东西写，恰恰相反，这周经历了订单模块重构收尾、报表导出功能发布、还有一次线上接口超时的排查，随便挑一件都够写两千字。但真正坐下来打开文档的时候，我反而反复删了好几版——原因… · 2026/9/25 7:33:44
ESXi将USB硬盘映射为本地磁盘并创建VMFS的完整实操指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 7:33:38
开源LLM代码审查工作流：CLI+Git原生集成实践 1. 项目概述：这不是一个“工具”，而是一套可落地的开源代码审查工作流open-code-review 这个名字乍看像某个具体软件，但实际它代表的是一类正在快速成型的新型开发实践——用开源、透明、可审计的方式，把大语言模型（LL… · 2026/9/25 7:33:38
用Trellis驯服AI编码代理：规范文件如何让代码不再失控 1. AI编码代理的失控时刻：为什么没人敢放手让它写代码如果你这段时间用过Cursor、Windsurf这类AI编程工具，八成已经体会过那种"又爽又怕"的感觉。爽的是，一个前端页面、一个后台接口、一段脚本，敲几行提示词就出来了&am… · 2026/9/25 7:33:38
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
