jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(player): basic tabchange event support

Browse source
This commit is contained in:
nick-delirium 2023-05-12 17:42:10 +02:00
parent 0d21a39792
commit edc5d93b63
9 changed files with 223 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/app/components/Session_/Subheader.js
View file

@ -30,6 +30,8 @@ function SubHeader(props) {
exceptionsList,
eventList: eventsList,
endTime,
currentTab,
tabs,
} = store.get();
const enabledIntegration = useMemo(() => {
@ -114,6 +116,11 @@ function SubHeader(props) {
</div>
</>
)}
{tabs.map((tab, i) => (
<div className={currentTab === tab ? 'outline-active-blue-border outline m-2' : 'm-2'}>
Tab {i+1}
</div>
))}
<div
className="ml-auto text-sm flex items-center color-gray-medium gap-2"
style={{ width: 'max-content' }}

26
frontend/app/player/common/ListWalker.ts
View file

@ -108,7 +108,7 @@ export default class ListWalker<T extends Timed> {
/**
* @returns last message with the time <= t.
* Assumed that the current message is already handled so
* if pointer doesn't cahnge <null> is returned.
* if pointer doesn't change <null> is returned.
*/
moveGetLast(t: number, index?: number): T | null {
let key: string = "time"; //TODO
@ -130,6 +130,30 @@ export default class ListWalker<T extends Timed> {
return changed ? this.list[ this.p - 1 ] : null;
}
moveGetLastDebug(t: number, index?: number): T | null {
let key: string = "time"; //TODO
let val = t;
if (index) {
key = "_index";
val = index;
}
let changed = false;
while (this.p < this.length && this.list[this.p][key] <= val) {
this.moveNext()
changed = true;
}
while (this.p > 0 && this.list[ this.p - 1 ][key] > val) {
this.movePrev()
changed = true;
}
console.log(this.list[this.p - 1])
return changed ? this.list[ this.p - 1 ] : null;
}
/**
* Moves over the messages starting from the current+1 to the last one with the time <= t
* applying callback on each of them

4
frontend/app/player/web/MessageLoader.ts
View file

@ -29,6 +29,7 @@ export default class MessageLoader {
private store: Store<State>,
private messageManager: MessageManager,
private isClickmap: boolean,
private uiErrorHandler?: { error: (msg: string) => void }
) {}
createNewParser(shouldDecrypt = true, file?: string, toggleStatus?: (isLoading: boolean) => void) {
@ -57,6 +58,9 @@ export default class MessageLoader {
this.messageManager._sortMessagesHack(sorted)
toggleStatus?.(false);
this.messageManager.setMessagesLoading(false)
}).catch(e => {
console.error(e)
this.uiErrorHandler?.error('Error parsing file: ' + e.message)
})
}

243
frontend/app/player/web/MessageManager.ts
View file

@ -3,12 +3,6 @@ import { Decoder } from "syncod";
import logger from 'App/logger';
import { TYPES as EVENT_TYPES } from 'Types/session/event';
import { Log } from 'Player';
import {
ResourceType,
getResourceFromResourceTiming,
getResourceFromNetworkRequest
} from 'Player'
import type { Store } from 'Player';
import ListWalker from '../common/ListWalker';
@ -21,7 +15,6 @@ import WindowNodeCounter from './managers/WindowNodeCounter';
import ActivityManager from './managers/ActivityManager';
import { MouseThrashing, MType } from "./messages";
import { isDOMType } from './messages/filters.gen';
import type {
Message,
SetPageLocation,
@ -41,6 +34,8 @@ import Screen, {
import type { InitialLists } from './Lists'
import type { PerformanceChartPoint } from './managers/PerformanceTrackManager';
import type { SkipInterval } from './managers/ActivityManager';
import TabManager from "Player/web/TabManager";
import ActiveTabManager from "Player/web/managers/ActiveTabManager";
export interface State extends ScreenState, ListsState {
performanceChartData: PerformanceChartPoint[],
@ -62,10 +57,12 @@ export interface State extends ScreenState, ListsState {
lastMessageTime: number,
firstVisualEvent: number,
messagesProcessed: boolean,
currentTab: string,
tabs: string[],
}
const visualChanges = [
export const visualChanges = [
MType.MouseMove,
MType.MouseClick,
MType.CreateElementNode,
@ -88,6 +85,8 @@ export default class MessageManager {
firstVisualEvent: 0,
messagesProcessed: false,
messagesLoading: false,
currentTab: '',
tabs: [],
}
private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();
@ -114,12 +113,14 @@ export default class MessageManager {
private navigationStartOffset: number = 0;
private lastMessageTime: number = 0;
private firstVisualEventSet = false;
private tabs: Record<string,TabManager> = {};
private activeTabManager = new ActiveTabManager()
constructor(
private readonly session: any /*Session*/,
private readonly state: Store<State>,
private readonly screen: Screen,
initialLists?: Partial<InitialLists>,
private readonly initialLists?: Partial<InitialLists>,
private readonly uiErrorHandler?: { error: (error: string) => void, },
) {
this.pagesManager = new PagesManager(screen, this.session.isMobile, this.setCSSLoading)
@ -234,62 +235,8 @@ export default class MessageManager {
this.activityManager = new ActivityManager(this.session.duration.milliseconds);
}
move(t: number, index?: number): void {
const stateToUpdate: Partial<State> = {};
/* == REFACTOR_ME == */
const lastLoadedLocationMsg = this.loadedLocationManager.moveGetLast(t, index);
if (!!lastLoadedLocationMsg) {
// TODO: page-wise resources list // setListsStartTime(lastLoadedLocationMsg.time)
this.navigationStartOffset = lastLoadedLocationMsg.navigationStart - this.sessionStart;
}
const llEvent = this.locationEventManager.moveGetLast(t, index);
if (!!llEvent) {
if (llEvent.domContentLoadedTime != null) {
stateToUpdate.domContentLoadedTime = {
time: llEvent.domContentLoadedTime + this.navigationStartOffset, //TODO: predefined list of load event for the network tab (merge events & SetPageLocation: add navigationStart to db)
value: llEvent.domContentLoadedTime,
}
}
if (llEvent.loadTime != null) {
stateToUpdate.loadTime = {
time: llEvent.loadTime + this.navigationStartOffset,
value: llEvent.loadTime,
}
}
if (llEvent.domBuildingTime != null) {
stateToUpdate.domBuildingTime = llEvent.domBuildingTime;
}
}
/* === */
const lastLocationMsg = this.locationManager.moveGetLast(t, index);
if (!!lastLocationMsg) {
stateToUpdate.location = lastLocationMsg.url;
}
const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index);
if (!!lastConnectionInfoMsg) {
stateToUpdate.connType = lastConnectionInfoMsg.type;
stateToUpdate.connBandwidth = lastConnectionInfoMsg.downlink;
}
const lastPerformanceTrackMessage = this.performanceTrackManager.moveGetLast(t, index);
if (!!lastPerformanceTrackMessage) {
stateToUpdate.performanceChartTime = lastPerformanceTrackMessage.time;
}
Object.assign(stateToUpdate, this.lists.moveGetState(t))
Object.keys(stateToUpdate).length > 0 && this.state.update(stateToUpdate);
/* Sequence of the managers is important here */
// Preparing the size of "screen"
const lastResize = this.resizeManager.moveGetLast(t, index);
if (!!lastResize) {
this.setSize(lastResize)
}
this.pagesManager.moveReady(t).then(() => {
const lastScroll = this.scrollManager.moveGetLast(t, index);
if (!!lastScroll && this.screen.window) {
this.screen.window.scrollTo(lastScroll.x, lastScroll.y);
}
move(t: number): any {
this.activeTabManager.moveReady(t).then(tabId => {
// Moving mouse and setting :hover classes on ready view
this.mouseMoveManager.move(t);
const lastClick = this.clickManager.moveGetLast(t);
@ -300,6 +247,11 @@ export default class MessageManager {
if (!!lastThrashing && t - lastThrashing.time < 300) {
this.screen.cursor.shake();
}
if (tabId && this.state.get().currentTab !== tabId) {
this.state.update({ currentTab: tabId })
}
this.tabs[this.state.get().currentTab].move(t)
})
if (this.waitingForFiles && this.lastMessageTime <= t && t !== this.session.duration.milliseconds) {
@ -308,7 +260,21 @@ export default class MessageManager {
}
distributeMessage = (msg: Message): void => {
distributeMessage = (msg: Message & { tabId: string }): void => {
if (!this.tabs[msg.tabId]) {
console.log(msg.tabId)
this.tabs[msg.tabId] = new TabManager(
this.session,
this.state,
this.screen,
msg.tabId,
this.setSize,
this.initialLists,
)
}
// return this.tabs[msg.tabId].distributeMessage(msg)
const lastMessageTime = Math.max(msg.time, this.lastMessageTime)
this.lastMessageTime = lastMessageTime
this.state.update({ lastMessageTime })
@ -316,14 +282,9 @@ export default class MessageManager {
this.activityManager?.updateAcctivity(msg.time);
}
switch (msg.tp) {
case MType.SetPageLocation:
this.locationManager.append(msg);
if (msg.navigationStart > 0) {
this.loadedLocationManager.append(msg);
}
break;
case MType.SetViewportSize:
this.resizeManager.append(msg);
case MType.TabChange:
this.state.update({ tabs: this.state.get().tabs.concat(msg.tabId) })
this.activeTabManager.append(msg)
break;
case MType.MouseThrashing:
this.mouseThrashingManager.append(msg);
@ -334,89 +295,73 @@ export default class MessageManager {
case MType.MouseClick:
this.clickManager.append(msg);
break;
case MType.SetViewportScroll:
this.scrollManager.append(msg);
break;
case MType.PerformanceTrack:
this.performanceTrackManager.append(msg);
break;
case MType.SetPageVisibility:
this.performanceTrackManager.handleVisibility(msg)
break;
case MType.ConnectionInformation:
this.connectionInfoManger.append(msg);
break;
case MType.OTable:
this.decoder.set(msg.key, msg.value);
break;
/* Lists: */
case MType.ConsoleLog:
if (msg.level === 'debug') break;
this.lists.lists.log.append(
// @ts-ignore : TODO: enums in the message schema
Log(msg)
)
break;
case MType.ResourceTimingDeprecated:
case MType.ResourceTiming:
// TODO: merge `resource` and `fetch` lists into one here instead of UI
if (msg.initiator !== ResourceType.FETCH && msg.initiator !== ResourceType.XHR) {
// @ts-ignore TODO: typing for lists
this.lists.lists.resource.insert(getResourceFromResourceTiming(msg, this.sessionStart))
}
break;
case MType.Fetch:
case MType.NetworkRequest:
this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart))
break;
case MType.Redux:
this.lists.lists.redux.append(msg);
break;
case MType.NgRx:
this.lists.lists.ngrx.append(msg);
break;
case MType.Vuex:
this.lists.lists.vuex.append(msg);
break;
case MType.Zustand:
this.lists.lists.zustand.append(msg)
break
case MType.MobX:
this.lists.lists.mobx.append(msg);
break;
case MType.GraphQl:
this.lists.lists.graphql.append(msg);
break;
case MType.Profiler:
this.lists.lists.profiles.append(msg);
break;
// /* Lists: */
// case MType.ConsoleLog:
// if (msg.level === 'debug') break;
// this.lists.lists.log.append(
// // @ts-ignore : TODO: enums in the message schema
// Log(msg)
// )
// break;
// case MType.ResourceTimingDeprecated:
// case MType.ResourceTiming:
// // TODO: merge `resource` and `fetch` lists into one here instead of UI
// if (msg.initiator !== ResourceType.FETCH && msg.initiator !== ResourceType.XHR) {
// // @ts-ignore TODO: typing for lists
// this.lists.lists.resource.insert(getResourceFromResourceTiming(msg, this.sessionStart))
// }
// break;
// case MType.Fetch:
// case MType.NetworkRequest:
// this.lists.lists.fetch.insert(getResourceFromNetworkRequest(msg, this.sessionStart))
// break;
// case MType.Redux:
// this.lists.lists.redux.append(msg);
// break;
// case MType.NgRx:
// this.lists.lists.ngrx.append(msg);
// break;
// case MType.Vuex:
// this.lists.lists.vuex.append(msg);
// break;
// case MType.Zustand:
// this.lists.lists.zustand.append(msg)
// break
// case MType.MobX:
// this.lists.lists.mobx.append(msg);
// break;
// case MType.GraphQl:
// this.lists.lists.graphql.append(msg);
// break;
// case MType.Profiler:
// this.lists.lists.profiles.append(msg);
// break;
/* ===|=== */
default:
switch (msg.tp) {
case MType.CreateDocument:
if (!this.firstVisualEventSet) {
this.state.update({ firstVisualEvent: msg.time });
this.state.update({ firstVisualEvent: msg.time, currentTab: msg.tabId, tabs: [msg.tabId] });
this.firstVisualEventSet = true;
}
this.windowNodeCounter.reset();
this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
break;
case MType.CreateTextNode:
case MType.CreateElementNode:
this.windowNodeCounter.addNode(msg.id, msg.parentID);
this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
break;
case MType.MoveNode:
this.windowNodeCounter.moveNode(msg.id, msg.parentID);
this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
break;
case MType.RemoveNode:
this.windowNodeCounter.removeNode(msg.id);
this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
break;
// break;
// case MType.CreateTextNode:
// case MType.CreateElementNode:
// this.windowNodeCounter.addNode(msg.id, msg.parentID);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
// case MType.MoveNode:
// this.windowNodeCounter.moveNode(msg.id, msg.parentID);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
// case MType.RemoveNode:
// this.windowNodeCounter.removeNode(msg.id);
// this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
// break;
}
this.performanceTrackManager.addNodeCountPointIfNeed(msg.time)
isDOMType(msg.tp) && this.pagesManager.appendMessage(msg)
this.tabs[msg.tabId].distributeMessage(msg)
// this.performanceTrackManager.addNodeCountPointIfNeed(msg.time)
// isDOMType(msg.tp) && this.pagesManager.appendMessage(msg)
break;
}
}

90
frontend/app/player/web/TabManager.ts
View file

@ -18,6 +18,7 @@ import MouseMoveManager from "Player/web/managers/MouseMoveManager";
import ActivityManager from "Player/web/managers/ActivityManager";
import { getResourceFromNetworkRequest, getResourceFromResourceTiming, Log, ResourceType } from "Player";
import { isDOMType } from "Player/web/messages/filters.gen";
import { State, visualChanges } from './MessageManager'
export default class TabManager {
private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();
@ -39,7 +40,9 @@ export default class TabManager {
private readonly session: any,
private readonly state: Store<{}>,
private readonly screen: Screen,
initialLists?: Partial<InitialLists>
private readonly id: string,
private readonly setSize: ({ height, width }: { height: number, width: number }) => void,
initialLists?: Partial<InitialLists>,
) {
this.pagesManager = new PagesManager(screen, this.session.isMobile, this.setCSSLoading)
this.lists = new Lists(initialLists)
@ -84,15 +87,6 @@ export default class TabManager {
distributeMessage(msg: Message): void {
const lastMessageTime = Math.max(msg.time, this.lastMessageTime)
this.lastMessageTime = lastMessageTime
this.state.update({ lastMessageTime })
if (visualChanges.includes(msg.tp)) {
this.activityManager?.updateAcctivity(msg.time);
}
let decoded;
const time = msg.time;
// console.log(msg)
switch (msg.tp) {
case MType.SetPageLocation:
this.locationManager.append(msg);
@ -103,15 +97,6 @@ export default class TabManager {
case MType.SetViewportSize:
this.resizeManager.append(msg);
break;
case MType.MouseThrashing:
this.mouseThrashingManager.append(msg);
break;
case MType.MouseMove:
this.mouseMoveManager.append(msg);
break;
case MType.MouseClick:
this.clickManager.append(msg);
break;
case MType.SetViewportScroll:
this.scrollManager.append(msg);
break;
@ -171,10 +156,6 @@ export default class TabManager {
default:
switch (msg.tp) {
case MType.CreateDocument:
if (!this.firstVisualEventSet) {
this.state.update({ firstVisualEvent: msg.time });
this.firstVisualEventSet = true;
}
this.windowNodeCounter.reset();
this.performanceTrackManager.setCurrentNodesCount(this.windowNodeCounter.count);
break;
@ -197,4 +178,67 @@ export default class TabManager {
break;
}
}
move(t: number, index?: number): void {
const stateToUpdate: Partial<State> = {};
/* == REFACTOR_ME == */
const lastLoadedLocationMsg = this.loadedLocationManager.moveGetLast(t, index);
if (!!lastLoadedLocationMsg) {
// TODO: page-wise resources list // setListsStartTime(lastLoadedLocationMsg.time)
this.navigationStartOffset = lastLoadedLocationMsg.navigationStart - this.sessionStart;
}
const llEvent = this.locationEventManager.moveGetLast(t, index);
if (!!llEvent) {
if (llEvent.domContentLoadedTime != null) {
stateToUpdate.domContentLoadedTime = {
time: llEvent.domContentLoadedTime + this.navigationStartOffset, //TODO: predefined list of load event for the network tab (merge events & SetPageLocation: add navigationStart to db)
value: llEvent.domContentLoadedTime,
}
}
if (llEvent.loadTime != null) {
stateToUpdate.loadTime = {
time: llEvent.loadTime + this.navigationStartOffset,
value: llEvent.loadTime,
}
}
if (llEvent.domBuildingTime != null) {
stateToUpdate.domBuildingTime = llEvent.domBuildingTime;
}
}
/* === */
const lastLocationMsg = this.locationManager.moveGetLast(t, index);
if (!!lastLocationMsg) {
stateToUpdate.location = lastLocationMsg.url;
}
const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index);
if (!!lastConnectionInfoMsg) {
stateToUpdate.connType = lastConnectionInfoMsg.type;
stateToUpdate.connBandwidth = lastConnectionInfoMsg.downlink;
}
const lastPerformanceTrackMessage = this.performanceTrackManager.moveGetLast(t, index);
if (!!lastPerformanceTrackMessage) {
stateToUpdate.performanceChartTime = lastPerformanceTrackMessage.time;
}
Object.assign(stateToUpdate, this.lists.moveGetState(t))
Object.keys(stateToUpdate).length > 0 && this.state.update(stateToUpdate);
/* Sequence of the managers is important here */
// Preparing the size of "screen"
const lastResize = this.resizeManager.moveGetLast(t, index);
if (!!lastResize) {
this.setSize(lastResize)
}
this.pagesManager.moveReady(t).then(() => {
const lastScroll = this.scrollManager.moveGetLast(t, index);
if (!!lastScroll && this.screen.window) {
this.screen.window.scrollTo(lastScroll.x, lastScroll.y);
}
})
// if (this.waitingForFiles && this.lastMessageTime <= t && t !== this.session.duration.milliseconds) {
// this.setMessagesLoading(true)
// }
}
}

3
frontend/app/player/web/WebPlayer.ts
View file

@ -53,7 +53,8 @@ export default class WebPlayer extends Player {
session,
wpState,
messageManager,
isClickMap
isClickMap,
uiErrorHandler
)
super(wpState, messageManager)
this.screen = screen

18
frontend/app/player/web/managers/ActiveTabManager.ts Normal file
View file

@ -0,0 +1,18 @@
import ListWalker from '../../common/ListWalker';
import type { TabChange } from '../messages';
export default class ActiveTabManager extends ListWalker<TabChange> {
currentTime = 0;
moveReady(t: number): Promise<string | null> {
if (t < this.currentTime) {
this.reset()
}
this.currentTime = t
const msg = this.moveGetLastDebug(t)
console.log('move', t, msg, this.list)
return Promise.resolve(msg?.tabId || null)
}
}

6
frontend/app/player/web/messages/MFileReader.ts
View file

@ -63,6 +63,7 @@ export default class MFileReader extends RawMessageReader {
}
}
currentTab = ''
readNext(): Message & { _index?: number } | null {
if (this.error || !this.hasNextByte()) {
return null
@ -82,6 +83,10 @@ export default class MFileReader extends RawMessageReader {
return null
}
if (rMsg.tp === MType.TabData) {
this.currentTab = rMsg.tabId
return this.readNext()
}
if (rMsg.tp === MType.Timestamp) {
if (!this.startTime) {
this.startTime = rMsg.timestamp
@ -93,6 +98,7 @@ export default class MFileReader extends RawMessageReader {
const index = this.noIndexes ? 0 : this.getLastMessageID()
const msg = Object.assign(rewriteMessage(rMsg), {
time: this.currentTime,
tabId: this.currentTab,
}, !this.noIndexes ? { _index: index } : {})
return msg

2
frontend/app/player/web/messages/RawMessageReader.gen.ts
View file

@ -674,7 +674,6 @@ export default class RawMessageReader extends PrimitiveReader {
}
case 118: {
console.log('TabChange')
const tabId = this.readString(); if (tabId === null) { return resetPointer() }
return {
tp: MType.TabChange,
@ -683,7 +682,6 @@ export default class RawMessageReader extends PrimitiveReader {
}
case 119: {
console.log('TabData')
const tabId = this.readString(); if (tabId === null) { return resetPointer() }
return {
tp: MType.TabData,