SkyWalking 前端监控

两行法桐2026-08-10 13:54

配置

引入依赖

yaml 复制代码

pnpm install skywalking-client-js --save

创建skywalking.js

yaml 复制代码

import ClientMonitor from 'skywalking-client-js';

let initialized = false;

/**
 * 初始化 SkyWalking 前端性能监控
 *
 */
export function setupSkyWalking() {
  if (typeof window === 'undefined' || initialized) {
    return;
  }

  ClientMonitor.register({
    // 采集服务地址
    collector: 'http://ip:12800', //修改为skywalking oap的ip
    // 服务名称
    service: '服务名称',
    // 服务版本
    serviceVersion: '1.0.0',
    pagePath: window.location.href, // 加上页面路径

    // 错误追踪
    jsErrors: true,
    apiErrors: true,
    resourceErrors: true,
    vue: true,

    // 性能追踪
    autoTracePerf: true,
    useFmp: true,
    enableSPA: true,

    // 网络追踪
    traceSDKInternal: false,
    detailMode: false,
    noTraceOrigins: [],
    traceTimeInterval: 60000,
  });

  initialized = true;
}

main.js

yaml 复制代码

  // 初始化 SkyWalking 前端性能监控
  setupSkyWalking();

验证

访问页面触发几个接口后等待一分钟，可以看到请求skywalking的请求。

在skywalking ui中找到对应服务的trace 根据traceId可以查到对应的链路。

SkyWalking-oap在内网的情况

oap在内网，用户访问业务系统无法直接发送trace到oap，需要通过nginx转发。 0. 修改地址

arduino 复制代码

collector: '<http://127.0.0.1:12800>',改为 http://域名/skywalking

修改nginx.conf配置，在对应域名的server模块下添加

bash 复制代码

        location /skywalking/ {
        ##内网下skywalking-oap服务的ip
            proxy_pass http://ip:12800/; 
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 允许大一点的请求体
            client_max_body_size 10m;
       }

重启nginx