Skip to content

Commit cf78371

Browse files
zendivezendive
committed
add TraceBypass 
1 parent 1327380 commit cf78371

18 files changed

+230
-74
lines changed

‎jest/tests/wrappers.test.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -355,16 +355,19 @@ describe('wrappers', () => {
355355
});
356356
cancelAnimationFrame(handler);
357357

358-
const rec = Array.from(wrapper.cafHistory.values())[0];
358+
const rafRec = Array.from(wrapper.rafHistory.values())[0];
359+
const cafRec = Array.from(wrapper.cafHistory.values())[0];
359360

360361
expect(changeable).toBe(unchanged);
361362
expect(wrapper.rafHistory.size).toBe(1);
362363
expect(wrapper.cafHistory.size).toBe(1);
363-
expect(rec.handler).toBe(handler);
364-
expect(rec.calls).toBe(1);
365-
expect(rec.trace.length).toBeGreaterThan(1);
366-
expect(rec.traceId.length).toBeGreaterThan(1);
364+
expect(cafRec.handler).toBe(handler);
365+
expect(cafRec.calls).toBe(1);
366+
expect(cafRec.trace.length).toBeGreaterThan(1);
367+
expect(cafRec.traceId.length).toBeGreaterThan(1);
367368
expect(wrapper.callCounter.cancelAnimationFrame).toBe(1);
369+
expect(rafRec.canceledByTraceIds?.length).toBe(1);
370+
expect(rafRec.canceledCounter).toBe(1);
368371
});
369372

