【标题】 【学习工作赛道】Hyz.Trace — 分布式链路追踪可视化分析平台 Demo
【正文】
1. Demo 简介
是什么： 一个可交互的分布式链路追踪可视化监控 Dashboard 系统，包含全局概览、链路搜索、Trace 瀑布图详情、服务拓扑图、链路聚合分析、火焰图、异常分析 7 大核心页面，后端配套完整的 .NET 链路追踪 SDK 和数据采集服务。
面向谁： 后端开发工程师（排查接口性能问题）、SRE/运维工程师（监控服务健康状态）、技术负责人（全局掌控微服务链路质量）。
主要功能：
- 全局概览大盘 — KPI 指标卡片（总请求数、错误率、P99 延迟）+ 应用健康表 + 趋势图，一眼掌握系统整体状态
- 链路追踪搜索 — 高级筛选（应用名、耗时范围、状态码、时间区间）+ 散点图视图，快速定位目标 Trace
- Trace 瀑布图详情 — 甘特视图展示完整调用链，Span 详情面板显示方法名、耗时、参数、异常堆栈
- 服务拓扑图 — 力导向布局展示服务间依赖关系，流量动画直观显示调用量和错误率
- 链路聚合分析 — RED 指标（请求速率、错误率、耗时分布）+ 热力图 + 慢操作排行，发现性能瓶颈
- 火焰图 — 冰柱图视图展示调用栈耗时分布，支持搜索高亮，快速定位慢方法
- 异常分析 — Issue 指纹分组 + 错误趋势图，集中管理所有异常信息
界面展示：
2. Demo 创作思路
灵感来源： 在实际 .NET 微服务项目中，我们深受"链路黑洞"之苦——订单接口变慢，却无法快速定位是支付服务超时、缓存失效还是数据库死锁导致的。市面上的 APM 工具（如 SkyWalking、Jaeger）功能强大但界面复杂、学习成本高，团队迫切需要一个开箱即用、一目了然的可视化方案。
从创意到 Demo 的演进：
报名阶段，我使用 TRAE Work 的 Solo Design 功能生成了 7 个 HTML 页面的创意产物，验证了"深色科技风 + 高信息密度"的设计方向。进入初赛后，我的目标是把这些静态 HTML 变成 真正可交互、有真实数据支撑的 Demo 。
实现路径：
- 后端 SDK 开发 — 用 TRAE IDE 开发完整的 .NET 链路追踪 SDK（Hyz.Trace），支持方法级自动追踪、跨服务上下文传播、多种采样策略
- 数据采集服务 — 实现 HTTP 和 gRPC 双协议上报器，批量缓冲 + 定时刷新 + 指数退避重试，生产级可靠性
- Dashboard 后端 — 基于 ASP.NET Core 实现数据接收、存储（FreeSql + ClickHouse）、查询 API
- 前端交互实现 — 将创意 HTML 转化为可交互的 Dashboard，接入真实 Trace 数据，实现动态筛选、实时刷新、图表联动
为什么这样设计： 评审最看重的是"真实价值"，所以我不仅做了前端 UI，还配套了完整的后端 SDK 和数据流，让 Demo 能够展示真实的链路追踪场景，而不是空壳页面。
3. Demo 体验地址
- Hyz.Trace Dashboard
- 演示账户： admin 密码: admin123 （若无数据：时间刷选选择全部时间）
4. TRAE 实践过程
完整开发流程：
第一阶段：从创意 HTML 到可交互 Dashboard
使用 TRAE IDE 打开报名阶段生成的 HTML 文件，通过对话让 TRAE 帮我：
- 将静态 HTML 拆分为组件化结构
- 添加数据绑定和事件监听
- 实现与后端 API 的对接
- 优化交互体验（筛选、排序、图表联动）
第二阶段：后端 SDK 开发
通过 TRAE 对话完成核心模块：
- TraceContext 上下文管理（基于 AsyncLocal 的异步传播）
- TraceScope 追踪范围（自动记录耗时、状态、异常）
- 三种 AOP 方案（DynamicProxy / Source Generator / Fody IL 编织）
- 采样策略（全量、概率、速率限制、模式匹配）
- 敏感数据脱敏（自动过滤 password/token/secret）
第三阶段：数据采集与存储
使用 TRAE 实现：
- HTTP 上报器（批量缓冲 + 指数退避重试 + 超量保护）
- gRPC 上报器（客户端流式 RPC + protobuf 序列化）
- FreeSql 存储（SQLite/MySQL/PostgreSQL）
- ClickHouse 存储（高性能列式数据库）
第四阶段：测试与优化
通过 TRAE 生成 255 个单元测试，覆盖核心功能，修复并发问题（如 TraceConfiguration.GetSampler() 的双检查锁）。
第四阶段：构建打包Hyz.Trace.Client nuget包 ，支持一键安装客户端
使用 TRAE 实现：
- 把多个类库打包到一个聚合NUGET包中
关键步骤截图：
Session ID：
- Session 1: .3308879699525324:dd63ebcbd285c167b322ec3e4122c5e7_6a43742dac012932dbb3ef2d.6a43743bac012932dbb3ef30.6a43743ab471c83c3f4e9414:Trae CN.T(2026/6/30 15:46:03)
- Session 2: .3308879699525324:acc37d9c2d39932d18b1ad49dd127bdd_6a445c3862411925c9cf2e56.6a44626c62411925c9cf30cf.6a44626cb3daaea9284bf856:Trae CN.T(2026/7/1 08:42:20)
- Session 3: .3308879699525324:1a04b73646cb35582b9eb3136efb8fad_6a445c3862411925c9cf2e56.6a445d7362411925c9cf2e58.6a445d71b3daaea9284bf854:Trae CN.T(2026/7/1 08:21:07)
- Session 4: .3308879699525324:f609e1a5fc3373c60c0aa2869a7c83f2_6a5340e4b5cc82864c64d183.6a537d45b5cc82864c64de8e.6a537d44708656232fd961a9:Trae CN.T(2026/7/12 19:40:53)
- Session 5: .3308879699525324:7a67160128ee45fa05b585113c77541c_6a54a88a813692a2b7027eaf.6a54a9e2813692a2b7027eb1.6a54a9e1f807ab86e7852e1c:Trae CN.T(2026/7/13 17:03:30)
- Session 5: .3308879699525324:fc28f7df31e0658c0ec5edc175ba91c0_6a56f45a69721cab9c66f895.6a56f5d569721cab9c66f954.6a56f5d4ff48c14f8bc34cc3:Trae CN.T(2026/7/15 10:52:05)
开发心得：
TRAE 在这个项目中发挥了关键作用：
- 加速前端开发 — 从静态 HTML 到可交互 Dashboard，TRAE 帮我快速完成数据绑定、事件处理、图表集成，节省了大量前端开发时间。
- 复杂代码生成 — Source Generator 和 Fody IL 编织涉及大量 Roslyn API 和 Mono.Cecil 操作，TRAE 给出了高质量的实现，并且自动处理了边界情况。
- 问题排查与修复 — 遇到异步上下文丢失、FreeSql 状态污染、gRPC 端口冲突等问题时，TRAE 能够快速定位根因并给出解决方案。
- 测试覆盖 — TRAE 自动生成了全面的单元测试，帮助我发现了很多潜在的并发问题和边界情况。
踩坑经历：
- koa-connect wrapper 导致 ctx 泄漏 — 最初尝试用 koa-connect 包装中间件，发现会导致上下文泄漏，最终用原生 Koa 中间件重写解决。
- ECharts 隐藏 tab 中不渲染 — 切换到隐藏 tab 后图表不显示，需要在 tab 切换时显式触发 resize。
- FreeSql ISelect 状态污染 — 在 Sqlite/MySql/PostgreSQL 中，Count() 后的 ISelect 会污染状态，导致后续 Avg/Max/Min 聚合失败，必须分开查询。
- gRPC 端口配置 — 5000 端口用 HTTP/1.1（REST），5001 端口用 HTTP/2（gRPC），需要在 launchSettings.json 中明确配置。
5. 对应的报名审核通过的帖子链接