从前端到后端：全栈全链路追踪与日志监控的落地实践与权衡

import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';

// 生成或获取当前会话的 TraceId
const getTraceId = (): string => {
  return uuidv4().replace(/-/g, '');
};

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

apiClient.interceptors.request.use((config) => {
  const traceId = getTraceId();
  
  // 注入标准或自定义追踪头
  config.headers['x-trace-id'] = traceId;
  
  // 顺带注入页面上下文，方便排查前端环境问题
  config.headers['x-client-route'] = window.location.pathname;
  
  return config;
});

// 全局未捕获错误上报
window.addEventListener('error', (event) => {
  reportError({
    message: event.message,
    stack: event.error?.stack,
    url: window.location.href,
    traceId: getTraceId(), // 关联错误上下文
  });
});

// traceContext.js
const { AsyncLocalStorage } = require('async_hooks');
const asyncLocalStorage = new AsyncLocalStorage();

module.exports = { asyncLocalStorage };

// middleware/trace.js
const { asyncLocalStorage } = require('../traceContext');
const { v4: uuidv4 } = require('uuid');

const traceMiddleware = (req, res, next) => {
  // 优先取前端传过来的 TraceId，没有则服务端兜底生成
  const traceId = req.headers['x-trace-id'] || uuidv4().replace(/-/g, '');
  
  // 设置响应头，便于前端或联调时快速定位
  res.setHeader('x-trace-id', traceId);

  // 将 Trace 上下文包裹在当前异步执行流中
  asyncLocalStorage.run(new Map([['traceId', traceId], ['path', req.path]]), () => {
    next();
  });
};

module.exports = traceMiddleware;

// logger.js
const winston = require('winston');
const { asyncLocalStorage } = require('./traceContext');

const customFormat = winston.format.printf(({ level, message, timestamp, ...meta }) => {
  const store = asyncLocalStorage.getStore();
  const traceId = store ? store.get('traceId') : 'no-trace-id';
  
  // 统一输出为 JSON 格式，方便日志收集器解析
  return JSON.stringify({
    timestamp,
    level,
    trace_id: traceId,
    message,
    ...meta
  });
});

const logger = winston.createLogger({
  format: winston.format.combine(
    winston.format.timestamp(),
    customFormat
  ),
  transports: [new winston.transports.Console()],
});

module.exports = logger;

const axios = require('axios');
const { asyncLocalStorage } = require('./traceContext');

async function callSubService(data) {
  const store = asyncLocalStorage.getStore();
  const traceId = store?.get('traceId');

  return axios.post('http://internal-service/api/do', data, {
    headers: { 'x-trace-id': traceId }
  });
}