Web Client JS

Web Client Js 客户端 JavaScript 异常和跟踪库，并向 Web 后端提供指标和错误收集。

安装

npm install web-client-js --save

步骤一：接入SDK

import browserClient from 'web-client-js';

// 默认上报收集的数据到 `http:// + window.location.host + /browser/perfData`
browserClient('init', {
  collector: 'http://127.0.0.1:12800',
  service: 'APM-FRONTEND-APM',
  serviceVersion: 'V1.1.0',
  pagePath: location.href,
  useFmp: true
})
browserClient('start')

（可选）步骤二：详细配置

在上述示例中只配置了基础参数，还有多个配置项。所有支持的配置项字段名和字段意义如下：

| 参数 | 类型 | 描述 | 必填 | 默认值 | | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | | collector | String | 默认情况下，收集的数据将被上报到当前域名(/browser/perfData)； 不过， 通常我们推荐你使用网关/代理重定向这些数据到OAP(resthost:restport)。如果你设置了这一项, 这些数据会被上报到你设置的域名。 注意跨域问题： 跨源资源共享解决方案. | false | - | | service | String | 项目标识名称 | true | - | | serviceVersion | String | 项目版本号 | true | - | | pagePath | String | 项目路径，显示在后台的数据来源路径 | true | - | | jsErrors | Boolean | 支持 js 异常监控 | false | true | | apiErrors | Boolean | 支持 API 异常监控 | false | true | | resourceErrors | Boolean | 支持资源异常监控 | false | true | | useFmp | Boolean | 收集第一屏 FMP (first meaningful paint) 数据 | false | false | | enableSPA | Boolean | 监控页面 hashchange 事件然后上报 PV, 适用于单页应用场景 | false | false | | autoTracePerf | Boolean | 支持自动发送性能数据 | false | true | | vue | Vue | 支持 vue 错误监控 | false | undefined | | traceSDKInternal | Boolean | 支持跟踪 SDK 内部 RPC | false | false | | detailMode | Boolean | 支持在跨度中将 http 方法和 url 作为标签进行跟踪. | false | true | | noTraceOrigins | (string | RegExp)[] | noTraceOrigins 列表中的源将不会被跟踪 | false | [] | | traceTimeInterval | Number | 支持设置上报segments的间隔时间 | false | 60000 |

步骤三：验证上报

特殊场景

SPA 页面

在 spa (single page application) 单页应用中, 页面只会刷新一次. 传统方法只能在页面加载完以后上报一次PV, 不能计算每一个子页的PV,更不能在子页做其他的日志记录。 此SDK为单页应用提供2种方法上报:

1. 启用 spa 自动解析 该方法适用于大多数以URL哈希为路由的单页应用场景。
   在初始设置项中, 设置 enableSPA 为 true,将会开启页面 hashchange 事件监听 (触发重新上报 PV), 并在其他数据报告中使用网址哈希作为页面字段。
2. 手动上报 这个方法可以用在所有单页应用场景。当第一种方法失效时可以使用此方法。 此SDK提供一个设置页面方法来使上报时更新页面名称，当方法被调用，页面PV将被重新上报。

app.on('routeChange', function (next) {
  browserClient('init', {
    collector: 'http://127.0.0.1:12800',
    service: 'browser-app',
    serviceVersion: '1.0.0',
    pagePath: location.href,
    useFmp: true,
  })
  browserClient('start')
  
});

客户端网关服务器配置

server {
        keepalive_requests 120; #单连接请求上限次数。
        listen       8081;   #监听端口
        server_name  127.0.0.1;   #监听地址
        location  / {       #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
            root /Users/chenfei/study/vue01/dist/;  # 这个路径是存放打包后的 前端项目dist的路径
            index index.html;         # 访问入口文件
        }
     # 切记， 在docker启动的nginx 必须将该文件中所有的 localhost 改成服务器的 内网ip （不能为 127.0.0.1）
           location /browser {
               proxy_set_header   Host $host:$server_port;
               proxy_redirect off;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_connect_timeout 60;
               proxy_read_timeout 600;
               proxy_send_timeout 600;
               proxy_pass http://127.0.0.1:12800/browser;
           }

 }