370373
test('cafHistory - invalid handler', () => {

‎public/global.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ th,
111111
mask-repeat: no-repeat;
112112
vertical-align: bottom;
113113
}
114+
th .icon {
115+
background-color: var(--text-invert);
116+
}
114117
.icon.-small {
115118
width: var(--small-icon-size);
116119
height: var(--small-icon-size);
@@ -172,3 +175,6 @@ th,
172175
.icon.-breakpoint {
173176
mask-image: url(img/breakpoint.svg);
174177
}
178+
.icon.-bypass {
179+
mask-image: url(img/bypass.svg);
180+
}

‎public/img/bypass.svg‎

Lines changed: 24 additions & 0 deletions
Loading

‎src/api-monitor-cs-main.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ const wrapRequestIdleCallbackOnce = callingOnce(() =>
4141
const wrapCancelIdleCallbackOnce = callingOnce(() =>
4242
wrapper.wrapCancelIdleCallback()
4343
);
44+
const setCallstackTypeOnce = callingOnce((type) => {
45+
wrapper.setCallstackType(type);
46+
});
4447
let panels: TPanelVisibilityMap;
4548
const eachSecond = new Timer(
4649
() => {
@@ -92,6 +95,7 @@ windowListen((o) => {
9295
o.settings &&
9396
typeof o.settings === 'object'
9497
) {
98+
setCallstackTypeOnce(o.settings.wrapperCallstackType);
9599
panels = panelsArrayToVisibilityMap(o.settings.panels);
96100
panels.eval.wrap && wrapEvalOnce();
97101
panels.setTimeout.wrap && wrapSetTimeoutOnce();
@@ -103,7 +107,7 @@ windowListen((o) => {
103107
panels.requestIdleCallback && wrapRequestIdleCallbackOnce();
104108
panels.cancelIdleCallback && wrapCancelIdleCallbackOnce();
105109
wrapper.setTraceForDebug(o.settings.traceForDebug);
106-
wrapper.setCallstackType(o.settings.wrapperCallstackType);
110+
wrapper.setTraceForBypass(o.settings.traceForBypass);
107111
} else if (o.msg === 'reset-wrapper-history') {
108112
wrapper.cleanHistory();
109113
tick.trigger();

‎src/api/settings.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export const DEFAULT_SETTINGS = {
127127
paused: false,
128128
devtoolsPanelShown: false,
129129
traceForDebug: <string | null>null,
130+
traceForBypass: <string | null>null,
130131
wrapperCallstackType: EWrapperCallstackType.SHORT,
131132
};
132133

‎src/api/time.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,10 @@ import {
55
cancelAnimationFrame,
66
} from './const.ts';
77

8-
export function callingOnce(fn: (...args: any[]) => any) {
9-
let runOnce = false;
10-
return () => {
11-
if (!runOnce) {
12-
fn();
13-
runOnce = true;
14-
}
8+
export function callingOnce(fn: ((...args: any[]) => any) | null) {
9+
return function (...args: any[]) {
10+
fn && fn(...args);
11+
fn = null;
1512
};
1613
}
1714

‎src/api/wrappers.ts‎

Lines changed: 88 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ export class Wrapper {
190190
};
191191
selfTraceLink = '';
192192
#traceForDebug: string | null = null;
193+
#traceForBypass: string | null = null;
193194
#callstackType: EWrapperCallstackType = EWrapperCallstackType.FULL;
194195

195196
constructor() {
@@ -230,6 +231,18 @@ export class Wrapper {
230231
this.#traceForDebug = traceId;
231232
}
232233

234+
#shouldDebug(traceId: string) {
235+
return this.#traceForDebug === traceId;
236+
}
237+
238+
setTraceForBypass(traceId: string | null) {
239+
this.#traceForBypass = traceId;
240+
}
241+
242+
#shouldBypass(traceId: string) {
243+
return this.#traceForBypass === traceId;
244+
}
245+
233246
setCallstackType(type: EWrapperCallstackType) {
234247
this.#callstackType = type;
235248
}
@@ -393,7 +406,7 @@ export class Wrapper {
393406
updateTimersSelfTime(
394407
map: Map<string, TSetTimerHistory>,
395408
traceId: string,
396-
selfTime: number
409+
selfTime: number | null
397410
) {
398411
const record = map.get(traceId);
399412

@@ -437,7 +450,7 @@ export class Wrapper {
437450
this.onlineAnimationFrameLookup.set(handler, callstack.traceId);
438451
}
439452

440-
rafFired(handler: number, traceId: string, selfTime: number) {
453+
rafFired(handler: number, traceId: string, selfTime: number | null) {
441454
const rafRecord = this.rafHistory.get(traceId);
442455
if (!rafRecord) {
443456
return;
@@ -492,7 +505,7 @@ export class Wrapper {
492505
handler: number,
493506
traceId: string,
494507
deadline: IdleDeadline,
495-
selfTime: number
508+
selfTime: number | null
496509
) {
497510
const ricRecord = this.ricHistory.get(traceId);
498511
if (!ricRecord) {
@@ -680,16 +693,17 @@ export class Wrapper {
680693
this.callCounter.requestIdleCallback++;
681694
const handler = this.native.requestIdleCallback((deadline) => {
682695
const start = performance.now();
683-
if (this.#traceForDebug === callstack.traceId) {
696+
let selfTime = null;
697+
698+
if (this.#shouldDebug(callstack.traceId)) {
684699
debugger;
685700
}
686-
fn(deadline);
687-
this.ricFired(
688-
handler,
689-
callstack.traceId,
690-
deadline,
691-
performance.now() - start
692-
);
701+
if (!this.#shouldBypass(callstack.traceId)) {
702+
fn(deadline);
703+
selfTime = performance.now() - start;
704+
}
705+
706+
this.ricFired(handler, callstack.traceId, deadline, selfTime);
693707
}, options);
694708
this.updateRicHistory(handler, delay, callstack);
695709

@@ -707,10 +721,12 @@ export class Wrapper {
707721

708722
this.updateCicHistory(handler, callstack);
709723
this.callCounter.cancelIdleCallback++;
710-
if (this.#traceForDebug === callstack.traceId) {
724+
if (this.#shouldDebug(callstack.traceId)) {
711725
debugger;
712726
}
713-
this.native.cancelIdleCallback(handler);
727+
if (!this.#shouldBypass(callstack.traceId)) {
728+
this.native.cancelIdleCallback(handler);
729+
}
714730
}.bind(this);
715731
}
716732

@@ -725,11 +741,17 @@ export class Wrapper {
725741
this.callCounter.requestAnimationFrame++;
726742
const handler = this.native.requestAnimationFrame((...args) => {
727743
const start = performance.now();
728-
if (this.#traceForDebug === callstack.traceId) {
744+
let selfTime = null;
745+
746+
if (this.#shouldDebug(callstack.traceId)) {
729747
debugger;
730748
}
731-
fn(...args);
732-
this.rafFired(handler, callstack.traceId, performance.now() - start);
749+
if (!this.#shouldBypass(callstack.traceId)) {
750+
fn(...args);
751+
selfTime = performance.now() - start;
752+
}
753+
754+
this.rafFired(handler, callstack.traceId, selfTime);
733755
});
734756
this.updateRafHistory(handler, callstack);
735757

@@ -747,30 +769,34 @@ export class Wrapper {
747769

748770
this.updateCafHistory(handler, callstack);
749771
this.callCounter.cancelAnimationFrame++;
750-
if (this.#traceForDebug === callstack.traceId) {
772+
if (this.#shouldDebug(callstack.traceId)) {
751773
debugger;
752774
}
753-
this.native.cancelAnimationFrame(handler);
775+
if (!this.#shouldBypass(callstack.traceId)) {
776+
this.native.cancelAnimationFrame(handler);
777+
}
754778
}.bind(this);
755779
}
756780

757781
wrapEval() {
758782
window.eval = function WrappedLessEval(this: Wrapper, code: string) {
783+
const err = new Error(TRACE_ERROR_MESSAGE);
784+
const callstack = this.createCallstack(err, code);
759785
let rv: unknown;
760786
let throwError = null;
761787
let usesLocalScope = false;
762788
let selfTime = null;
763-
const err = new Error(TRACE_ERROR_MESSAGE);
764-
const callstack = this.createCallstack(err, code);
765789

766790
try {
767791
this.callCounter.eval++;
768792
const start = performance.now();
769-
if (this.#traceForDebug === callstack.traceId) {
793+
if (this.#shouldDebug(callstack.traceId)) {
770794
debugger;
771795
}
772-
rv = this.native.eval(code);
773-
selfTime = performance.now() - start;
796+
if (!this.#shouldBypass(callstack.traceId)) {
797+
rv = this.native.eval(code);
798+
selfTime = performance.now() - start;
799+
}
774800
} catch (error: unknown) {
775801
if (error instanceof Error && 'ReferenceError' === error.name) {
776802
// most likely a side effect of `eval` reassigning
@@ -807,25 +833,33 @@ export class Wrapper {
807833
const handler = this.native.setTimeout(
808834
(...params: any[]) => {
809835
const start = performance.now();
836+
let selfTime = null;
837+
810838
if (isEval) {
811839
this.callCounter.eval++;
812-
if (this.#traceForDebug === callstack.traceId) {
840+
if (this.#shouldDebug(callstack.traceId)) {
813841
debugger;
814842
}
815-
// see https://developer.mozilla.org/docs/Web/API/setTimeout#code
816-
this.native.eval(code);
843+
if (!this.#shouldBypass(callstack.traceId)) {
844+
// see https://developer.mozilla.org/docs/Web/API/setTimeout#code
845+
this.native.eval(code);
846+
selfTime = performance.now() - start;
847+
}
817848
} else {
818-
if (this.#traceForDebug === callstack.traceId) {
849+
if (this.#shouldDebug(callstack.traceId)) {
819850
debugger;
820851
}
821-
code(...params);
852+
if (!this.#shouldBypass(callstack.traceId)) {
853+
code(...params);
854+
selfTime = performance.now() - start;
855+
}
822856
}
823-
const stop = performance.now() - start;
824-
this.timerOffline(handler, null, stop);
857+
858+
this.timerOffline(handler, null, selfTime);
825859
this.updateTimersSelfTime(
826860
this.setTimeoutHistory,
827861
callstack.traceId,
828-
stop
862+
selfTime
829863
);
830864
},
831865
delay,
@@ -873,10 +907,12 @@ export class Wrapper {
873907
}
874908

875909
this.callCounter.clearTimeout++;
876-
if (this.#traceForDebug === callstack.traceId) {
910+
if (this.#shouldDebug(callstack.traceId)) {
877911
debugger;
878912
}
879-
this.native.clearTimeout(handler);
913+
if (!this.#shouldBypass(callstack.traceId)) {
914+
this.native.clearTimeout(handler);
915+
}
880916
}.bind(this);
881917
}
882918

@@ -895,23 +931,32 @@ export class Wrapper {
895931
const handler = this.native.setInterval(
896932
(...params: any[]) => {
897933
const start = performance.now();
934+
let selfTime = null;
935+
898936
if (isEval) {
899937
this.callCounter.eval++;
900-
if (this.#traceForDebug === callstack.traceId) {
938+
if (this.#shouldDebug(callstack.traceId)) {
901939
debugger;
902940
}
903-
// see https://developer.mozilla.org/docs/Web/API/setInterval
904-
this.native.eval(code);
941+
if (!this.#shouldBypass(callstack.traceId)) {
942+
// see https://developer.mozilla.org/docs/Web/API/setInterval
943+
this.native.eval(code);
944+
selfTime = performance.now() - start;
945+
}
905946
} else {
906-
if (this.#traceForDebug === callstack.traceId) {
947+
if (this.#shouldDebug(callstack.traceId)) {
907948
debugger;
908949
}
909-
code(...params);
950+
if (!this.#shouldBypass(callstack.traceId)) {
951+
code(...params);
952+
selfTime = performance.now() - start;
953+
}
910954
}
955+
911956
this.updateTimersSelfTime(
912957
this.setIntervalHistory,
913958
callstack.traceId,
914-
performance.now() - start
959+
selfTime
915960
);
916961
},
917962
delay,
@@ -959,10 +1004,12 @@ export class Wrapper {
9591004
}
9601005

9611006
this.callCounter.clearInterval++;
962-
if (this.#traceForDebug === callstack.traceId) {
1007+
if (this.#shouldDebug(callstack.traceId)) {
9631008
debugger;
9641009
}
965-
this.native.clearInterval(handler);
1010+
if (!this.#shouldBypass(callstack.traceId)) {
1011+
this.native.clearInterval(handler);
1012+
}
9661013
}.bind(this);
9671014
}
9681015

0 commit comments

Comments
 (0)