Highlight项目前后端全链路追踪技术解析

原创于 2025-06-05 09:06:03 发布 · 374 阅读

CC 4.0 BY-SA版权

Highlight项目前后端全链路追踪技术解析

highlight highlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging and more. 项目地址: https://gitcode.com/gh_mirrors/hi/highlight

前言

在现代Web应用开发中，前端与后端的交互日益复杂，当出现问题时，开发人员往往需要在多个系统间来回切换排查，效率低下。Highlight项目提供了一套完整的全链路追踪解决方案，能够将前端用户会话与后端错误日志关联起来，极大提升问题排查效率。

核心概念

全链路追踪的核心在于建立前端请求与后端处理之间的关联关系。Highlight通过以下机制实现：

请求追踪：在前端发起请求时注入追踪标识
错误关联：后端捕获错误时携带追踪标识
会话重现：结合前端录屏与后端日志，完整还原问题场景

实现步骤

前端配置

首先需要在前端应用中完成基础配置：

import { H } from 'highlight.run';

H.init("<项目ID>", {
    // 启用网络请求记录
    networkRecording: {
        enabled: true,
        recordHeadersAndBody: true,
    },
    // 配置需要追踪的后端域名
    tracingOrigins: ['api.example.com', 'localhost:3000'],
    // 或者简单启用所有子域名追踪
    // tracingOrigins: true
});

关键配置说明：

networkRecording：开启后可以记录网络请求的header和body
tracingOrigins：指定需要追踪的后端服务地址，支持通配符匹配

后端集成

后端集成需要根据技术栈选择对应的SDK，主要完成以下工作：

中间件集成：解析前端传入的追踪header
错误捕获：将错误与追踪ID关联
日志记录：在日志中注入追踪上下文

目前Highlight支持的主流后端技术栈包括：

Go (Gin, Echo等框架)
Java (Spring等框架)
Node.js (Express, Koa等框架)
Python (Django, Flask, FastAPI等框架)
Ruby (Rails等框架)
Rust (Actix等框架)
.NET (ASP.NET Core等框架)

分布式系统追踪

在微服务架构中，请求可能经过多个服务，Highlight提供了两种追踪方案：

方案一：HTTP Header传递

// 服务间调用时手动传递header
await fetch('internal-service:8000/api', {
    headers: {
        'x-highlight-request': request.headers.get('x-highlight-request')
    }
})