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

Clone this repo:
  1. ba5b742 build: update version and desc (#43) by Qiuxia Fan · 6 days ago master v0.4.0
  2. e0872a9 docs: update documents for 0.4.0 (#42) by Qiuxia Fan · 7 days ago
  3. 04dd6b3 fix: wrong URL when using relative path in xhr (#41) by Zhenxu Ke · 5 weeks ago
  4. 239f4b2 fix: update stack and message in logs (#40) by Qiuxia Fan · 6 weeks ago
  5. e2ef596 Update (#39) by Mountain Ghost · 7 weeks ago

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



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:// + + /browser/perfData` in default
  collector: '',
  service: 'test-ui',
  pagePath: '/current/page/name',
  serviceVersion: 'v1.0.0',


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 id. NOTE, in tracing data requests, the service parameter is service + '<browser>'.true-
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
vueVueSupport vue errors monitoringfalseundefined
traceSDKInternalBooleanSupport tracing SDK internal RPC.falsefalse
detailModeBooleanSupport tracing http method and url as tags in spans.falsetrue

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';

  collector: '',
  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) {
    collector: '',
    service: 'browser-app',
    serviceVersion: '1.0.0',
    pagePath: location.href,
    useFmp: true

Tracing range of data requests in the browser

Support tracking these(XMLHttpRequest and fetch) two modes of data requests. At the same time, Support tracking libraries and tools that base on XMLHttpRequest and fetch, such as Axios, SuperAgent, OpenApi and so on.

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

Release Guide

All committers should follow Release Guide to publish the official release.


Apache 2.0