the skywalking-client-js runtime library is available at npm
npm install skywalking-client-js --save
import ClientMonitor from 'skywalking-client-js';
ClientMonitor.register({ service: 'test-ui', pagePath: 'http://localhost:8080/', serviceVersion: 'v1.0.0', });
Parameter | Type | Description | Required | Default Value |
---|---|---|---|---|
service | String | project id | true | - |
serviceVersion | String | project verison | true | - |
pagePath | String | project path | true | - |
jsErrors | Boolean | Support js errors monitoring | false | true |
apiErrors | Boolean | Support API errors monitoring | false | true |
resourceErrors | Boolean | Support resource errors monitoring | false | true |
useFmp | Boolean | Collect FMP (first meaningful paint) data of the first screen | false | false |
enableSPA | Boolean | Monitor the page hashchange event and report PV, which is suitable for single page application scenarios | false | false |
autoTracePerf | Boolean | Support automatic sending of performance data | false | true |
vue | Boolean | Support vue errors monitoring | false | true |
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()
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 });
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:
app.on('routeChange', function (next) { ClientMonitor.setPerformance({ reportUrl: 'http://example.com', service: 'skywalking-ui', serviceVersion: 'v8.1.0', pagePath: location.href, useFmp: true }); });
npm install
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
dev-subscribe@skywalking.apache.org
, follow the reply to subscribe the mail list.#skywalking
channel at Apache Slack. If the linke is not working, find the latest one at Apache INFRA WIKI.Apache 2.0