@openreplay/tracker 16.4.9 → 16.4.10-beta.0

package/dist/cjs/entry.js

@@ -5276,7 +5276,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.4.9'; // TODO: version compatability check inside each plugin.
+        this.version = '16.4.10-beta.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -8767,15 +8767,6 @@ class BeaconProxy {
     }
 }
 
-var RequestState;
-(function (RequestState) {
-    RequestState[RequestState["UNSENT"] = 0] = "UNSENT";
-    RequestState[RequestState["OPENED"] = 1] = "OPENED";
-    RequestState[RequestState["HEADERS_RECEIVED"] = 2] = "HEADERS_RECEIVED";
-    RequestState[RequestState["LOADING"] = 3] = "LOADING";
-    RequestState[RequestState["DONE"] = 4] = "DONE";
-})(RequestState || (RequestState = {}));
-
 /**
  * I took inspiration in few stack exchange posts
  * and Tencent vConsole library (MIT)
@@ -8787,19 +8778,19 @@ class ResponseProxyHandler {
     constructor(resp, item) {
         this.resp = resp;
         this.item = item;
-        this.mockReader();
     }
     set(target, key, value) {
         return Reflect.set(target, key, value);
     }
     get(target, key) {
         const value = Reflect.get(target, key);
+        if (key === "arrayBuffer" || key === "blob") {
+            return typeof value === "function" ? value.bind(target) : value;
+        }
         switch (key) {
-            case 'arrayBuffer':
-            case 'blob':
-            case 'formData':
-            case 'json':
-            case 'text':
+            case "formData":
+            case "json":
+            case "text":
                 return () => {
                     this.item.responseType = key.toLowerCase();
                     // @ts-ignore
@@ -8809,74 +8800,13 @@ class ResponseProxyHandler {
                     });
                 };
         }
-        if (typeof value === 'function') {
+        if (typeof value === "function") {
             return value.bind(target);
         }
         else {
             return value;
         }
     }
-    mockReader() {
-        let readerReceivedValue;
-        if (!this.resp.body) {
-            // some browsers do not return `body` in some cases, like `OPTIONS` method
-            return;
-        }
-        if (typeof this.resp.body.getReader !== 'function') {
-            return;
-        }
-        const clonedResp = this.resp.clone();
-        const _getReader = clonedResp.body.getReader;
-        // @ts-ignore
-        clonedResp.body.getReader = () => {
-            const reader = _getReader.apply(this.resp.body);
-            // when readyState is already 4,
-            // it's not a chunked stream, or it had already been read.
-            // so should not update status.
-            if (this.item.readyState === RequestState.DONE) {
-                return reader;
-            }
-            const _read = reader.read;
-            const _cancel = reader.cancel;
-            this.item.responseType = 'arraybuffer';
-            // @ts-ignore
-            reader.read = () => {
-                return _read.apply(reader).then((result) => {
-                    if (!readerReceivedValue) {
-                        // @ts-ignore
-                        readerReceivedValue = new Uint8Array(result.value);
-                    }
-                    else {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        const newValue = new Uint8Array(readerReceivedValue.length + result.value.length);
-                        newValue.set(readerReceivedValue);
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        newValue.set(result.value, readerReceivedValue.length);
-                        readerReceivedValue = newValue;
-                    }
-                    this.item.endTime = performance.now();
-                    this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                    this.item.readyState = result.done ? 4 : 3;
-                    this.item.statusText = result.done ? String(this.item.status) : 'Loading';
-                    this.item.responseSize = readerReceivedValue.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
-                    if (result.done) {
-                        this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                    }
-                    return result;
-                });
-            };
-            reader.cancel = (...args) => {
-                this.item.cancelState = 2;
-                this.item.statusText = 'Cancel';
-                this.item.endTime = performance.now();
-                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                return _cancel.apply(reader, args);
-            };
-            return reader;
-        };
-    }
 }
 class FetchProxyHandler {
     constructor(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
@@ -8892,10 +8822,10 @@ class FetchProxyHandler {
         const init = argsList[1];
         if (!input ||
             // @ts-ignore
-            (typeof input !== 'string' && !(input === null || input === void 0 ? void 0 : input.url))) {
+            (typeof input !== "string" && !(input === null || input === void 0 ? void 0 : input.url))) {
             return target.apply(window, argsList);
         }
-        const isORUrl = input instanceof URL || typeof input === 'string'
+        const isORUrl = input instanceof URL || typeof input === "string"
             ? this.isServiceUrl(String(input))
             : this.isServiceUrl(String(input.url));
         if (isORUrl) {
@@ -8940,33 +8870,33 @@ class FetchProxyHandler {
         });
     }
     beforeFetch(item, input, init) {
-        let url, method = 'GET', requestHeader = {};
+        let url, method = "GET", requestHeader = {};
         // handle `input` content
-        if (typeof input === 'string') {
+        if (typeof input === "string") {
             // when `input` is a string
-            method = (init === null || init === void 0 ? void 0 : init.method) || 'GET';
+            method = (init === null || init === void 0 ? void 0 : init.method) || "GET";
             url = getURL(input);
             requestHeader = (init === null || init === void 0 ? void 0 : init.headers) || {};
         }
         else {
             // when `input` is a `Request` object
-            method = input.method || 'GET';
+            method = input.method || "GET";
             url = getURL(input.url);
             requestHeader = input.headers;
         }
         item.method = method;
-        item.requestType = 'fetch';
+        item.requestType = "fetch";
         item.requestHeader = requestHeader;
         item.url = url.toString();
-        item.name = (url.pathname.split('/').pop() || '') + url.search;
+        item.name = (url.pathname.split("/").pop() || "") + url.search;
         item.status = 0;
-        item.statusText = 'Pending';
+        item.statusText = "Pending";
         item.readyState = 1;
         if (!item.startTime) {
             // UNSENT
             item.startTime = performance.now();
         }
-        if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
+        if (Object.prototype.toString.call(requestHeader) === "[object Headers]") {
             item.requestHeader = {};
             for (const [key, value] of requestHeader) {
                 item.requestHeader[key] = value;
@@ -8997,7 +8927,8 @@ class FetchProxyHandler {
             item.header = {};
             for (const [key, value] of resp.headers) {
                 item.header[key] = value;
-                isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked;
+                isChunked =
+                    value.toLowerCase().indexOf("chunked") > -1 ? true : isChunked;
             }
             if (isChunked) {
                 // when `transfer-encoding` is chunked, the response is a stream which is under loading,
@@ -9012,7 +8943,9 @@ class FetchProxyHandler {
                 this.handleResponseBody(resp.clone(), item)
                     .then((responseValue) => {
                     item.responseSize =
-                        typeof responseValue === 'string' ? responseValue.length : responseValue.byteLength;
+                        typeof responseValue === "string"
+                            ? responseValue.length
+                            : responseValue.byteLength;
                     item.responseSizeText = formatByteSize(item.responseSize);
                     item.response = getStringResponseByType(item.responseType, responseValue);
                     const msg = item.getMessage();
@@ -9021,28 +8954,32 @@ class FetchProxyHandler {
                     }
                 })
                     .catch((e) => {
-                    if (e.name !== 'AbortError') {
+                    if (e.name !== "AbortError") {
                         throw e;
                     }
                 });
             }
-            return new Proxy(resp, new ResponseProxyHandler(resp, item));
+            const ct = (resp.headers.get("content-type") || "").toLowerCase();
+            const isTextLike = ct.includes("application/json") || ct.startsWith("text/");
+            return isTextLike
+                ? new Proxy(resp, new ResponseProxyHandler(resp, item))
+                : resp;
         };
     }
     handleResponseBody(resp, item) {
         // parse response body by Content-Type
-        const contentType = resp.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-            item.responseType = 'json';
+        const contentType = resp.headers.get("content-type");
+        if (contentType && contentType.includes("application/json")) {
+            item.responseType = "json";
             return resp.text();
         }
         else if (contentType &&
-            (contentType.includes('text/html') || contentType.includes('text/plain'))) {
-            item.responseType = 'text';
+            (contentType.includes("text/html") || contentType.includes("text/plain"))) {
+            item.responseType = "text";
             return resp.text();
         }
         else {
-            item.responseType = 'arraybuffer';
+            item.responseType = "arraybuffer";
             return resp.arrayBuffer();
         }
     }
@@ -9053,6 +8990,15 @@ class FetchProxy {
     }
 }
 
+var RequestState;
+(function (RequestState) {
+    RequestState[RequestState["UNSENT"] = 0] = "UNSENT";
+    RequestState[RequestState["OPENED"] = 1] = "OPENED";
+    RequestState[RequestState["HEADERS_RECEIVED"] = 2] = "HEADERS_RECEIVED";
+    RequestState[RequestState["LOADING"] = 3] = "LOADING";
+    RequestState[RequestState["DONE"] = 4] = "DONE";
+})(RequestState || (RequestState = {}));
+
 /**
  * I took inspiration in few stack exchange posts
  * and Tencent vConsole library (MIT)
@@ -9079,28 +9025,29 @@ class XHRProxyHandler {
             this.onTimeout();
         };
         this.item = new NetworkMessage(ignoredHeaders, setSessionTokenHeader, sanitize);
-        this.item.requestType = 'xhr';
+        this.item.requestType = "xhr";
     }
     get(target, key) {
         switch (key) {
-            case 'open':
+            case "open":
                 return this.getOpen(target);
-            case 'send':
+            case "send":
                 this.setSessionTokenHeader((name, value) => {
                     if (this.tokenUrlMatcher !== undefined) {
                         if (!this.tokenUrlMatcher(this.item.url)) {
                             return;
                         }
                     }
-                    target.setRequestHeader(name, value);
+                    if (target.readyState === 1)
+                        target.setRequestHeader(name, value);
                 });
                 return this.getSend(target);
-            case 'setRequestHeader':
+            case "setRequestHeader":
                 return this.getSetRequestHeader(target);
             default:
                 // eslint-disable-next-line no-case-declarations
                 const value = Reflect.get(target, key);
-                if (typeof value === 'function') {
+                if (typeof value === "function") {
                     return value.bind(target);
                 }
                 else {
@@ -9110,11 +9057,11 @@ class XHRProxyHandler {
     }
     set(target, key, value) {
         switch (key) {
-            case 'onreadystatechange':
+            case "onreadystatechange":
                 return this.setOnReadyStateChange(target, key, value);
-            case 'onabort':
+            case "onabort":
                 return this.setOnAbort(target, key, value);
-            case 'ontimeout':
+            case "ontimeout":
                 return this.setOnTimeout(target, key, value);
             // not tracked methods
         }
@@ -9128,9 +9075,12 @@ class XHRProxyHandler {
         this.item.endTime = performance.now();
         this.item.duration = this.item.endTime - this.item.startTime;
         this.updateItemByReadyState();
-        setTimeout(() => {
-            this.item.response = getStringResponseByType(this.item.responseType, this.item.response);
-        }, 0);
+        const rt = this.item.responseType || "";
+        if (rt === "" || rt === "text" || rt === "json") {
+            setTimeout(() => {
+                this.item.response = getStringResponseByType(rt, this.XMLReq.response);
+            }, 0);
+        }
         if (this.XMLReq.readyState === RequestState.DONE) {
             const msg = this.item.getMessage();
             if (msg) {
@@ -9140,7 +9090,7 @@ class XHRProxyHandler {
     }
     onAbort() {
         this.item.cancelState = 1;
-        this.item.statusText = 'Abort';
+        this.item.statusText = "Abort";
         const msg = this.item.getMessage();
         if (msg) {
             this.sendMessage(msg);
@@ -9148,27 +9098,28 @@ class XHRProxyHandler {
     }
     onTimeout() {
         this.item.cancelState = 3;
-        this.item.statusText = 'Timeout';
+        this.item.statusText = "Timeout";
         const msg = this.item.getMessage();
         if (msg) {
             this.sendMessage(msg);
         }
     }
     getOpen(target) {
-        const targetFunction = Reflect.get(target, 'open');
+        const targetFunction = Reflect.get(target, "open");
         return (...args) => {
             var _a, _b, _c;
             const method = args[0];
             const url = args[1];
-            this.item.method = method ? method.toUpperCase() : 'GET';
-            this.item.url = ((_a = url.toString) === null || _a === void 0 ? void 0 : _a.call(url)) || '';
-            this.item.name = (_c = (_b = this.item.url) === null || _b === void 0 ? void 0 : _b.replace(new RegExp('/*$'), '').split('/').pop()) !== null && _c !== void 0 ? _c : '';
+            this.item.method = method ? method.toUpperCase() : "GET";
+            this.item.url = ((_a = url.toString) === null || _a === void 0 ? void 0 : _a.call(url)) || "";
+            this.item.name =
+                (_c = (_b = this.item.url) === null || _b === void 0 ? void 0 : _b.replace(new RegExp("/*$"), "").split("/").pop()) !== null && _c !== void 0 ? _c : "";
             this.item.getData = genGetDataByUrl(this.item.url, {});
             return targetFunction.apply(target, args);
         };
     }
     getSend(target) {
-        const targetFunction = Reflect.get(target, 'send');
+        const targetFunction = Reflect.get(target, "send");
         return (...args) => {
             const data = args[0];
             this.item.requestData = genStringBody(data);
@@ -9176,7 +9127,7 @@ class XHRProxyHandler {
         };
     }
     getSetRequestHeader(target) {
-        const targetFunction = Reflect.get(target, 'setRequestHeader');
+        const targetFunction = Reflect.get(target, "setRequestHeader");
         return (...args) => {
             if (!this.item.requestHeader) {
                 this.item.requestHeader = {};
@@ -9212,34 +9163,44 @@ class XHRProxyHandler {
             case RequestState.UNSENT:
             case RequestState.OPENED:
                 this.item.status = RequestState.UNSENT;
-                this.item.statusText = 'Pending';
+                this.item.statusText = "Pending";
                 if (!this.item.startTime) {
                     this.item.startTime = performance.now();
                 }
                 break;
             case RequestState.HEADERS_RECEIVED:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Loading';
+                this.item.statusText = "Loading";
                 this.item.header = {};
                 // eslint-disable-next-line no-case-declarations
-                const header = this.XMLReq.getAllResponseHeaders() || '', headerArr = header.split('\n');
+                const header = this.XMLReq.getAllResponseHeaders() || "", headerArr = header.split("\n");
                 // extract plain text to key-value format
                 for (let i = 0; i < headerArr.length; i++) {
                     const line = headerArr[i];
                     if (!line) {
                         continue;
                     }
-                    const arr = line.split(': ');
+                    const arr = line.split(": ");
                     const key = arr[0];
-                    this.item.header[key] = arr.slice(1).join(': ');
+                    this.item.header[key] = arr.slice(1).join(": ");
                 }
                 break;
             case RequestState.LOADING:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Loading';
-                if (!!this.XMLReq.response && this.XMLReq.response.length) {
-                    this.item.responseSize = this.XMLReq.response.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                this.item.statusText = "Loading";
+                const response = this.XMLReq.response;
+                if (response) {
+                    const respSize = typeof response === "string"
+                        ? response.length
+                        : response instanceof ArrayBuffer
+                            ? response.byteLength
+                            : typeof Blob !== "undefined" && response instanceof Blob
+                                ? response.size
+                                : 0;
+                    if (respSize) {
+                        this.item.responseSize = respSize;
+                        this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                    }
                 }
                 break;
             case RequestState.DONE:
@@ -9248,16 +9209,30 @@ class XHRProxyHandler {
                 // show status code when request completed
                 this.item.statusText = String(this.item.status);
                 this.item.endTime = performance.now();
-                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                this.item.response = this.XMLReq.response;
-                if (!!this.XMLReq.response && this.XMLReq.response.length) {
-                    this.item.responseSize = this.XMLReq.response.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                this.item.duration =
+                    this.item.endTime - (this.item.startTime || this.item.endTime);
+                const resp = this.XMLReq.response;
+                const respType = this.XMLReq.responseType || "";
+                if (respType === "" || respType === "text" || respType === "json") {
+                    this.item.response = resp;
+                }
+                if (resp) {
+                    const respSize = typeof resp === "string"
+                        ? resp.length
+                        : resp instanceof ArrayBuffer
+                            ? resp.byteLength
+                            : typeof Blob !== "undefined" && resp instanceof Blob
+                                ? resp.size
+                                : 0;
+                    if (respSize) {
+                        this.item.responseSize = respSize;
+                        this.item.responseSizeText = formatByteSize(respSize);
+                    }
                 }
                 break;
             default:
                 this.item.status = this.XMLReq.status;
-                this.item.statusText = 'Unknown';
+                this.item.statusText = "Unknown";
                 break;
         }
     }
@@ -9675,7 +9650,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.4.9',
+                trackerVersion: '16.4.10-beta.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,