+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import NetworkMessage from './networkMessage'
+import { RequestState, INetworkMessage, RequestResponseData } from './types';
+import { genStringBody, getURL } from './utils'
+
+// https://fetch.spec.whatwg.org/#concept-bodyinit-extract
+const getContentType = (data?: BodyInit) => {
+ if (data instanceof Blob) {
+ return data.type
+ }
+ if (data instanceof FormData) {
+ return 'multipart/form-data'
+ }
+ if (data instanceof URLSearchParams) {
+ return 'application/x-www-form-urlencoded;charset=UTF-8'
+ }
+ return 'text/plain;charset=UTF-8'
+}
+
+export class BeaconProxyHandler<T extends typeof navigator.sendBeacon> implements ProxyHandler<T> {
+ constructor(
+ private readonly ignoredHeaders: boolean | string[],
+ private readonly setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ private readonly sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ private readonly sendMessage: (item: INetworkMessage) => void,
+ private readonly isServiceUrl: (url: string) => boolean,
+ ) {}
+
+ public apply(target: T, thisArg: T, argsList: any[]) {
+ const urlString: string = argsList[0]
+ const data: BodyInit = argsList[1]
+ const item = new NetworkMessage(this.ignoredHeaders, this.setSessionTokenHeader, this.sanitize)
+ if (this.isServiceUrl(urlString)) {
+ return target.apply(thisArg, argsList)
+ }
+ const url = getURL(urlString)
+ item.method = 'POST'
+ item.url = urlString
+ item.name = (url.pathname.split('/').pop() || '') + url.search
+ item.requestType = 'beacon'
+ item.requestHeader = { 'Content-Type': getContentType(data) }
+ item.status = 0
+ item.statusText = 'Pending'
+
+ if (url.search && url.searchParams) {
+ item.getData = {}
+ for (const [key, value] of url.searchParams) {
+ item.getData[key] = value
+ }
+ }
+ item.requestData = genStringBody(data)
+
+ if (!item.startTime) {
+ item.startTime = performance.now()
+ }
+
+ const isSuccess = target.apply(thisArg, argsList)
+ if (isSuccess) {
+ item.endTime = performance.now()
+ item.duration = item.endTime - (item.startTime || item.endTime)
+ item.status = 0
+ item.statusText = 'Sent'
+ item.readyState = 4
+ } else {
+ item.status = 500
+ item.statusText = 'Unknown'
+ }
+
+ const msg = item.getMessage()
+ if (msg) {
+ this.sendMessage(msg)
+ }
+ return isSuccess
+ }
+}
+
+export default class BeaconProxy {
+ public static origSendBeacon = window?.navigator?.sendBeacon
+
+ public static hasSendBeacon() {
+ return !!BeaconProxy.origSendBeacon
+ }
+
+ public static create(
+ ignoredHeaders: boolean | string[],
+ setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ sendMessage: (item: INetworkMessage) => void,
+ isServiceUrl: (url: string) => boolean,
+ ) {
+ if (!BeaconProxy.hasSendBeacon()) {
+ return undefined
+ }
+ return new Proxy(
+ BeaconProxy.origSendBeacon,
+ new BeaconProxyHandler(
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ ),
+ )
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /**
+ * I took inspiration in few stack exchange posts
+ * and Tencent vConsole library (MIT)
+ * by wrapping the XMLHttpRequest object in a Proxy
+ * we can intercept the network requests
+ * in not-so-hacky way
+ * */
+import NetworkMessage from './networkMessage'
+import { RequestState, INetworkMessage, RequestResponseData } from './types';
+import { formatByteSize, genStringBody, getStringResponseByType, getURL } from './utils'
+
+export class ResponseProxyHandler<T extends Response> implements ProxyHandler<T> {
+ public resp: Response
+ public item: NetworkMessage
+
+ constructor(resp: T, item: NetworkMessage) {
+ this.resp = resp
+ this.item = item
+ this.mockReader()
+ }
+
+ public set(target: T, key: string, value: (args: any[]) => any) {
+ return Reflect.set(target, key, value)
+ }
+
+ public get(target: T, key: string) {
+ const value = Reflect.get(target, key)
+ switch (key) {
+ case 'arrayBuffer':
+ case 'blob':
+ case 'formData':
+ case 'json':
+ case 'text':
+ return () => {
+ this.item.responseType = <any>key.toLowerCase()
+ // @ts-ignore
+ return value.apply(target).then((resp: any) => {
+ this.item.response = getStringResponseByType(this.item.responseType, resp)
+ return resp
+ })
+ }
+ }
+ if (typeof value === 'function') {
+ return value.bind(target)
+ } else {
+ return value
+ }
+ }
+
+ protected mockReader() {
+ let readerReceivedValue: Uint8Array
+ 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 _getReader = this.resp.body.getReader
+ // @ts-ignore
+ this.resp.body.getReader = () => {
+ const reader = <ReturnType<typeof _getReader>>_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 (<ReturnType<typeof _read>>_read.apply(reader)).then(
+ (result: ReadableStreamReadResult<Uint8Array>) => {
+ 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
+ }
+ }
+}
+
+export class FetchProxyHandler<T extends typeof fetch> implements ProxyHandler<T> {
+ constructor(
+ private readonly ignoredHeaders: boolean | string[],
+ private readonly setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ private readonly sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ private readonly sendMessage: (item: INetworkMessage) => void,
+ private readonly isServiceUrl: (url: string) => boolean,
+ private readonly tokenUrlMatcher?: (url: string) => boolean,
+ ) {}
+
+ public apply(target: T, _: typeof window, argsList: [RequestInfo | URL, RequestInit]) {
+ const input = argsList[0]
+ const init = argsList[1]
+ if (
+ !input ||
+ // @ts-ignore
+ (typeof input !== 'string' && !input?.url)
+ ) {
+ return <ReturnType<T>>target.apply(window, argsList)
+ }
+
+ const isORUrl =
+ input instanceof URL || typeof input === 'string'
+ ? this.isServiceUrl(String(input))
+ : this.isServiceUrl(String(input.url))
+
+ if (isORUrl) {
+ return target.apply(window, argsList)
+ }
+
+ const item = new NetworkMessage(this.ignoredHeaders, this.setSessionTokenHeader, this.sanitize)
+ this.beforeFetch(item, input as RequestInfo, init)
+
+ this.setSessionTokenHeader((name, value) => {
+ if (this.tokenUrlMatcher !== undefined) {
+ if (!this.tokenUrlMatcher(item.url)) {
+ return
+ }
+ }
+ if (argsList[1] === undefined && argsList[0] instanceof Request) {
+ return argsList[0].headers.append(name, value)
+ } else {
+ if (!argsList[1]) argsList[1] = {}
+ if (argsList[1].headers === undefined) {
+ argsList[1] = { ...argsList[1], headers: {} }
+ }
+ if (argsList[1].headers instanceof Headers) {
+ argsList[1].headers.append(name, value)
+ } else if (Array.isArray(argsList[1].headers)) {
+ argsList[1].headers.push([name, value])
+ } else {
+ // @ts-ignore
+ argsList[1].headers[name] = value
+ }
+ }
+ })
+ return (<ReturnType<T>>target.apply(window, argsList))
+ .then(this.afterFetch(item))
+ .catch((e) => {
+ // mock finally
+ item.endTime = performance.now()
+ item.duration = item.endTime - (item.startTime || item.endTime)
+ throw e
+ })
+ }
+
+ protected beforeFetch(item: NetworkMessage, input: RequestInfo | string, init?: RequestInit) {
+ let url: URL,
+ method = 'GET',
+ requestHeader: HeadersInit = {}
+
+ // handle `input` content
+ if (typeof input === 'string') {
+ // when `input` is a string
+ method = init?.method || 'GET'
+ url = getURL(input)
+ requestHeader = init?.headers || {}
+ } else {
+ // when `input` is a `Request` object
+ method = input.method || 'GET'
+ url = getURL(input.url)
+ requestHeader = input.headers
+ }
+
+ item.method = <NetworkMessage['method']>method
+ item.requestType = 'fetch'
+ item.requestHeader = requestHeader
+ item.url = url.toString()
+ item.name = (url.pathname.split('/').pop() || '') + url.search
+ item.status = 0
+ item.statusText = 'Pending'
+ item.readyState = 1
+ if (!item.startTime) {
+ // UNSENT
+ item.startTime = performance.now()
+ }
+
+ if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
+ item.requestHeader = {}
+ for (const [key, value] of <Headers>requestHeader) {
+ item.requestHeader[key] = value
+ }
+ } else {
+ item.requestHeader = requestHeader
+ }
+
+ // save GET data
+ if (url.search && url.searchParams) {
+ item.getData = {}
+ for (const [key, value] of url.searchParams) {
+ item.getData[key] = value
+ }
+ }
+
+ // save POST data
+ if (init?.body) {
+ item.requestData = genStringBody(init.body)
+ }
+ }
+
+ protected afterFetch(item: NetworkMessage) {
+ return (resp: Response) => {
+ item.endTime = performance.now()
+ item.duration = item.endTime - (item.startTime || item.endTime)
+ item.status = resp.status
+ item.statusText = String(resp.status)
+
+ let isChunked = false
+ item.header = {}
+ for (const [key, value] of resp.headers) {
+ item.header[key] = value
+ isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked
+ }
+
+ if (isChunked) {
+ // when `transfer-encoding` is chunked, the response is a stream which is under loading,
+ // so the `readyState` should be 3 (Loading),
+ // and the response should NOT be `clone()` which will affect stream reading.
+ item.readyState = 3
+ } else {
+ // Otherwise, not chunked, the response is not a stream,
+ // so it's completed and can be cloned for `text()` calling.
+ item.readyState = 4
+
+ this.handleResponseBody(resp.clone(), item)
+ .then((responseValue: string | ArrayBuffer) => {
+ item.responseSize =
+ typeof responseValue === 'string' ? responseValue.length : responseValue.byteLength
+ item.responseSizeText = formatByteSize(item.responseSize)
+ item.response = getStringResponseByType(item.responseType, responseValue)
+
+ const msg = item.getMessage()
+ if (msg) {
+ this.sendMessage(msg)
+ }
+ })
+ .catch((e) => {
+ if (e.name !== 'AbortError') {
+ throw e
+ } else {
+ // ignore AbortError
+ }
+ })
+ }
+
+ return new Proxy(resp, new ResponseProxyHandler(resp, item))
+ }
+ }
+
+ protected handleResponseBody(resp: Response, item: NetworkMessage) {
+ // parse response body by Content-Type
+ 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'
+ return resp.text()
+ } else {
+ item.responseType = 'arraybuffer'
+ return resp.arrayBuffer()
+ }
+ }
+}
+
+export default class FetchProxy {
+ public static create(
+ ignoredHeaders: boolean | string[],
+ setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ sendMessage: (item: INetworkMessage) => void,
+ isServiceUrl: (url: string) => boolean,
+ tokenUrlMatcher?: (url: string) => boolean,
+ ) {
+ return new Proxy(
+ fetch,
+ new FetchProxyHandler(
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ tokenUrlMatcher,
+ ),
+ )
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| beaconProxy.ts | +
+
+ |
+ 0% | +0/51 | +0% | +0/24 | +0% | +0/5 | +0% | +0/51 | +
| fetchProxy.ts | +
+
+ |
+ 0% | +0/148 | +0% | +0/95 | +0% | +0/21 | +0% | +0/147 | +
| index.ts | +
+
+ |
+ 0% | +0/14 | +0% | +0/13 | +0% | +0/2 | +0% | +0/14 | +
| networkMessage.ts | +
+
+ |
+ 90.19% | +46/51 | +55.55% | +10/18 | +87.5% | +7/8 | +91.48% | +43/47 | +
| types.ts | +
+
+ |
+ 0% | +0/7 | +0% | +0/2 | +0% | +0/1 | +0% | +0/6 | +
| utils.ts | +
+
+ |
+ 81.9% | +86/105 | +60% | +60/100 | +100% | +9/9 | +81.9% | +86/105 | +
| xhrProxy.ts | +
+
+ |
+ 0% | +0/126 | +0% | +0/59 | +0% | +0/26 | +0% | +0/124 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import BeaconProxy from "./beaconProxy";
+import FetchProxy from "./fetchProxy";
+import XHRProxy from "./xhrProxy";
+import { INetworkMessage, RequestResponseData } from "./types";
+
+export {
+ BeaconProxy,
+ FetchProxy,
+ XHRProxy,
+ INetworkMessage,
+ RequestResponseData,
+};
+
+const getWarning = (api: string) => {
+ const str = `Openreplay: Can't find ${api} in global context.`;
+ console.warn(str);
+};
+
+/**
+ * Creates network proxies for XMLHttpRequest, fetch, and sendBeacon to intercept and monitor network requests and
+ * responses.
+ *
+ * @param {Window | typeof globalThis} context - The global context object (e.g., window or globalThis).
+ * @param {boolean | string[]} ignoredHeaders - Headers to ignore from requests. If `true`, all headers are ignored; if
+ * an array of strings, those header names are ignored.
+ * @param {(cb: (name: string, value: string) => void) => void} setSessionTokenHeader - Function to set a session token
+ * header; accepts a callback that sets the header name and value.
+ * @param {(data: RequestResponseData) => RequestResponseData | null} sanitize - Function to sanitize request and
+ * response data; should return sanitized data or `null` to ignore the data.
+ * @param {(message: INetworkMessage) => void} sendMessage - Function to send network messages for further processing
+ * or logging.
+ * @param {(url: string) => boolean} isServiceUrl - Function to determine if a URL is a service URL that should be
+ * ignored by the proxy.
+ * @param {Object} [modules] - Modules to apply the proxies to.
+ * @param {boolean} [modules.xhr=true] - Whether to proxy XMLHttpRequest.
+ * @param {boolean} [modules.fetch=true] - Whether to proxy the fetch API.
+ * @param {boolean} [modules.beacon=true] - Whether to proxy navigator.sendBeacon.
+ * @param {(url: string) => boolean} [tokenUrlMatcher] - Optional function; the session token header will only be
+ * applied to requests matching this function.
+ *
+ * @returns {void}
+ */
+export default function createNetworkProxy(
+ context: typeof globalThis,
+ ignoredHeaders: boolean | string[],
+ setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ sendMessage: (message: INetworkMessage) => void,
+ isServiceUrl: (url: string) => boolean,
+ modules: { xhr: boolean; fetch: boolean; beacon: boolean } = {
+ xhr: true,
+ fetch: true,
+ beacon: true,
+ },
+ tokenUrlMatcher?: (url: string) => boolean,
+): void {
+ if (modules.xhr) {
+ if (context.XMLHttpRequest) {
+ context.XMLHttpRequest = XHRProxy.create(
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ tokenUrlMatcher,
+ );
+ } else {
+ getWarning("XMLHttpRequest");
+ }
+ }
+ if (modules.fetch) {
+ if (context.fetch) {
+ context.fetch = FetchProxy.create(
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ tokenUrlMatcher,
+ );
+ } else {
+ getWarning("fetch");
+ }
+ }
+ if (modules.beacon) {
+ if (context?.navigator?.sendBeacon) {
+ context.navigator.sendBeacon = BeaconProxy.create(
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ );
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 | + + + + + + + + + + + +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + +4x +4x +4x +4x +4x +4x +4x + + +4x +4x +4x + + + +1x +1x + + + +1x + +1x + + + + + + + +1x + +1x +1x + + + + + +1x + + + + + + + + + + + + + +2x +2x +2x +1x + +2x + + +2x +2x +2x +1x + +2x + + + +9x +6x + +3x + + + + | import {
+ RequestResponseData,
+ INetworkMessage,
+ httpMethod,
+ RequestState,
+} from './types'
+/**
+ * I know we're not using most of the information from this class
+ * but it can be useful in the future if we will decide to display more stuff in our ui
+ * */
+
+export default class NetworkMessage {
+ id = ''
+ name?: string = ''
+ method: httpMethod = ''
+ url = ''
+ status = 0
+ statusText?: string = ''
+ cancelState?: 0 | 1 | 2 | 3 = 0
+ readyState?: RequestState = 0
+ header: { [key: string]: string } = {}
+ responseType: XMLHttpRequest['responseType'] = ''
+ requestType: 'xhr' | 'fetch' | 'ping' | 'custom' | 'beacon' | 'graphql' = 'xhr'
+ requestHeader: HeadersInit = {}
+ response: string
+ responseSize = 0 // bytes
+ responseSizeText = ''
+ startTime = 0
+ endTime = 0
+ duration = 0
+ getData: { [key: string]: string } = {}
+ requestData: string | null = null
+
+ constructor(
+ private readonly ignoredHeaders: boolean | string[] = [],
+ private readonly setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ private readonly sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ ) {}
+
+ getMessage(): INetworkMessage | null {
+ const { reqHs, resHs } = this.writeHeaders()
+ const request = {
+ headers: reqHs,
+ body: this.method === 'GET' ? JSON.stringify(this.getData) : this.requestData,
+ }
+ const response = { headers: resHs, body: this.response }
+
+ const messageInfo = this.sanitize({
+ url: this.url,
+ method: this.method,
+ status: this.status,
+ request,
+ response,
+ })
+
+ Iif (!messageInfo) return null;
+
+ const isGraphql = messageInfo.url.includes("/graphql");
+ Iif (isGraphql && messageInfo.response.body && typeof messageInfo.response.body === 'string') {
+ const isError = messageInfo.response.body.includes("errors");
+ messageInfo.status = isError ? 400 : 200;
+ this.requestType = 'graphql';
+ }
+
+ return {
+ requestType: this.requestType,
+ method: messageInfo.method as httpMethod,
+ url: messageInfo.url,
+ request: JSON.stringify(messageInfo.request),
+ response: JSON.stringify(messageInfo.response),
+ status: messageInfo.status,
+ startTime: this.startTime,
+ duration: this.duration,
+ responseSize: this.responseSize,
+ }
+ }
+
+ writeHeaders() {
+ const reqHs: Record<string, string> = {}
+ Object.entries(this.requestHeader).forEach(([key, value]) => {
+ if (this.isHeaderIgnored(key)) return
+ reqHs[key] = value
+ })
+ this.setSessionTokenHeader((name, value) => {
+ reqHs[name] = value
+ })
+ const resHs: Record<string, string> = {}
+ Object.entries(this.header).forEach(([key, value]) => {
+ if (this.isHeaderIgnored(key)) return
+ resHs[key] = value
+ })
+ return { reqHs, resHs }
+ }
+
+ isHeaderIgnored(key: string) {
+ if (Array.isArray(this.ignoredHeaders)) {
+ return this.ignoredHeaders.map((k) => k.toLowerCase()).includes(key.toLowerCase())
+ } else {
+ return this.ignoredHeaders
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | export interface RequestResponseData {
+ status: number
+ readonly method: string
+ url: string
+ request: {
+ body: string | null
+ headers: Record<string, string>
+ }
+ response: {
+ body: string | null
+ headers: Record<string, string>
+ }
+}
+
+export interface INetworkMessage {
+ requestType: 'xhr' | 'fetch' | 'ping' | 'custom' | 'beacon' | 'graphql',
+ method: httpMethod,
+ url: string,
+ /** stringified JSON { headers: {}, body: {} } */
+ request: string,
+ /** stringified JSON { headers: {}, body: {} } */
+ response: string,
+ status: number,
+ startTime: number,
+ duration: number,
+ responseSize: number,
+}
+
+export type httpMethod =
+ // '' is a rare case of error
+ '' | 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'CONNECT' | 'OPTIONS' | 'TRACE' | 'PATCH'
+
+export enum RequestState {
+ UNSENT = 0,
+ OPENED = 1,
+ HEADERS_RECEIVED = 2,
+ LOADING = 3,
+ DONE = 4,
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 | 1x + + + +2x +2x + + + +1x +1x +1x + + + + + + + + + +1x + + + + + +1x +1x + +1x + +2x + + +1x + + + +3x +3x + + + +2x +1x +1x +1x + + + +2x + + + + +1x +1x + +1x + +3x + + +1x +2x + + + + +2x +1x +1x + + +1x +1x + +1x + + + + +1x + +1x +1x +1x + +1x + + + + + + + + + + + + +2x + + +1x +2x +1x + +2x +2x +2x +2x +2x +2x +2x +2x + + + + + + + + +2x + + +1x +6x + + + + +6x +2x + +2x + + +1x +1x + +1x +2x +2x + + +4x + +1x +1x +2x + +3x + + + + + +3x + + + + + +6x + + + +7x + + + +9x +1x + +8x +2x + +6x + + + +4x + +1x + +3x +1x + +2x +1x + +1x + + +1x +3x +1x +1x + +3x +2x + +1x + + + | export const genResponseByType = (
+ responseType: XMLHttpRequest['responseType'],
+ response: any,
+): string | Record<string, any> => {
+ let result = ''
+ switch (responseType) {
+ case '':
+ case 'text':
+ case 'json':
+ if (typeof response == 'string') {
+ try {
+ result = JSON.parse(response)
+ } catch (e) {
+ // not a JSON string
+ result = response.slice(0, 10000)
+ }
+ E} else if (isPureObject(response) || Array.isArray(response)) {
+ result = JSON.stringify(response)
+ } else if (typeof response !== 'undefined') {
+ result = Object.prototype.toString.call(response)
+ }
+ break
+
+ case 'blob':
+ case 'document':
+ case 'arraybuffer':
+ default:
+ Eif (typeof response !== 'undefined') {
+ result = Object.prototype.toString.call(response)
+ }
+ break
+ }
+ return result
+}
+
+export const getStringResponseByType = (
+ responseType: XMLHttpRequest['responseType'],
+ response: any,
+) => {
+ let result = ''
+ switch (responseType) {
+ case '':
+ case 'text':
+ case 'json':
+ if (typeof response == 'string') {
+ result = response
+ } else if (isPureObject(response) || Array.isArray(response)) {
+ result = JSON.stringify(response)
+ E} else if (typeof response !== 'undefined') {
+ result = Object.prototype.toString.call(response)
+ }
+ break
+ case 'blob':
+ case 'document':
+ case 'arraybuffer':
+ default:
+ Eif (typeof response !== 'undefined') {
+ result = Object.prototype.toString.call(response)
+ }
+ break
+ }
+ return result
+}
+
+export const genStringBody = (body?: BodyInit) => {
+ Iif (!body) {
+ return null
+ }
+ let result: string
+
+ if (typeof body === 'string') {
+ Eif (body[0] === '{' || body[0] === '[') {
+ result = body
+ }
+ // 'a=1&b=2' => try to parse as query
+ const arr = body.split('&')
+ if (arr.length === 1) {
+ // not a query, parse as original string
+ result = body
+ } else E{
+ // 'a=1&b=2&c' => parse as query
+ result = arr.join(',')
+ }
+ } else if (isIterable(body)) {
+ // FormData or URLSearchParams or Array
+ const arr = []
+ for (const [key, value] of <FormData | URLSearchParams>body) {
+ arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`)
+ }
+ result = arr.join(',')
+ E} else if (
+ body instanceof Blob ||
+ body instanceof ReadableStream ||
+ body instanceof ArrayBuffer
+ ) {
+ result = 'byte data'
+ } else if (isPureObject(body)) {
+ // overriding ArrayBufferView which is not convertable to string
+ result = <any>body
+ } else {
+ result = `can't parse body ${typeof body}`
+ }
+ return result
+}
+
+export const genGetDataByUrl = (url: string, getData: Record<string, any> = {}) => {
+ if (!isPureObject(getData)) {
+ getData = {}
+ }
+ let query: string[] = url ? url.split('?') : [] // a.php?b=c&d=?e => ['a.php', 'b=c&d=', 'e']
+ query.shift() // => ['b=c&d=', 'e']
+ Eif (query.length > 0) {
+ query = query.join('?').split('&') // => 'b=c&d=?e' => ['b=c', 'd=?e']
+ for (const q of query) {
+ const kv = q.split('=')
+ try {
+ getData[kv[0]] = decodeURIComponent(kv[1])
+ } catch (e) {
+ // "URIError: URI malformed" will be thrown when `kv[1]` contains "%", so just use raw data
+ // @issue #470
+ // @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI
+ getData[kv[0]] = kv[1]
+ }
+ }
+ }
+ return getData
+}
+
+export const genFormattedBody = (body?: BodyInit) => {
+ Iif (!body) {
+ return null
+ }
+ let result: string | { [key: string]: string }
+
+ if (typeof body === 'string') {
+ try {
+ // '{a:1}' =>
+ result = JSON.parse(body)
+ } catch (e) {
+ // 'a=1&b=2' => try to parse as query
+ const arr = body.split('&')
+ result = {}
+ // eslint-disable-next-line
+ for (let q of arr) {
+ const kv = q.split('=')
+ result[kv[0]] = kv[1] === undefined ? 'undefined' : kv[1]
+ }
+ }
+ } else if (isIterable(body)) {
+ // FormData or URLSearchParams or Array
+ result = {}
+ for (const [key, value] of <FormData | URLSearchParams>body) {
+ result[key] = typeof value === 'string' ? value : '[object Object]'
+ }
+ } else if (
+ ArrayBuffer.isView(body) ||
+ body instanceof Blob ||
+ body instanceof ReadableStream ||
+ body instanceof ArrayBuffer
+ ) {
+ result = '[byte data]'
+ E} else if (isPureObject(body)) {
+ result = <any>body
+ } else {
+ result = `can't parse body ${typeof body}`
+ }
+ return result
+}
+
+export function isPureObject(input: any): input is Record<any, any> {
+ return null !== input && typeof input === 'object'
+}
+
+export function isIterable(value: any) {
+ if (value === null || value === undefined) {
+ return false
+ }
+ if (ArrayBuffer.isView(value)) {
+ return false
+ }
+ return typeof Symbol !== 'undefined' && typeof value[Symbol.iterator] === 'function'
+}
+
+export function formatByteSize(bytes: number) {
+ if (bytes <= 0) {
+ // shouldn't happen?
+ return ''
+ }
+ if (bytes >= 1000 * 1000) {
+ return (bytes / 1000 / 1000).toFixed(1) + ' MB'
+ }
+ if (bytes >= 1000) {
+ return (bytes / 1000).toFixed(1) + ' KB'
+ }
+ return `${bytes}B`
+}
+
+export const getURL = (urlString: string) => {
+ if (urlString.startsWith('//')) {
+ const baseUrl = new URL(window.location.href)
+ urlString = `${baseUrl.protocol}${urlString}`
+ }
+ if (urlString.startsWith('http')) {
+ return new URL(urlString)
+ } else {
+ return new URL(urlString, window.location.href)
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | /**
+ * I took inspiration in few stack exchange posts
+ * and Tencent vConsole library (MIT)
+ * by wrapping the XMLHttpRequest object in a Proxy
+ * we can intercept the network requests
+ * in not-so-hacky way
+ * */
+
+import NetworkMessage from './networkMessage'
+import { RequestState, INetworkMessage, RequestResponseData } from './types';
+import { genGetDataByUrl, formatByteSize, genStringBody, getStringResponseByType } from './utils'
+
+export class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T> {
+ public XMLReq: XMLHttpRequest
+ public item: NetworkMessage
+
+ constructor(
+ XMLReq: XMLHttpRequest,
+ private readonly ignoredHeaders: boolean | string[],
+ private readonly setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ private readonly sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ private readonly sendMessage: (message: INetworkMessage) => void,
+ private readonly isServiceUrl: (url: string) => boolean,
+ private readonly tokenUrlMatcher?: (url: string) => boolean,
+ ) {
+ this.XMLReq = XMLReq
+ this.XMLReq.onreadystatechange = () => {
+ this.onReadyStateChange()
+ }
+ this.XMLReq.onabort = () => {
+ this.onAbort()
+ }
+ this.XMLReq.ontimeout = () => {
+ this.onTimeout()
+ }
+ this.item = new NetworkMessage(ignoredHeaders, setSessionTokenHeader, sanitize)
+ this.item.requestType = 'xhr'
+ }
+
+ public get(target: T, key: string) {
+ switch (key) {
+ case 'open':
+ return this.getOpen(target)
+ case 'send':
+ this.setSessionTokenHeader((name: string, value: string) => {
+ if (this.tokenUrlMatcher !== undefined) {
+ if (!this.tokenUrlMatcher(this.item.url)) {
+ return
+ }
+ }
+ target.setRequestHeader(name, value)
+ })
+ return this.getSend(target)
+ case 'setRequestHeader':
+ return this.getSetRequestHeader(target)
+ default:
+ // eslint-disable-next-line no-case-declarations
+ const value = Reflect.get(target, key)
+ if (typeof value === 'function') {
+ return value.bind(target)
+ } else {
+ return value
+ }
+ }
+ }
+
+ public set(target: T, key: string, value: (args: any[]) => any) {
+ switch (key) {
+ case 'onreadystatechange':
+ return this.setOnReadyStateChange(target, key, value)
+ case 'onabort':
+ return this.setOnAbort(target, key, value)
+ case 'ontimeout':
+ return this.setOnTimeout(target, key, value)
+ default:
+ // not tracked methods
+ }
+ return Reflect.set(target, key, value)
+ }
+
+ public onReadyStateChange() {
+ if (this.item.url && this.isServiceUrl(this.item.url)) return
+ this.item.readyState = this.XMLReq.readyState
+ this.item.responseType = this.XMLReq.responseType
+ 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)
+
+ if (this.XMLReq.readyState === RequestState.DONE) {
+ const msg = this.item.getMessage()
+ if (msg) {
+ this.sendMessage(msg)
+ }
+ }
+ }
+
+ public onAbort() {
+ this.item.cancelState = 1
+ this.item.statusText = 'Abort'
+
+ const msg = this.item.getMessage()
+ if (msg) {
+ this.sendMessage(msg)
+ }
+ }
+
+ public onTimeout() {
+ this.item.cancelState = 3
+ this.item.statusText = 'Timeout'
+
+ const msg = this.item.getMessage()
+ if (msg) {
+ this.sendMessage(msg)
+ }
+ }
+
+ protected getOpen(target: T) {
+ const targetFunction = Reflect.get(target, 'open')
+ return (...args: any[]) => {
+ const method = args[0]
+ const url = args[1]
+ this.item.method = method ? method.toUpperCase() : 'GET'
+ this.item.url = url.toString?.() || ''
+ this.item.name = this.item.url?.replace(new RegExp('/*$'), '').split('/').pop() ?? ''
+ this.item.getData = genGetDataByUrl(this.item.url, {})
+ return targetFunction.apply(target, args)
+ }
+ }
+
+ protected getSend(target: T) {
+ const targetFunction = Reflect.get(target, 'send')
+ return (...args: any[]) => {
+ const data: XMLHttpRequestBodyInit = args[0]
+ this.item.requestData = genStringBody(data)
+ return targetFunction.apply(target, args)
+ }
+ }
+
+ protected getSetRequestHeader(target: T) {
+ const targetFunction = Reflect.get(target, 'setRequestHeader')
+ return (...args: any[]) => {
+ if (!this.item.requestHeader) {
+ this.item.requestHeader = {}
+ }
+ // @ts-ignore
+ this.item.requestHeader[args[0]] = args[1]
+ return targetFunction.apply(target, args)
+ }
+ }
+
+ protected setOnReadyStateChange(target: T, key: string, orscFunction: (args: any[]) => any) {
+ return Reflect.set(target, key, (...args: any[]) => {
+ this.onReadyStateChange()
+ orscFunction?.apply(target, args)
+ })
+ }
+
+ protected setOnAbort(target: T, key: string, oaFunction: (args: any[]) => any) {
+ return Reflect.set(target, key, (...args: any[]) => {
+ this.onAbort()
+ oaFunction.apply(target, args)
+ })
+ }
+
+ protected setOnTimeout(target: T, key: string, otFunction: (args: any[]) => any) {
+ return Reflect.set(target, key, (...args: any[]) => {
+ this.onTimeout()
+ otFunction.apply(target, args)
+ })
+ }
+
+ /**
+ * Update item's properties according to readyState.
+ */
+ protected updateItemByReadyState() {
+ switch (this.XMLReq.readyState) {
+ case RequestState.UNSENT:
+ case RequestState.OPENED:
+ this.item.status = RequestState.UNSENT
+ 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.header = {}
+ // eslint-disable-next-line no-case-declarations
+ 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 key = arr[0]
+ 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)
+ }
+ break
+ case RequestState.DONE:
+ // `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
+ this.item.status = this.XMLReq.status || this.item.status || 0
+ // 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)
+ }
+ break
+ default:
+ this.item.status = this.XMLReq.status
+ this.item.statusText = 'Unknown'
+ break
+ }
+ }
+}
+
+export default class XHRProxy {
+ public static create(
+ ignoredHeaders: boolean | string[],
+ setSessionTokenHeader: (cb: (name: string, value: string) => void) => void,
+ sanitize: (data: RequestResponseData) => RequestResponseData | null,
+ sendMessage: (data: INetworkMessage) => void,
+ isServiceUrl: (url: string) => boolean,
+ tokenUrlMatcher?: (url: string) => boolean,
+ ) {
+ return new Proxy(XMLHttpRequest, {
+ construct(original: any) {
+ const XMLReq = new original()
+ return new Proxy(
+ XMLReq,
+ new XHRProxyHandler(
+ XMLReq as XMLHttpRequest,
+ ignoredHeaders,
+ setSessionTokenHeader,
+ sanitize,
+ sendMessage,
+ isServiceUrl,
+ tokenUrlMatcher,
+ ),
+ )
+ },
+ })
+ }
+}
+ |