配置

引入依赖

pnpm install skywalking-client-js --save

创建skywalking.js

import ClientMonitor from 'skywalking-client-js';let initialized = false;/**
* 初始化 SkyWalking 前端性能监控
*/
export function setupSkyWalking {
if {
return;}
ClientMonitor.register({
// 采集服务地址
collector: 'http://ip:',//修改为skywalking oap的ip
// 服务名称
service: '服务名称',// 服务版本
serviceVersion: '.',pagePath: window.location.href,// 加上页面方法
// 错误追踪
jsErrors: true。apiErrors: true,resourceErrors: true,vue: true,// 性能追踪
autoTracePerf: true,useFmp: true,enableSPA: true,// 网络追踪
traceSDKInternal: false,detailMode: false,noTraceOrigins:,traceTimeInterval:
});initialized = true;}

main.js

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

验证

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

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

SkyWalking-oap在内网的情况

oap在内网。使用者访问业务程序无法直接发送trace到oap，需要通过nginx转发。

1. 修改地址

   collector: 'http://ip:',改为 'http://域名/skywalking'

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

location /skywalking/ {
##内网下skywalking-oap服务的ip
proxy_pass http://ip:/;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;}

1. 重启nginx：确保配置生效！⚠️如果不重启可能导致数据无法正常转发！⚠️

使用者痛点解析：为什么你总是配置失败？😰😰😰

• 问题1：跨域报错！我明明设置了CORS，为什么还是不行？，？😡😡😡 - 跨域问题不仅仅要看OAP是否设置了CORS，还要检查你的前端代码是否正确传递了相关headers！说起来，❗️❗️❗️

+++++ docs/SkyWalking_前端链路追踪如何实现？.md

javascript pnpm install skywalking-client-js --save

javascript import ClientMonitor from 'skywalking-client-js';let initialized = false;

/** * 初始化 SkyWalking 前端性能监控 */ export function setupSkyWalking { if { return;} ClientMonitor.register;initialized=true;}

javascript /*初始化 Sky Walking前端性能监控*/ setupSkyWalking;

1.修改地址 collector:'http://ip:',改为 http://域名/sw-agent

bash location /sw-agent { ## 内网下 sky walking-oap 的 ip proxy_pass http://ip:/;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;}

3.重启 nginx