skywalking-client-js

https://github.com/apache/skywalking-client-js

Apache SkyWalking客户端 JavaScript 异常和跟踪库。

• 向 SkyWalking 后端提供指标和错误收集。

• 轻的

• 使浏览器成为整个分布式跟踪的开始

注意，SkyWalking Client JS 0.8.0 及更高版本需要 SkyWalking v9。

用法

安装

运行时库skywalking-client-js可在npm获得。

npm install skywalking-client-js --save

快速开始

skywalking-client-js 需要 SkyWalking 8.2+

用户可以使用register方法自动加载和报告数据。

import ClientMonitor from 'skywalking-client-js';
// Report collected data to `http:// + window.location.host + /browser/perfData` in default
ClientMonitor.register({
  # Use core/default/restPort in the OAP server.
  # If External Communication Channels are activated, `receiver-sharing-server/default/restPort`,
  # ref to https://skywalking.apache.org/docs/main/latest/en/setup/backend/backend-expose/
  collector: 'http://127.0.0.1:12800', 
  service: 'test-ui',
  pagePath: '/current/page/name',
  serviceVersion: 'v1.0.0',
});

手动收集指标

使用该setPerformance方法在页面加载时或任何其他有意义的时刻报告指标。

设置SDK配置项autoTracePerf为false，关闭自动上报性能指标，等待手动触发升级。
调用ClientMonitor.setPerformance(object)方法上报

例子

import ClientMonitor from 'skywalking-client-js';

ClientMonitor.setPerformance({
  collector: 'http://127.0.0.1:12800',
  service: 'browser-app',
  serviceVersion: '1.0.0',
  pagePath: location.href,
  useFmp: true
});

特殊场景

SPA页面

在spa（single page application）单页面应用中，页面只会刷新一次。传统方式在页面加载后只上报一次PV，无法统计每个子页面的PV，也无法对其他类型的日志进行子页面聚合。

SDK提供了两种spa页面的处理方式：

开启spa自动解析

该方式适用于大部分以URL hash为路由的单页应用场景。
在初始化的配置项中，设置enableSPA为true，会开启页面的hashchange事件监听（触发重新上报PV），其他数据上报时使用URL hash作为页面字段。

手动上报

该方式适用于所有单页应用场景。如果第一种方法无效，可以使用此方法。
SDK提供了设置页面的方法，可以在数据上报时手动更新页面名称。调用该方法时，默认会重新上报页面PV。有关详细信息，请参阅 setPerformance()。

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

跟踪浏览器中的数据请求范围

支持跟踪这两种（XMLHttpRequest和Fetch API）模式的数据请求。同时，支持Axios、SuperAgent、OpenApi等基于XMLHttpRequest和fetch的跟踪库和工具。

捕获框架中的错误，包括 React、Angular、Vue。

// Angular
import { ErrorHandler } from '@angular/core';
import ClientMonitor from 'skywalking-client-js';
export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error) {
    ClientMonitor.reportFrameErrors({
      collector: 'http://127.0.0.1:12800',
      service: 'angular-demo',
      pagePath: '/app',
      serviceVersion: 'v1.0.0',
    }, error);
  }
}
@NgModule({
  ...
  providers: [{provide: ErrorHandler, useClass: AppGlobalErrorhandler}]
})
class AppModule {}

// React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    ClientMonitor.reportFrameErrors({
      collector: 'http://127.0.0.1:12800',
      service: 'react-demo',
      pagePath: '/app',
      serviceVersion: 'v1.0.0',
    }, error);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

// Vue

Vue.config.errorHandler = (error) => {
  ClientMonitor.reportFrameErrors({
    collector: 'http://127.0.0.1:12800',
    service: 'vue-demo',
    pagePath: '/app',
    serviceVersion: 'v1.0.0',
  }, error);
}

根据不同的页面或模块，给span添加自定义标签。

app.on('routeChange', function () {
  ClientMonitor.setCustomTags([
    { key: 'key1', value: 'value1' },
    { key: 'key2', value: 'value2' },
  ]);
});