Skip to content

Commit

Permalink
fix: requests not being updated when maxRequests is reached (#88)
Browse files Browse the repository at this point in the history 
* maxRequests

* test

* dispose to fix test

* lint
  • Loading branch information
@jwallet
jwallet committed Dec 20, 2023
1 parent 14d24be commit 89e14ae
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 26 deletions.
2 changes: 1 addition & 1 deletion example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function App() {

startNetworkLogging({
ignoredHosts: ['192.168.1.28', '127.0.0.1'],
maxRequests: 500,
maxRequests: 20,
ignoredUrls: ['https://httpstat.us/other'],
ignoredPatterns: [/^POST http:\/\/(192|10)/],
});
Expand Down
30 changes: 20 additions & 10 deletions src/Logger.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,25 @@ type XHR = {

export default class Logger {
private requests: NetworkRequestInfo[] = [];
private xhrIdMap: { [key: number]: number } = {};
private xhrIdMap: Map<number, () => number> = new Map();
private maxRequests: number = 500;
private ignoredHosts: Set<string> | undefined;
private ignoredUrls: Set<string> | undefined;
private ignoredPatterns: RegExp[] | undefined;
public enabled = false;
public paused = false;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
callback = (requests: any[]) => {};
callback = (_: any[]) => null;

setCallback = (callback: any) => {
this.callback = callback;
};

private getRequest = (xhrIndex?: number) => {
if (xhrIndex === undefined) return undefined;
const requestIndex = this.requests.length - this.xhrIdMap[xhrIndex] - 1;
return this.requests[requestIndex];
if (!this.xhrIdMap.has(xhrIndex)) return undefined;
const index = this.xhrIdMap.get(xhrIndex)!();
return this.requests[index];
};

private updateRequest = (
Expand All @@ -44,10 +44,6 @@ export default class Logger {
};

private openCallback = (method: RequestMethod, url: string, xhr: XHR) => {
xhr._index = nextXHRId++;
const xhrIndex = this.requests.length;
this.xhrIdMap[xhr._index] = xhrIndex;

if (this.paused) {
return;
}
Expand All @@ -71,8 +67,13 @@ export default class Logger {
}
}

xhr._index = nextXHRId++;
this.xhrIdMap.set(xhr._index, () => {
return this.requests.findIndex((r) => r.id === `${xhr._index}`);
});

const newRequest = new NetworkRequestInfo(
`${nextXHRId}`,
`${xhr._index}`,
'XMLHttpRequest',
method,
url
Expand Down Expand Up @@ -206,4 +207,13 @@ export default class Logger {
this.requests = [];
this.callback(this.requests);
};

// dispose in tests
private dispose = () => {
this.enabled = false;
nextXHRId = 0;
this.requests = [];
this.callback(this.requests);
this.xhrIdMap.clear();
};
}
80 changes: 65 additions & 15 deletions src/__tests__/Logger.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ beforeEach(() => {

describe('enableXHRInterception', () => {
it('should do nothing if interceptor has already been enabled', () => {
(warn as jest.Mock).mockImplementationOnce(() => {});
(warn as jest.Mock).mockImplementationOnce(() => null);
const logger = new Logger();

(XHRInterceptor.isInterceptorEnabled as jest.Mock).mockReturnValueOnce(
Expand Down Expand Up @@ -195,25 +195,33 @@ describe('getRequest', () => {

it('should return request that matches index', () => {
const logger = new Logger();
const requests = [{ id: 1 }, { id: 2 }, { id: 3 }];
const requests = [{ id: `3` }, { id: `2` }, { id: `1` }];
// @ts-expect-error
logger.requests = requests;
// @ts-expect-error
logger.xhrIdMap = { 0: 0, 1: 1, 2: 2 };
logger.xhrIdMap = new Map([
[1, () => requests.findIndex((r) => r.id === `${1}`)],
[2, () => requests.findIndex((r) => r.id === `${2}`)],
[3, () => requests.findIndex((r) => r.id === `${3}`)],
]);
// @ts-expect-error
const result = logger.getRequest(0);
const result = logger.getRequest(1);
expect(result).toBe(requests[2]);
});

it('should return request that matches index if at start', () => {
const logger = new Logger();
const requests = [{ id: 1 }, { id: 2 }, { id: 3 }];
const requests = [{ id: `3` }, { id: `2` }, { id: `1` }];
// @ts-expect-error
logger.requests = requests;
// @ts-expect-error
logger.xhrIdMap = { 0: 0, 1: 1, 2: 2 };
logger.xhrIdMap = new Map([
[1, () => requests.findIndex((r) => r.id === `${1}`)],
[2, () => requests.findIndex((r) => r.id === `${2}`)],
[3, () => requests.findIndex((r) => r.id === `${3}`)],
]);
// @ts-expect-error
const result = logger.getRequest(2);
const result = logger.getRequest(3);
expect(result).toBe(requests[0]);
});
});
Expand All @@ -233,6 +241,9 @@ describe('openCallback', () => {
logger.openCallback('POST', url2, xhr);
expect(logger.getRequests()[0].url).toEqual(url2);
expect(logger.getRequests()[1].url).toEqual(url1);

// @ts-expect-error
logger.dispose();
});

it('should ignore requests that have ignored hosts', () => {
Expand All @@ -249,22 +260,27 @@ describe('openCallback', () => {
logger.openCallback('POST', url2, xhr);
expect(logger.getRequests()[0].url).toEqual(url1);
expect(logger.getRequests()).toHaveLength(1);

// @ts-expect-error
logger.dispose();
});

it('should ignore requests that have ignored urls', () => {
const logger = new Logger();
logger.enableXHRInterception({ ignoredUrls: ['http://ignored.com/test'] });

const xhr = {};
const url1 = 'http://ignored.com/1';
const url2 = 'http://ignored.com/test';

// @ts-expect-error
logger.openCallback('POST', url1, xhr);
logger.openCallback('POST', url1, { _index: 0 });
// @ts-expect-error
logger.openCallback('POST', url2, xhr);
logger.openCallback('POST', url2, { _index: 1 });
expect(logger.getRequests()[0].url).toEqual(url1);
expect(logger.getRequests()).toHaveLength(1);

// @ts-expect-error
logger.dispose();
});

it('should ignore requests that match pattern', () => {
Expand All @@ -273,23 +289,57 @@ describe('openCallback', () => {
ignoredPatterns: [/^HEAD /, /^POST http:\/\/ignored/],
});

const xhr = {};
const url1 = 'http://allowed.com/1';
const url2 = 'http://ignored.com/test';

// @ts-expect-error
logger.openCallback('POST', url1, xhr);
logger.openCallback('POST', url1, { _index: 0 });
// @ts-expect-error
logger.openCallback('POST', url2, xhr);
logger.openCallback('POST', url2, { _index: 1 });
// @ts-expect-error
logger.openCallback('HEAD', url2, xhr);
logger.openCallback('HEAD', url2, { _index: 2 });
// @ts-expect-error
logger.openCallback('PUT', url2, xhr);
logger.openCallback('PUT', url2, { _index: 3 });
// Requests should be in reverse order
expect(logger.getRequests()[1].url).toEqual(url1);
expect(logger.getRequests()[1].method).toEqual('POST');
expect(logger.getRequests()[0].url).toEqual(url2);
expect(logger.getRequests()[0].method).toEqual('PUT');
expect(logger.getRequests()).toHaveLength(2);

// @ts-expect-error
logger.dispose();
});

it('should retrieve requests when it is restricted by maxRequests', () => {
const logger = new Logger();
logger.enableXHRInterception({
maxRequests: 2,
});

const url = 'http://example.com/1';

// @ts-expect-error
logger.openCallback('POST', url, { _index: 0 });
// @ts-expect-error
logger.openCallback('GET', url, { _index: 1 });
// @ts-expect-error
logger.openCallback('HEAD', url, { _index: 2 });
// @ts-expect-error
logger.openCallback('PUT', url, { _index: 3 });

// Requests should be in reverse order
expect(logger.getRequests()[0].method).toEqual('PUT');
expect(logger.getRequests()[1].method).toEqual('HEAD');
expect(logger.getRequests()).toHaveLength(2);

// @ts-expect-error
expect(logger.getRequest(0)?.method).toBeUndefined();
const first = logger.getRequests()[0];
// @ts-expect-error
expect(logger.getRequest(3)?.method).toBe(first?.method);

// @ts-expect-error
logger.dispose();
});
});
1 change: 1 addition & 0 deletions src/components/ResultItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
const pad = (num: number) => `0${num}`.slice(-2);

const getTime = (time: number) => {
if (time === 0) return ''; // invalid time
const date = new Date(time);
const hours = pad(date.getHours());
const minutes = pad(date.getMinutes());
Expand Down

0 comments on commit 89e14ae

Please sign in to comment.