Google Git
Sign in
apache / skywalking-client-js / refs/tags/v0.1.0
commit3d7177295e55d1db03d3174ca9a3d7615cc44c49[log] [tgz]
authorzhang-wei <pknfe@outlook.com>Sun Oct 25 23:11:16 2020 +0800
committerGitHub <noreply@github.com>Sun Oct 25 23:11:16 2020 +0800
tree622161b6c7c48bd00ffabc86e11a4b30084a07a8
parent6e84d8bb7dc80de4043673a1588abd48526a7f53 [diff]
Add release doc and script (#16)
12 files changed
tree: 622161b6c7c48bd00ffabc86e11a4b30084a07a8
  1. .github/
  2. src/
  3. .asf.yaml
  4. .gitignore
  5. .prettierrc
  6. CHANGES.md
  7. index.js
  8. LICENSE
  9. Makefile
  10. NOTICE
  11. package-lock.json
  12. package.json
  13. README.md
  14. release.md
  15. server.js
  16. tsconfig.json
  17. tslint.json
  18. webpack.config.js
README.md

Apache SkyWalking Client JS

Apache SkyWalking Client-side JavaScript exception and tracing library.

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

Usage

Install

the skywalking-client-js runtime library is available at npm

npm install skywalking-client-js --save

Quick Start

SkyWalking Client JS requires SkyWalking 8.2+

User could use register method to load and report data automatically.

import ClientMonitor from 'skywalking-client-js';

ClientMonitor.register({
  service: 'test-ui',
  pagePath: '/current/page/name',
  serviceVersion: 'v1.0.0',
});

Parameters

The register method supports the following parameters.

ParameterTypeDescriptionRequiredDefault Value
collectorStringIn default, the collected data would be reported to current domain. If you set this, the data could be reported to another domain, NOTE the Cross-Origin Resource Sharing (CORS) issuse and solution.false-
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 sending of performance data automatically.falsetrue
vueBooleanSupport vue errors monitoringfalsetrue

Collect Metrics Manually

Use the setPerformance method to report metrics at the moment of page loaded or any other moment meaningful.

  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
  • Examples
import ClientMonitor from 'skywalking-client-js';

ClientMonitor.setPerformance({
  service: 'browser-app',
  serviceVersion: '1.0.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({
    service: 'browser-app',
    serviceVersion: '1.0.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

License

Apache 2.0