在电信网络优化平台中，一个看似简单的“查询小区性能”请求，背后可能涉及网关路由、SSO 鉴权、Perf 服务计算、JOM 工单关联以及复杂的 SQL 聚合查询。当用户反馈“页面加载慢”时，传统的日志排查方式如同大海捞针：我们需要分别在 Nginx、Gateway、多个微服务和数据库中查找线索，效率极低且难以还原完整的调用上下文。
为了解决这一痛点，我们引入了 Apache SkyWalking，构建了一套从 Vue 3 前端 到 Spring Cloud Alibaba 后端，再到 数据库/缓存 的全链路可观测性体系。本文将分享如何无缝接入 SkyWalking，实现分布式追踪、拓扑自动发现及性能瓶颈的快速定位。
一、 为什么选择 SkyWalking？
相比 Zipkin 或 Jaeger，SkyWalking 在 Java 生态中具有显著优势：
二、 架构设计与接入方案
1. 后端接入：Spring Cloud Alibaba + SkyWalking Agent
我们采用 Sidecar 或 InitContainer 模式在 K8s 中部署 SkyWalking OAP Server 和 Elasticsearch（存储引擎）。后端微服务只需在启动命令中挂载 Agent。
Dockerfile 改造示例：
FROM eclipse-temurin:11-jre-alpine
WORKDIR /app
COPY perf-service.jar app.jar
# 下载 SkyWalking Agent
ADD https://archive.apache.org/dist/skywalking/8.9.0/apache-skywalking-apm-es7-8.9.0.tar.gz /opt/skywalking/
RUN tar -zxvf /opt/skywalking/apache-skywalking-apm-es7-8.9.0.tar.gz -C /opt/skywalking/
ENV SW_AGENT_NAME=perf-service
ENV SW_AGENT_COLLECTOR_BACKEND_SERVICES=oap-server:11800
ENTRYPOINT ["java", "-javaagent:/opt/skywalking/skywalking-agent/skywalking-agent.jar", "-jar", "app.jar"]
关键配置 (agent.config)：
- agent.service_name：区分不同微服务（如 jom-service, sso-service）。
- collector.backend_service：指向 OAP 服务器地址。
- plugin.jdbc.trace_sql_parameters：开启 SQL 参数追踪（注意脱敏），便于分析慢查询原因。
2. 前端接入：SkyWalking JS Agent
为了追踪从用户点击按钮到后端响应的全过程，我们在 Vue 3 项目中引入 skywalking-client-js。
安装依赖：
npm install skywalking-client-js
初始化配置 (main.ts)：
import ClientMonitor from 'skywalking-client-js';
ClientMonitor.register({
collector: 'http://skywalking-collector.example.com', // 前端数据上报地址
service: 'cnoap-frontend',
pagePath: location.href,
useFmp: true, // 开启首屏加载时间监控
});
// 可选：手动追踪特定的 AJAX 请求
import axios from 'axios';
axios.interceptors.request.use(config => {
const segmentId = ClientMonitor.currentSegmentId();
if (segmentId) {
config.headers['sw8'] = segmentId; // 携带追踪 ID 到后端
}
return config;
});
三、 核心功能实战
1. 全链路追踪：定位“慢”在哪里
当运维人员反馈“基站列表加载超过 5 秒”时，我们打开 SkyWalking 的 Trace 页面：
SELECT * FROM ne_cell WHERE province_code = '32' AND status = 1 ORDER BY create_time DESC;
2. 服务拓扑：发现隐藏依赖
SkyWalking 自动绘制服务间的调用关系图。在一次版本发布后，拓扑图显示 jom-service 对 perf-service 的调用延迟突然升高。
- 根因分析：通过对比历史数据，发现 perf-service 近期增加了复杂的 MR 栅格计算逻辑，导致 CPU 负载飙升。
- 优化措施：将该计算逻辑异步化，放入 RocketMQ 消息队列处理，同步接口仅返回任务 ID，从而解耦了实时性要求。
3. 前端性能监控：优化用户体验
通过 SkyWalking 的 Browser Performance 面板，我们可以监控：
- FMP (First Meaningful Paint)：首屏有效绘制时间。
- API 错误率：哪些接口频繁返回 500 或 404。
- JS 错误：捕获 Vue 组件渲染异常或未处理的 Promise Rejection。
例如，我们发现 GIS 地图模块在加载大量基站Marker时，主线程阻塞导致页面卡顿。通过监控数据定位到具体的 JS 函数，随后引入 Web Worker 进行坐标计算，显著提升了交互流畅度。
四、 告警与自动化运维
SkyWalking 支持基于规则的告警。我们配置了以下关键指标：
告警信息通过 Webhook 推送至钉钉/企业微信，并附带 Trace ID，方便开发人员直接点击链接跳转至对应的追踪详情，实现“秒级定位”。
五、 总结
通过引入 Apache SkyWalking，我们构建了电信运维平台的“透视眼”：
- 全栈可视：打通了 Vue 前端、Spring Cloud 微服务、MySQL/Redis 的数据孤岛。
- 无侵入集成：Java Agent 机制让老系统也能轻松享受可观测性红利。
- 数据驱动优化：从凭经验猜瓶颈，转变为凭数据做决策，显著提升了系统稳定性和开发效率。
这套监控体系不仅保障了日常运维的高效开展，也为后续的系统容量规划、架构演进提供了坚实的数据支撑。
