- {t('Tracker version')} ({version})
+ {warnings[1] ? (
+
+
+
+ {t('Tracker version')}{' '}
+ {version}
{t('for this recording is')}{' '}
{trackerVerDiff === VersionComparison.Lower
? 'lower '
: 'ahead of '}
- {t('the current')} ({trackerVersion}) {t('version')}.
+ {t('the current')}
+ {trackerVersion}
+ {t('version')}.
-
+
closeWarning(1)}
+ >
+
+
+
+ ) : null}
+ {warnings[2] ? (
+
+
+
+ {t(
+ 'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
+ )}
+
+
+ {t('Enable')}
+
+
+
+
closeWarning(1)}
+ >
+
+
+
+ ) : null}
+ {warnings[2] ? (
+
+
+
+ {t(
+ 'If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.',
+ )}
+
+
+ {t('Enable')}
+
+
+
closeWarning(2)}
>
-
+
) : null}
diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index 6dde30d79..7ac300c41 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -20,7 +20,7 @@ import { toast } from 'react-toastify';
import StepsModal from './StepsModal';
import SidePanel from './SidePanel';
import { useTranslation } from 'react-i18next';
-
+import { PANEL_SIZES } from 'App/constants/panelSizes';
const menuItems = [
{
key: '1',
@@ -160,7 +160,7 @@ function TestEdit() {
const isStartingPointValid = isValidUrl(uxtestingStore.instance.startingPath);
return (
-
+
+
+ {props.time ? (
+
+ {shortDurationFromMs(props.time)}
+
+ ) : null}
- {props.time ? (
-
- {shortDurationFromMs(props.time)}
-
- ) : null}
);
diff --git a/frontend/app/components/shared/DevTools/LongTaskPanel/LongTaskPanel.tsx b/frontend/app/components/shared/DevTools/LongTaskPanel/LongTaskPanel.tsx
new file mode 100644
index 000000000..c021afdef
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/LongTaskPanel.tsx
@@ -0,0 +1,265 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { Input } from 'antd';
+import { VList, VListHandle } from 'virtua';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import JumpButton from '../JumpButton';
+import { useRegExListFilterMemo } from '../useListFilter';
+import BottomBlock from '../BottomBlock';
+import { NoContent, Icon } from 'UI';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Segmented, Select, Tag } from 'antd';
+import { LongAnimationTask } from './type';
+import Script from './Script';
+import TaskTimeline from './TaskTimeline';
+import { Hourglass } from 'lucide-react';
+
+interface Row extends LongAnimationTask {
+ time: number;
+}
+
+const TABS = {
+ all: 'all',
+ blocking: 'blocking',
+};
+
+const SORT_BY = {
+ timeAsc: 'timeAsc',
+ blocking: 'blockingDesc',
+ duration: 'durationDesc',
+};
+
+function LongTaskPanel() {
+ const { t } = useTranslation();
+ const [tab, setTab] = React.useState(TABS.all);
+ const [sortBy, setSortBy] = React.useState(SORT_BY.timeAsc);
+ const _list = React.useRef(null);
+ const { player, store } = React.useContext(PlayerContext);
+ const [searchValue, setSearchValue] = React.useState('');
+
+ const { currentTab, tabStates } = store.get();
+ const longTasks = tabStates[currentTab]?.longTaskList || [];
+
+ const filteredList = useRegExListFilterMemo(
+ longTasks,
+ (task: LongAnimationTask) => [
+ task.name,
+ task.scripts.map((script) => script.name).join(','),
+ task.scripts.map((script) => script.sourceURL).join(','),
+ ],
+ searchValue,
+ );
+
+ const onFilterChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setSearchValue(value);
+ };
+
+ const onRowClick = (time: number) => {
+ player.jump(time);
+ };
+
+ const rows: Row[] = React.useMemo(() => {
+ let rowMap = filteredList.map((task) => ({
+ ...task,
+ time: task.time ?? task.startTime,
+ }));
+ if (tab === 'blocking') {
+ rowMap = rowMap.filter((task) => task.blockingDuration > 0);
+ }
+ switch (sortBy) {
+ case SORT_BY.blocking:
+ rowMap = rowMap.sort((a, b) => b.blockingDuration - a.blockingDuration);
+ break;
+ case SORT_BY.duration:
+ rowMap = rowMap.sort((a, b) => b.duration - a.duration);
+ break;
+ default:
+ rowMap = rowMap.sort((a, b) => a.time - b.time);
+ }
+ return rowMap;
+ }, [filteredList.length, tab, sortBy]);
+
+ const blockingTasks = React.useMemo(() => {
+ let blockingAmount = 0;
+ for (const task of longTasks) {
+ if (task.blockingDuration > 0) {
+ blockingAmount++;
+ }
+ }
+ return blockingAmount;
+ }, [longTasks.length]);
+
+ return (
+
+
+
+
+ {t('Long Tasks')}
+
+
+
+
+ {t('Blocking')} ({blockingTasks})
+
+
+
+
+
+ {t('No Data')}
+
+ }
+ size="small"
+ show={filteredList.length === 0}
+ >
+
+ {rows.map((task) => (
+
+ ))}
+
+
+
+
+ );
+}
+
+function LongTaskRow({
+ task,
+ onJump,
+}: {
+ task: Row;
+ onJump: (time: number) => void;
+}) {
+ const [expanded, setExpanded] = React.useState(false);
+
+ return (
+
+
+
setExpanded(!expanded)} />
+ {expanded ? (
+ <>
+
+
+
+ First UI event timestamp:
+
+
+ {Math.round(task.firstUIEventTimestamp)} ms
+
+
Scripts:
+
+ {task.scripts.map((script, index) => (
+
+ ))}
+
+
+ ) : null}
+
+
onJump(task.time)} />
+
+ );
+}
+
+function TaskTitle({
+ entry,
+ toggleExpand,
+ expanded,
+}: {
+ entry: {
+ name: string;
+ duration: number;
+ blockingDuration?: number;
+ scripts: LongAnimationTask['scripts'];
+ };
+ expanded: boolean;
+ toggleExpand: () => void;
+}) {
+ const isBlocking =
+ entry.blockingDuration !== undefined && entry.blockingDuration > 0;
+
+ const scriptTitles = entry.scripts.map((script) =>
+ script.invokerType ? script.invokerType : script.name,
+ );
+ const { title, plusMore } = getFirstTwoScripts(scriptTitles);
+ return (
+
+
+ {title}
+
+ {plusMore}
+
+
+ {Math.round(entry.duration)} ms
+
+ {isBlocking ? (
+
+ {Math.round(entry.blockingDuration!)} ms
+ blocking
+
+ ) : null}
+
+ );
+}
+
+function getFirstTwoScripts(titles: string[]) {
+ if (titles.length === 0) {
+ return { title: 'Long Animation Task', plusMore: null };
+ }
+ const additional = titles.length - 2;
+ const additionalStr = additional > 0 ? `+ ${additional} more` : null;
+ return {
+ title: `${titles[0]}${titles[1] ? `, ${titles[1]}` : ''}`,
+ plusMore: additionalStr,
+ };
+}
+
+export default observer(LongTaskPanel);
diff --git a/frontend/app/components/shared/DevTools/LongTaskPanel/Script.tsx b/frontend/app/components/shared/DevTools/LongTaskPanel/Script.tsx
new file mode 100644
index 000000000..afbd98b8b
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/Script.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { LongAnimationTask } from './type';
+import { Tag } from 'antd';
+import { Code } from 'lucide-react';
+
+function getAddress(script: LongAnimationTask['scripts'][number]) {
+ return `${script.sourceURL}${script.sourceFunctionName ? ':' + script.sourceFunctionName : ''}${script.sourceCharPosition && script.sourceCharPosition >= 0 ? ':' + script.sourceCharPosition : ''}`;
+}
+function ScriptTitle({
+ script,
+}: {
+ script: LongAnimationTask['scripts'][number];
+}) {
+ return script.invokerType ? (
+
{script.invokerType}
+ ) : (
+
{script.name}
+ );
+}
+
+function ScriptInfo({
+ script,
+}: {
+ script: LongAnimationTask['scripts'][number];
+}) {
+ const hasInvoker = script.invoker !== script.sourceURL;
+ return (
+
+ {hasInvoker ? (
+
+ ) : null}
+
+
+
+
+ );
+}
+
+function InfoEntry({
+ title,
+ value,
+}: {
+ title: string;
+ value: string | number;
+}) {
+ return (
+
+ );
+}
+
+function Script({ script }: { script: LongAnimationTask['scripts'][number] }) {
+ return (
+
+
+
+ );
+}
+
+export default Script;
diff --git a/frontend/app/components/shared/DevTools/LongTaskPanel/TaskTimeline.tsx b/frontend/app/components/shared/DevTools/LongTaskPanel/TaskTimeline.tsx
new file mode 100644
index 000000000..2c0079380
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/TaskTimeline.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { Tooltip } from 'antd'
+import { LongAnimationTask } from "./type";
+import cn from "classnames";
+
+const getSeverityClass = (duration: number) => {
+ if (duration > 200) return 'bg-[#CC0000]';
+ if (duration > 100) return 'bg-[#EFB100]';
+ return 'bg-[#66a299]';
+};
+
+function TaskTimeline({ task }: { task: LongAnimationTask }) {
+ const totalDuration = task.duration;
+ const scriptDuration = task.scripts.reduce((sum, script) => sum + script.duration, 0);
+ const layoutDuration = task.scripts.reduce(
+ (sum, script) => sum + (script.forcedStyleAndLayoutDuration || 0),
+ 0
+ );
+ const idleDuration = totalDuration - scriptDuration - layoutDuration;
+
+ const scriptWidth = (scriptDuration / totalDuration) * 100;
+ const layoutWidth = (layoutDuration / totalDuration) * 100;
+ const idleWidth = (idleDuration / totalDuration) * 100;
+
+ return (
+
+
Timeline:
+
+ {scriptDuration > 0 && (
+
+ )}
+ {idleDuration > 0 && (
+
+ )}
+ {layoutDuration > 0 && (
+
+ )}
+
+
+ start: {Math.round(task.startTime)}ms
+ finish: {Math.round(task.startTime + task.duration)}ms
+
+
+ );
+}
+
+
+function TimelineSegment({
+ name,
+ classes,
+ width,
+}: {
+ name: string;
+ width: number;
+ classes: string;
+}) {
+ return (
+
+
+
+ );
+}
+
+export default TaskTimeline;
diff --git a/frontend/app/components/shared/DevTools/LongTaskPanel/__mock.ts b/frontend/app/components/shared/DevTools/LongTaskPanel/__mock.ts
new file mode 100644
index 000000000..ca952f42d
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/__mock.ts
@@ -0,0 +1,268 @@
+export const mockData = [
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 3.5,
+ duration: 74.5,
+ renderStart: 77.79999923706055,
+ styleAndLayoutStart: 77.89999961853027,
+ firstUIEventTimestamp: 0,
+ blockingDuration: 0,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 31,
+ duration: 5,
+ invoker: 'http://localhost:3333/2325/session/3249172234241386834',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 35,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/2325/session/3249172234241386834',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 615.8999996185303,
+ duration: 464.8999996185303,
+ renderStart: 1080.6999998092651,
+ styleAndLayoutStart: 1080.7999992370605,
+ firstUIEventTimestamp: 0,
+ blockingDuration: 414.361,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 616.0999994277954,
+ duration: 234,
+ invoker: 'http://localhost:3333/app-3a809cc.js',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 849.8999996185303,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-3a809cc.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 850.8999996185303,
+ duration: 219,
+ invoker: 'http://localhost:3333/app-22de34a.js',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 930.5999994277954,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-22de34a.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 1070.5999994277954,
+ duration: 9,
+ invoker: '#document.onDOMContentLoaded',
+ invokerType: 'event-listener',
+ windowAttribution: 'self',
+ executionStart: 1070.5999994277954,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-22de34a.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 2298086,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 1081.3999996185303,
+ duration: 55.69999980926514,
+ renderStart: 1136.5999994277954,
+ styleAndLayoutStart: 1136.6999998092651,
+ firstUIEventTimestamp: 0,
+ blockingDuration: 0,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 1081.3999996185303,
+ duration: 45,
+ invoker: 'MessagePort.onmessage',
+ invokerType: 'event-listener',
+ windowAttribution: 'self',
+ executionStart: 1081.3999996185303,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-3a809cc.js',
+ sourceFunctionName: 'performWorkUntilDeadline',
+ sourceCharPosition: 8985606,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 1495.7999992370605,
+ duration: 56.40000057220459,
+ renderStart: 1552.0999994277954,
+ styleAndLayoutStart: 1552.0999994277954,
+ firstUIEventTimestamp: 0,
+ blockingDuration: 0,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 1495.8999996185303,
+ duration: 18,
+ invoker:
+ 'http://localhost:3333/vendors-node_modules_store_ant-design-icons-virtual-42686020c5_package_es_icons_SyncOutlined_-1757ec.app-446e3c1.js',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 1514.5999994277954,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL:
+ 'http://localhost:3333/vendors-node_modules_store_ant-design-icons-virtual-42686020c5_package_es_icons_SyncOutlined_-1757ec.app-446e3c1.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 1517.1999998092651,
+ duration: 12,
+ invoker:
+ 'http://localhost:3333/app_components_Session_Player_ReplayPlayer_PlayerInst_tsx-app_components_Session__Player_Over-d1e8de.app-1eb48ad.js',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 1529.6999998092651,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL:
+ 'http://localhost:3333/app_components_Session_Player_ReplayPlayer_PlayerInst_tsx-app_components_Session__Player_Over-d1e8de.app-1eb48ad.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 1531.5999994277954,
+ duration: 19,
+ invoker:
+ 'http://localhost:3333/app_components_Session_Session_tsx-app_components_Session_Tabs_tabs_module_css-app_components-e2a7c2.app-fd8d38a.js',
+ invokerType: 'classic-script',
+ windowAttribution: 'self',
+ executionStart: 1539.1999998092651,
+ forcedStyleAndLayoutDuration: 0,
+ pauseDuration: 0,
+ sourceURL:
+ 'http://localhost:3333/app_components_Session_Session_tsx-app_components_Session_Tabs_tabs_module_css-app_components-e2a7c2.app-fd8d38a.js',
+ sourceFunctionName: '',
+ sourceCharPosition: 0,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 2392.699999809265,
+ duration: 139.5,
+ renderStart: 2529.8999996185303,
+ styleAndLayoutStart: 2531,
+ firstUIEventTimestamp: 2529.8999996185303,
+ blockingDuration: 85.95,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 2392.699999809265,
+ duration: 133,
+ invoker: 'Response.json.then',
+ invokerType: 'resolve-promise',
+ windowAttribution: 'self',
+ executionStart: 2392.699999809265,
+ forcedStyleAndLayoutDuration: 6,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-22de34a.js',
+ sourceFunctionName: '',
+ sourceCharPosition: -1,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 2536.2999992370605,
+ duration: 117,
+ renderStart: 2650.3999996185303,
+ styleAndLayoutStart: 2653.2999992370605,
+ firstUIEventTimestamp: 2650.3999996185303,
+ blockingDuration: 60.8,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 2541.0999994277954,
+ duration: 107,
+ invoker: 'Response.arrayBuffer.then',
+ invokerType: 'resolve-promise',
+ windowAttribution: 'self',
+ executionStart: 2541.0999994277954,
+ forcedStyleAndLayoutDuration: 3,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-22de34a.js',
+ sourceFunctionName: '',
+ sourceCharPosition: -1,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 5621.099999427795,
+ duration: 62.90000057220459,
+ renderStart: 5680.5,
+ styleAndLayoutStart: 5682.099999427795,
+ firstUIEventTimestamp: 5633.199999809265,
+ blockingDuration: 0,
+ scripts: [
+ {
+ name: 'script',
+ entryType: 'script',
+ startTime: 5635.39999961853,
+ duration: 43,
+ invoker: 'DIV#app.onclick',
+ invokerType: 'event-listener',
+ windowAttribution: 'self',
+ executionStart: 5635.39999961853,
+ forcedStyleAndLayoutDuration: 2,
+ pauseDuration: 0,
+ sourceURL: 'http://localhost:3333/app-3a809cc.js',
+ sourceFunctionName: 'dispatchDiscreteEvent',
+ sourceCharPosition: 7365614,
+ },
+ ],
+ },
+ {
+ name: 'long-animation-frame',
+ entryType: 'long-animation-frame',
+ startTime: 31203.599999427795,
+ duration: 118.5,
+ renderStart: 31322,
+ styleAndLayoutStart: 31322.099999427795,
+ firstUIEventTimestamp: 0,
+ blockingDuration: 0,
+ scripts: [],
+ },
+];
diff --git a/frontend/app/components/shared/DevTools/LongTaskPanel/type.ts b/frontend/app/components/shared/DevTools/LongTaskPanel/type.ts
new file mode 100644
index 000000000..5c232aeac
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/type.ts
@@ -0,0 +1,21 @@
+export interface LongAnimationTask {
+ name: string;
+ duration: number;
+ blockingDuration: number;
+ firstUIEventTimestamp: number;
+ startTime: number;
+ time?: number;
+ scripts: [
+ {
+ name: string;
+ duration: number;
+ invoker: string;
+ invokerType: string;
+ pauseDuration: number;
+ sourceURL: string;
+ sourceFunctionName: string;
+ sourceCharPosition: number;
+ forcedStyleAndLayoutDuration: number;
+ },
+ ];
+}
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index cce5b1ee5..aee9a21ae 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -1,5 +1,5 @@
/* eslint-disable i18next/no-literal-string */
-import { ResourceType, Timed } from 'Player';
+import { IResourceRequest, ResourceType, Timed } from 'Player';
import { WsChannel } from 'Player/web/messages';
import MobilePlayer from 'Player/mobile/IOSPlayer';
import WebPlayer from 'Player/web/WebPlayer';
@@ -11,7 +11,7 @@ import React, {
useCallback,
useRef,
} from 'react';
-import i18n from 'App/i18n'
+import i18n from 'App/i18n';
import { useModal } from 'App/components/Modal';
import {
@@ -23,10 +23,7 @@ import { useStore } from 'App/mstore';
import { formatBytes, debounceCall } from 'App/utils';
import { Icon, NoContent, Tabs } from 'UI';
import { Tooltip, Input, Switch, Form } from 'antd';
-import {
- SearchOutlined,
- InfoCircleOutlined,
-} from '@ant-design/icons';
+import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
import FetchDetailsModal from 'Shared/FetchDetailsModal';
@@ -37,7 +34,7 @@ import TimeTable from '../TimeTable';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import WSPanel from './WSPanel';
import { useTranslation } from 'react-i18next';
-import { mergeListsWithZoom, processInChunks } from './utils'
+import { mergeListsWithZoom, processInChunks } from './utils';
// Constants remain the same
const INDEX_KEY = 'network';
@@ -84,9 +81,22 @@ export function renderType(r: any) {
}
export function renderName(r: any) {
+ const maxTtipUrlLength = 800;
+ const tooltipUrl =
+ r.url && r.url.length > maxTtipUrlLength
+ ? `${r.url.slice(0, maxTtipUrlLength / 2)}......${r.url.slice(-maxTtipUrlLength / 2)}`
+ : r.url;
+
return (
-
{r.url}