Google Git
Sign in
apache / skywalking-client-js / 9ef0d96996121a9d3d48e990e4db64323c7cb054
commit9ef0d96996121a9d3d48e990e4db64323c7cb054[log] [tgz]
authorqinhang3 <qinhang3@hotmail.com>Mon Nov 09 17:53:27 2020 +0800
committerGitHub <noreply@github.com>Mon Nov 09 17:53:27 2020 +0800
treea0663f74c699401c26478c83c63800df39f5654c
parent1e6a8239094e1736f2af75bac7cc4df90dc6b192 [diff]
FIX: sslTime Not an int32 value (#17)
1 file changed
tree: a0663f74c699401c26478c83c63800df39f5654c
  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';

// Report collected data to `http:// + window.location.host + /browser/perfData` in default
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(/browser/perfData. Then, typically, we recommend you use a Gateway/proxy to redirect the data to the OAP(resthost:restport). 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 set page 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
  });
});

Demo project

Demo project provides instrumented web application with necessary environment, you could just simple use it to see the data SkyWalking collected and how SkyWalking visualizes on the UI. See more information, click here.

Contact Us

License

Apache 2.0