Client-side JavaScript exception and tracing library for Apache SkyWalking APM.

Clone this repo:

Branches

  1. 472f0d5 Merge pull request #10 from Fine0830/docs-project by 吴晟 Wu Sheng · 4 days ago master
  2. 1ea0124 docs: remove docs by Qiuxia Fan · 4 days ago
  3. 81d2a01 docs: update by Qiuxia Fan · 5 days ago
  4. 04c0170 docs: update by Qiuxia Fan · 5 days ago
  5. a19bb79 docs: add chinese doc by Qiuxia Fan · 5 days ago

Apache SkyWalking Client JS

Apache SkyWalking Client-side JavaScript exception and tracing library.

  • Make browser as a start of whole distributed tracing
  • Provide metrics and error collection to SkyWalking backend.
  • Lightweight

Usage

  • Install
    the skywalking-client-js runtime library is available at npm
npm install skywalking-client-js --save
  • Init SDK
import ClientMonitor from 'skywalking-client-js';
ClientMonitor.register({
  service: 'test-ui',
  pagePath: 'http://localhost:8080/',
  serviceVersion: 'v1.0.0',
});
  • SDK Reference
ParameterTypeDescriptionRequiredDefault Value
serviceStringproject idtrue-
serviceVersionStringproject verisontrue-
pagePathStringproject pathtrue-
jsErrorsBooleanSupport js errors monitoringfalsetrue
apiErrorsBooleanSupport API errors monitoringfalsetrue
resourceErrorsBooleanSupport resource errors monitoringfalsetrue
useFmpBooleanCollect FMP (first meaningful paint) data of the first screenfalsefalse
enableSPABooleanMonitor the page hashchange event and report PV, which is suitable for single page application scenariosfalsefalse
autoTracePerfBooleanSupport automatic sending of performance datafalsetrue
vueBooleanSupport vue errors monitoringfalsetrue
  • API Reference

register()
After the SDK is initially completed, it calls the register() interface to revise some of the configuration items. For details of the SDK configuration item, see SDK reference.

register() grammar

ClientMonitor.register(params);

register() call parameters
|Parameter|Type|Description|Required|Default Value| |----|----|---------|----|----| |params|Object|Configuration items and values to be modified|true|-|

setPerformance()
After the page onLoad, call the setPerformance() interface to report the default performance metrics.

How to use setPerformance()

  1. Set the SDK configuration item autoTracePerf to false to turn off automatic reporting performance metrics and wait for manual triggering of escalation.
  2. Call ClientMonitor.setPerformance(object) method to report automatically the default performance metrics.

setPerformance() examples of use

import ClientMonitor from 'skywalking-client-js';

ClientMonitor.setPerformance({
  reportUrl: 'http://example.com',
  service: 'skywalking-ui',
  serviceVersion: 'v8.1.0',
  pagePath: location.href,
  useFmp: true
});
  • Special scene

SPA Page
In spa (single page application) single page application, the page will be refreshed only once. The traditional method only reports PV once after the page loading, but cannot count the PV of each sub-page, and can't make other types of logs aggregate by sub-page.
The SDK provides two processing methods for spa pages:

  1. Enable spa automatic parsing
    This method is suitable for most single page application scenarios with URL hash as the route.
    In the initialized configuration item, set enableSPA to true, which will turn on the page's hashchange event listening (trigger re reporting PV), and use URL hash as the page field in other data reporting.
  2. Manual reporting
    This method can be used in all single page application scenarios. This method can be used if the first method is invalid.
    The SDK provides a setpage method to manually update the page name when data is reported. When this method is called, the page PV will be re reported by default. For details, see setPerformance().
app.on('routeChange', function (next) {
  ClientMonitor.setPerformance({
    reportUrl: 'http://example.com',
    service: 'skywalking-ui',
    serviceVersion: 'v8.1.0',
    pagePath: location.href,
    useFmp: true
  });
});   

Development

  • Install Modules
npm install
  • Projects that use this project need to do the following
npm link path/skywalking-client-js
import ClientMonitor from '../node_modules/skywalking-client-js/src/index';
ClientMonitor.register({
  service: 'test-ui',
  pagePath: 'http://localhost:8080/',
  serviceVersion: 'v1.0.0'
});
npm run start

Contact Us

  • Submit an issue
  • Mail list: dev@skywalking.apache.org. Mail to dev-subscribe@skywalking.apache.org, follow the reply to subscribe the mail list.
  • Join #skywalking channel at Apache Slack. If the linke is not working, find the latest one at Apache INFRA WIKI.
  • QQ Group: 392443393(2000/2000, not available), 901167865(available)

License

Apache 2.0