You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/12/31 05:28:42 UTC
[skywalking-client-js] branch master updated: feat: add a timer for
reporting segments (#30)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-client-js.git
The following commit(s) were added to refs/heads/master by this push:
new be79fb7 feat: add a timer for reporting segments (#30)
be79fb7 is described below
commit be79fb7c9901e4a7ec11573ad43cb512bf7e2782
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Thu Dec 31 13:28:34 2020 +0800
feat: add a timer for reporting segments (#30)
---
src/performance/index.ts | 4 ++--
src/services/report.ts | 43 +++++++++++++++++++------------------------
src/services/task.ts | 2 +-
src/trace/segment.ts | 19 ++++++++++++++-----
4 files changed, 36 insertions(+), 32 deletions(-)
diff --git a/src/performance/index.ts b/src/performance/index.ts
index d8cfcce..6823de1 100644
--- a/src/performance/index.ts
+++ b/src/performance/index.ts
@@ -48,10 +48,10 @@ class TracePerf {
serviceVersion: options.serviceVersion,
service: options.service,
};
- new Report('PERF', options.collector).sendByFetch(perfInfo);
+ new Report('PERF', options.collector).sendByXhr(perfInfo);
// clear perf data
this.clearPerf();
- }, 5000);
+ }, 8000);
}
private clearPerf() {
diff --git a/src/services/report.ts b/src/services/report.ts
index fbf666c..32949b3 100644
--- a/src/services/report.ts
+++ b/src/services/report.ts
@@ -25,18 +25,23 @@ class Report {
this.url = collector + ReportTypes.ERRORS;
} else if (type === 'SEGMENT') {
this.url = collector + ReportTypes.SEGMENT;
- } else {
+ } else if (type === 'SEGMENTS') {
+ this.url = collector + ReportTypes.SEGMENTS;
+ } else if (type === 'PERF') {
this.url = collector + ReportTypes.PERF;
}
}
public sendByFetch(data: any) {
delete data.collector;
+ if (!this.url) {
+ return;
+ }
const sendRequest = new Request(this.url, { method: 'POST', body: JSON.stringify(data) });
fetch(sendRequest)
.then((response) => {
- if (response.status < 200 || response.status > 300) {
+ if (response.status >= 400) {
throw new Error('Something went wrong on api server!');
}
})
@@ -45,31 +50,21 @@ class Report {
});
}
- private reportByImg(data: any) {
- if (!this.checkUrl(this.url)) {
+ public sendByXhr(data: any) {
+ delete data.collector;
+ if (!this.url) {
return;
}
- try {
- const imgObj = new Image();
-
- imgObj.src = `${this.url}?v=${new Date().getTime()}&${this.formatParams(data)}`;
- } catch (error) {
- console.log(error);
- }
- }
-
- private formatParams(data: any) {
- return Object.keys(data)
- .map((name: string) => `${encodeURIComponent(name)}=${encodeURIComponent(data[name])}`)
- .join('&');
- }
+ const xhr = new XMLHttpRequest();
- private checkUrl(url: string) {
- if (!url) {
- return;
- }
- const urlRule = /^[hH][tT][tT][pP]([sS]?):\/\//;
- return urlRule.test(url);
+ xhr.open('post', this.url, true);
+ xhr.setRequestHeader('Content-Type', 'application/json');
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4 && xhr.status < 400) {
+ console.log('Report successfully');
+ }
+ };
+ xhr.send(JSON.stringify(data));
}
}
export default Report;
diff --git a/src/services/task.ts b/src/services/task.ts
index 87ecd1c..0fd44df 100644
--- a/src/services/task.ts
+++ b/src/services/task.ts
@@ -28,7 +28,7 @@ class TaskQueue {
return;
}
const item = this.queues[0];
- new Report('ERROR', item.data.collector).sendByFetch(item.data);
+ new Report('ERROR', item.data.collector).sendByXhr(item.data);
this.queues.splice(0, 1);
this.fireTasks();
}
diff --git a/src/trace/segment.ts b/src/trace/segment.ts
index 6dfe8dc..0c22640 100644
--- a/src/trace/segment.ts
+++ b/src/trace/segment.ts
@@ -24,7 +24,7 @@ import { CustomOptionsType } from '../types';
import windowFetch from '../interceptors/fetch';
export default function traceSegment(options: CustomOptionsType) {
- const segments = [] as any;
+ let segments = [] as any;
const segCollector: { event: XMLHttpRequest; startTime: number }[] | any = [];
// inject interceptor
xhrInterceptor();
@@ -50,7 +50,7 @@ export default function traceSegment(options: CustomOptionsType) {
const service = String(Base64.encode(segment.service + ServiceTag));
const instance = String(Base64.encode(segment.serviceInstance));
const endpoint = String(Base64.encode(options.pagePath));
- const peer = String(Base64.encode(location.href));
+ const peer = String(Base64.encode(location.host));
const index = segment.spans.length;
const values = `${1}-${traceIdStr}-${segmentId}-${index}-${service}-${instance}-${endpoint}-${peer}`;
@@ -70,7 +70,7 @@ export default function traceSegment(options: CustomOptionsType) {
isError: event.detail.status >= 400 ? true : false,
parentSpanId: segment.spans.length,
componentId: ComponentId,
- peer: segCollector[i].event.responseURL,
+ peer: segCollector[i].event.responseURL.split('://')[1],
};
segment.spans.push(exitSpan);
segCollector.splice(i, 1);
@@ -80,7 +80,16 @@ export default function traceSegment(options: CustomOptionsType) {
}
});
window.onbeforeunload = function (e: Event) {
- // todo Navigator.sendBeacon(url, FormData);
- new Report('SEGMENTS', options.collector).sendByFetch(segments);
+ if (!segments.length) {
+ return;
+ }
+ new Report('SEGMENTS', options.collector).sendByXhr(segments);
};
+ setInterval(() => {
+ if (!segments.length) {
+ return;
+ }
+ new Report('SEGMENTS', options.collector).sendByXhr(segments);
+ segments = [];
+ }, 50000);
}