From ee20fdb57f68167903758807852e06531808df4d Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 3 Apr 2025 14:55:58 +0200
Subject: [PATCH] ui, tracker, backend: support long animation metrics

---
 backend/pkg/messages/messages.go              |  32 +
 backend/pkg/messages/read-message.go          |  26 +
 ee/connectors/msgcodec/messages.py            |  12 +
 ee/connectors/msgcodec/messages.pyx           |  19 +
 ee/connectors/msgcodec/msgcodec.py            |  10 +
 ee/connectors/msgcodec/msgcodec.pyx           |  10 +
 .../Player/ReplayPlayer/PlayerInst.tsx        |  47 +-
 .../Session_/Player/Controls/Controls.tsx     |  19 +-
 .../shared/DevTools/ConsoleRow/ConsoleRow.tsx |   1 -
 .../DevTools/LongTaskPanel/LongTaskPanel.tsx  | 193 ++++++
 .../shared/DevTools/LongTaskPanel/Script.tsx  |  61 ++
 .../DevTools/LongTaskPanel/TaskTimeline.tsx   |  79 +++
 .../shared/DevTools/LongTaskPanel/__mock.ts   | 268 ++++++++
 .../shared/DevTools/LongTaskPanel/type.ts     |  21 +
 frontend/app/mstore/uiPlayerStore.ts          |   3 +
 frontend/app/player/web/Lists.ts              |   3 +
 frontend/app/player/web/TabManager.ts         |   3 +
 .../web/messages/RawMessageReader.gen.ts      |  40 +-
 .../app/player/web/messages/filters.gen.ts    |   7 +-
 .../app/player/web/messages/message.gen.ts    | 156 ++---
 frontend/app/player/web/messages/raw.gen.ts   | 625 +++++++++---------
 .../player/web/messages/tracker-legacy.gen.ts |   5 +-
 .../app/player/web/messages/tracker.gen.ts    | 481 ++++++++++----
 frontend/app/player/web/types/longTask.ts     |  41 ++
 mobs/messages.rb                              |  11 +-
 tracker/tracker/src/common/messages.gen.ts    |  13 +-
 tracker/tracker/src/main/app/messages.gen.ts  |  19 +
 tracker/tracker/src/main/index.ts             |  11 +-
 .../src/main/modules/longAnimationTask.ts     |  61 ++
 .../src/webworker/MessageEncoder.gen.ts       |   4 +
 30 files changed, 1720 insertions(+), 561 deletions(-)
 create mode 100644 frontend/app/components/shared/DevTools/LongTaskPanel/LongTaskPanel.tsx
 create mode 100644 frontend/app/components/shared/DevTools/LongTaskPanel/Script.tsx
 create mode 100644 frontend/app/components/shared/DevTools/LongTaskPanel/TaskTimeline.tsx
 create mode 100644 frontend/app/components/shared/DevTools/LongTaskPanel/__mock.ts
 create mode 100644 frontend/app/components/shared/DevTools/LongTaskPanel/type.ts
 create mode 100644 frontend/app/player/web/types/longTask.ts
 create mode 100644 tracker/tracker/src/main/modules/longAnimationTask.ts

diff --git a/backend/pkg/messages/messages.go b/backend/pkg/messages/messages.go
index d4f184d48..bccd0f210 100644
--- a/backend/pkg/messages/messages.go
+++ b/backend/pkg/messages/messages.go
@@ -84,6 +84,7 @@ const (
 	MsgPartitionedMessage             = 82
 	MsgNetworkRequest                 = 83
 	MsgWSChannel                      = 84
+	MsgLongAnimationTask              = 89
 	MsgInputChange                    = 112
 	MsgSelectionChange                = 113
 	MsgMouseThrashing                 = 114
@@ -2294,6 +2295,37 @@ func (msg *WSChannel) TypeID() int {
 	return 84
 }
 
+type LongAnimationTask struct {
+	message
+	Name                  string
+	Duration              int64
+	BlockingDuration      int64
+	FirstUIEventTimestamp int64
+	StartTime             int64
+	Scripts               string
+}
+
+func (msg *LongAnimationTask) Encode() []byte {
+	buf := make([]byte, 61+len(msg.Name)+len(msg.Scripts))
+	buf[0] = 89
+	p := 1
+	p = WriteString(msg.Name, buf, p)
+	p = WriteInt(msg.Duration, buf, p)
+	p = WriteInt(msg.BlockingDuration, buf, p)
+	p = WriteInt(msg.FirstUIEventTimestamp, buf, p)
+	p = WriteInt(msg.StartTime, buf, p)
+	p = WriteString(msg.Scripts, buf, p)
+	return buf[:p]
+}
+
+func (msg *LongAnimationTask) Decode() Message {
+	return msg
+}
+
+func (msg *LongAnimationTask) TypeID() int {
+	return 89
+}
+
 type InputChange struct {
 	message
 	ID             uint64
diff --git a/backend/pkg/messages/read-message.go b/backend/pkg/messages/read-message.go
index f0051a042..7f05c1500 100644
--- a/backend/pkg/messages/read-message.go
+++ b/backend/pkg/messages/read-message.go
@@ -1419,6 +1419,30 @@ func DecodeWSChannel(reader BytesReader) (Message, error) {
 	return msg, err
 }
 
+func DecodeLongAnimationTask(reader BytesReader) (Message, error) {
+	var err error = nil
+	msg := &LongAnimationTask{}
+	if msg.Name, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	if msg.Duration, err = reader.ReadInt(); err != nil {
+		return nil, err
+	}
+	if msg.BlockingDuration, err = reader.ReadInt(); err != nil {
+		return nil, err
+	}
+	if msg.FirstUIEventTimestamp, err = reader.ReadInt(); err != nil {
+		return nil, err
+	}
+	if msg.StartTime, err = reader.ReadInt(); err != nil {
+		return nil, err
+	}
+	if msg.Scripts, err = reader.ReadString(); err != nil {
+		return nil, err
+	}
+	return msg, err
+}
+
 func DecodeInputChange(reader BytesReader) (Message, error) {
 	var err error = nil
 	msg := &InputChange{}
@@ -2248,6 +2272,8 @@ func ReadMessage(t uint64, reader BytesReader) (Message, error) {
 		return DecodeNetworkRequest(reader)
 	case 84:
 		return DecodeWSChannel(reader)
+	case 89:
+		return DecodeLongAnimationTask(reader)
 	case 112:
 		return DecodeInputChange(reader)
 	case 113:
diff --git a/ee/connectors/msgcodec/messages.py b/ee/connectors/msgcodec/messages.py
index 53450583d..7792b06df 100644
--- a/ee/connectors/msgcodec/messages.py
+++ b/ee/connectors/msgcodec/messages.py
@@ -789,6 +789,18 @@ class WSChannel(Message):
         self.message_type = message_type
 
 
+class LongAnimationTask(Message):
+    __id__ = 89
+
+    def __init__(self, name, duration, blocking_duration, first_ui_event_timestamp, start_time, scripts):
+        self.name = name
+        self.duration = duration
+        self.blocking_duration = blocking_duration
+        self.first_ui_event_timestamp = first_ui_event_timestamp
+        self.start_time = start_time
+        self.scripts = scripts
+
+
 class InputChange(Message):
     __id__ = 112
 
diff --git a/ee/connectors/msgcodec/messages.pyx b/ee/connectors/msgcodec/messages.pyx
index b07658d51..f88163a8f 100644
--- a/ee/connectors/msgcodec/messages.pyx
+++ b/ee/connectors/msgcodec/messages.pyx
@@ -1176,6 +1176,25 @@ cdef class WSChannel(PyMessage):
         self.message_type = message_type
 
 
+cdef class LongAnimationTask(PyMessage):
+    cdef public int __id__
+    cdef public str name
+    cdef public long duration
+    cdef public long blocking_duration
+    cdef public long first_ui_event_timestamp
+    cdef public long start_time
+    cdef public str scripts
+
+    def __init__(self, str name, long duration, long blocking_duration, long first_ui_event_timestamp, long start_time, str scripts):
+        self.__id__ = 89
+        self.name = name
+        self.duration = duration
+        self.blocking_duration = blocking_duration
+        self.first_ui_event_timestamp = first_ui_event_timestamp
+        self.start_time = start_time
+        self.scripts = scripts
+
+
 cdef class InputChange(PyMessage):
     cdef public int __id__
     cdef public unsigned long id
diff --git a/ee/connectors/msgcodec/msgcodec.py b/ee/connectors/msgcodec/msgcodec.py
index 6d771b559..7a8f0b25f 100644
--- a/ee/connectors/msgcodec/msgcodec.py
+++ b/ee/connectors/msgcodec/msgcodec.py
@@ -716,6 +716,16 @@ class MessageCodec(Codec):
                 message_type=self.read_string(reader)
             )
 
+        if message_id == 89:
+            return LongAnimationTask(
+                name=self.read_string(reader),
+                duration=self.read_int(reader),
+                blocking_duration=self.read_int(reader),
+                first_ui_event_timestamp=self.read_int(reader),
+                start_time=self.read_int(reader),
+                scripts=self.read_string(reader)
+            )
+
         if message_id == 112:
             return InputChange(
                 id=self.read_uint(reader),
diff --git a/ee/connectors/msgcodec/msgcodec.pyx b/ee/connectors/msgcodec/msgcodec.pyx
index 9055ca0d7..07ae0c9c8 100644
--- a/ee/connectors/msgcodec/msgcodec.pyx
+++ b/ee/connectors/msgcodec/msgcodec.pyx
@@ -814,6 +814,16 @@ cdef class MessageCodec:
                 message_type=self.read_string(reader)
             )
 
+        if message_id == 89:
+            return LongAnimationTask(
+                name=self.read_string(reader),
+                duration=self.read_int(reader),
+                blocking_duration=self.read_int(reader),
+                first_ui_event_timestamp=self.read_int(reader),
+                start_time=self.read_int(reader),
+                scripts=self.read_string(reader)
+            )
+
         if message_id == 112:
             return InputChange(
                 id=self.read_uint(reader),
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
index 4c0f3ab59..5112752a7 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
@@ -14,8 +14,8 @@ import {
   EXCEPTIONS,
   INSPECTOR,
   OVERVIEW,
-  BACKENDLOGS,
-} from 'App/mstore/uiPlayerStore';
+  BACKENDLOGS, LONG_TASK
+} from "App/mstore/uiPlayerStore";
 import { WebNetworkPanel } from 'Shared/DevTools/NetworkPanel';
 import Storage from 'Components/Session_/Storage';
 import { ConnectedPerformance } from 'Components/Session_/Performance';
@@ -31,6 +31,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { debounce } from 'App/utils';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
+import LongTaskPanel from "../../../shared/DevTools/LongTaskPanel/LongTaskPanel";
 import BackendLogsPanel from '../SharedComponents/BackendLogs/BackendLogsPanel';
 
 interface IProps {
@@ -158,20 +159,7 @@ function Player(props: IProps) {
             onMouseDown={handleResize}
             className="w-full h-2 cursor-ns-resize absolute top-0 left-0 z-20"
           />
-          {bottomBlock === OVERVIEW && <OverviewPanel />}
-          {bottomBlock === CONSOLE && <ConsolePanel />}
-          {bottomBlock === NETWORK && (
-            <WebNetworkPanel panelHeight={panelHeight} />
-          )}
-          {bottomBlock === STACKEVENTS && <WebStackEventPanel />}
-          {bottomBlock === STORAGE && <Storage />}
-          {bottomBlock === PROFILER && (
-            <ProfilerPanel panelHeight={panelHeight} />
-          )}
-          {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
-          {bottomBlock === GRAPHQL && <GraphQL panelHeight={panelHeight} />}
-          {bottomBlock === EXCEPTIONS && <Exceptions />}
-          {bottomBlock === BACKENDLOGS && <BackendLogsPanel />}
+          <BottomBlock block={bottomBlock} panelHeight={panelHeight} />
         </div>
       )}
       {!fullView ? (
@@ -189,4 +177,31 @@ function Player(props: IProps) {
   );
 }
 
+function BottomBlock({ panelHeight, block }: { panelHeight: number; block: number }) {
+  switch (block) {
+    case CONSOLE:
+      return <ConsolePanel />;
+    case NETWORK:
+      return <WebNetworkPanel panelHeight={panelHeight} />;
+    case STACKEVENTS:
+      return <WebStackEventPanel />;
+    case STORAGE:
+      return <Storage />;
+    case PROFILER:
+      return <ProfilerPanel panelHeight={panelHeight} />;
+    case PERFORMANCE:
+      return <ConnectedPerformance />;
+    case GRAPHQL:
+      return <GraphQL panelHeight={panelHeight} />;
+    case EXCEPTIONS:
+      return <Exceptions />;
+    case BACKENDLOGS:
+      return <BackendLogsPanel />;
+    case LONG_TASK:
+      return <LongTaskPanel />;
+    default:
+      return null;
+  }
+}
+
 export default observer(Player);
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx
index 1d53c626a..691ae6eb1 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx
@@ -29,11 +29,12 @@ import {
   STACKEVENTS,
   STORAGE,
   BACKENDLOGS,
-} from 'App/mstore/uiPlayerStore';
+  LONG_TASK
+} from "App/mstore/uiPlayerStore";
 import { Icon } from 'UI';
 import LogsButton from 'App/components/Session/Player/SharedComponents/BackendLogs/LogsButton';
 import { CodeOutlined, DashboardOutlined, ClusterOutlined } from '@ant-design/icons';
-import { ArrowDownUp, ListCollapse, Merge, Waypoints } from 'lucide-react'
+import { ArrowDownUp, ListCollapse, Merge, Waypoints, Timer } from 'lucide-react'
 
 import ControlButton from './ControlButton';
 import Timeline from './Timeline';
@@ -293,7 +294,11 @@ const DevtoolsButtons = observer(
       graphql: {
         icon: <Merge size={14} strokeWidth={2} />,
         label: 'Graphql',
-      }
+      },
+      longTask: {
+        icon: <Timer size={14} strokeWidth={2} />,
+        label: t('Long Tasks'),
+      },
     }
     // @ts-ignore
     const getLabel = (block: string) => labels[block][showIcons ? 'icon' : 'label']
@@ -359,6 +364,14 @@ const DevtoolsButtons = observer(
           label={getLabel('performance')}
         />
 
+        <ControlButton
+          customKey="longTask"
+          disabled={disableButtons}
+          onClick={() => toggleBottomTools(LONG_TASK)}
+          active={bottomBlock === LONG_TASK && !inspectorMode}
+          label={getLabel('longTask')}
+        />
+
         {showGraphql && (
           <ControlButton
             disabled={disableButtons}
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index 73684363b..138501c49 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import cn from 'classnames';
 import { Icon } from 'UI';
 import JumpButton from 'Shared/DevTools/JumpButton';
-import { Tag } from 'antd';
 import TabTag from '../TabTag';
 
 interface Props {
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..6a598efc7
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/LongTaskPanel.tsx
@@ -0,0 +1,193 @@
+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 { mockData } from './__mock';
+import { Segmented } from 'antd';
+import { LongAnimationTask } from './type';
+import Script from './Script'
+import TaskTimeline from "./TaskTimeline";
+
+interface Row extends LongAnimationTask {
+  time: number;
+}
+
+function LongTaskPanel() {
+  const { t } = useTranslation();
+  const [tab, setTab] = React.useState('all');
+  const _list = React.useRef<VListHandle>(null);
+  const { player, store } = React.useContext(PlayerContext);
+  const [searchValue, setSearchValue] = React.useState('');
+
+  const { currentTab, tabStates } = store.get();
+  const longTasks: LongAnimationTask[] = mockData; //tabStates[currentTab]?.longTasksList || [];
+
+  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<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchValue(value);
+  };
+
+  const onRowClick = (time: number) => {
+    player.jump(time);
+  };
+
+  const rows: Row[] = React.useMemo(() => {
+    const rowMap = filteredList.map((task) => ({
+      ...task,
+      time: task.time ?? task.startTime,
+    }))
+    if (tab === 'blocking') {
+      return rowMap.filter((task) => task.blockingDuration > 0);
+    }
+    return rowMap;
+  }, [filteredList.length, tab]);
+
+  const blockingTasks = rows.filter((task) => task.blockingDuration > 0);
+
+  return (
+    <BottomBlock style={{ height: '100%' }}>
+      <BottomBlock.Header>
+        <div className="flex items-center gap-2">
+          <span className="font-semibold color-gray-medium mr-4">
+            {t('Long Tasks')}
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Segmented
+            size={'small'}
+            value={tab}
+            onChange={setTab}
+            options={[
+              { label: t('All'), value: 'all' },
+              {
+                label: (
+                  <div>
+                    {t('Blocking')} ({blockingTasks.length})
+                  </div>
+                ),
+                value: 'blocking',
+              },
+            ]}
+          />
+          <Input.Search
+            className="rounded-lg"
+            placeholder={t('Filter by name or source URL')}
+            name="filter"
+            onChange={onFilterChange}
+            value={searchValue}
+            size="small"
+          />
+        </div>
+      </BottomBlock.Header>
+      <BottomBlock.Content>
+        <NoContent
+          title={
+            <div className="capitalize flex items-center gap-2">
+              <InfoCircleOutlined size={18} />
+              {t('No Data')}
+            </div>
+          }
+          size="small"
+          show={filteredList.length === 0}
+        >
+          <VList ref={_list} itemSize={25}>
+            {rows.map((task) => (
+              <LongTaskRow key={task.time} task={task} onJump={onRowClick} />
+            ))}
+          </VList>
+        </NoContent>
+      </BottomBlock.Content>
+    </BottomBlock>
+  );
+}
+
+function LongTaskRow({
+  task,
+  onJump,
+}: {
+  task: Row;
+  onJump: (time: number) => void;
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <div
+      className={
+        'relative group hover:bg-active-blue cursor-pointer flex items-start gap-2 py-1 px-4 pe-8'
+      }
+      onClick={() => setExpanded(!expanded)}
+    >
+      <Icon
+        name={expanded ? 'caret-down-fill' : 'caret-right-fill'}
+        className={'mt-1'}
+      />
+
+      <div className="flex flex-col">
+        <div className="flex flex-col">
+          <TaskTitle entry={task} />
+        </div>
+        {expanded ? (
+          <>
+            <TaskTimeline task={task} />
+            <div className={'flex items-center gap-1'}>
+              <div className={'text-gray-dark'}>First UI event timestamp:</div>
+              <div>{task.firstUIEventTimestamp.toFixed(2)} ms</div>
+            </div>
+            <div className={'text-gray-dark'}>Scripts:</div>
+            <div className="flex flex-col gap-1 pl-2">
+              {task.scripts.map((script, index) => (
+                <Script script={script} key={index} />
+              ))}
+            </div>
+          </>
+        ) : null}
+      </div>
+      <JumpButton time={task.time} onClick={() => onJump(task.time)} />
+    </div>
+  );
+}
+
+function TaskTitle({
+  entry,
+}: {
+  entry: {
+    name: string;
+    duration: number;
+    blockingDuration?: number;
+  };
+}) {
+  const isBlocking =
+    entry.blockingDuration !== undefined && entry.blockingDuration > 0;
+  return (
+    <div className={'flex items-center gap-1'}>
+      <span>Long Animation Frame</span>
+      <span className={'text-disabled-text'}>
+        ({entry.duration.toFixed(2)} ms)
+      </span>
+      {isBlocking ? (
+        <span className={'text-red'}>
+          {entry.blockingDuration!.toFixed(2)} ms blocking
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+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..dd006e23f
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/LongTaskPanel/Script.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { LongAnimationTask } from './type'
+
+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 ? (
+    <span>{script.invokerType}</span>
+  ) : (
+           <span>{script.name}</span>
+         )
+}
+
+function ScriptInfo({
+  script,
+}: {
+  script: LongAnimationTask['scripts'][number];
+}) {
+  const hasInvoker = script.invoker !== script.sourceURL;
+  return (
+    <div className={'border-l border-l-gray-light pl-1'}>
+      {hasInvoker ? (
+        <InfoEntry title={'invoker:'} value={script.invoker} />
+      ) : null}
+      <InfoEntry title={'address:'} value={getAddress(script)} />
+      <InfoEntry title={'script execution:'} value={`${script.duration} ms`} />
+      <InfoEntry title={'pause duration:'} value={`${script.pauseDuration} ms`} />
+    </div>
+  );
+}
+
+function InfoEntry({
+  title,
+  value,
+}: {
+  title: string;
+  value: string | number;
+}) {
+  return (
+    <div className={'flex items-center gap-1'}>
+      <div className={'text-disabled-text'}>{title}</div>
+      <div>{value}</div>
+    </div>
+  );
+}
+
+function Script({ script }: { script: LongAnimationTask['scripts'][number] }) {
+  return (
+    <div className="flex flex-col">
+      <ScriptTitle script={script} />
+      <ScriptInfo script={script} />
+    </div>
+  )
+}
+
+export default Script
\ No newline at end of file
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..cc5232c3f
--- /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";
+
+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;
+
+  const getSeverityClass = (duration) => {
+    if (duration > 200) return 'bg-[#e7000b]';
+    if (duration > 100) return 'bg-[#efb100]';
+    return 'bg-[#51a2ff]';
+  };
+
+  return (
+    <div className="w-full mb-2">
+      <div className="text-gray-dark mb-1">Timeline:</div>
+      <div className="flex h-4 w-full rounded-sm overflow-hidden">
+        {scriptDuration > 0 && (
+          <TimelineSegment
+            classes={`${getSeverityClass(scriptDuration)} h-full`}
+            name={`Script: ${scriptDuration.toFixed(2)}ms`}
+            width={scriptWidth}
+          />
+        )}
+        {idleDuration > 0 && (
+          <TimelineSegment
+            classes="bg-gray-light h-full"
+            width={idleWidth}
+            name={`Idle: ${idleDuration.toFixed(2)}ms`}
+          />
+        )}
+        {layoutDuration > 0 && (
+          <TimelineSegment
+            classes="bg-[#8200db] h-full"
+            width={layoutWidth}
+            name={`Layout & Style: ${layoutDuration.toFixed(2)}ms`}
+          />
+        )}
+      </div>
+      <div className="flex justify-between text-xs text-gray-500 mt-1">
+        <span>start: {task.startTime.toFixed(2)}ms</span>
+        <span>finish: {(task.startTime + task.duration).toFixed(2)}ms</span>
+      </div>
+    </div>
+  );
+}
+
+
+function TimelineSegment({
+  name,
+  classes,
+  width,
+}: {
+  name: string;
+  width: number;
+  classes: string;
+}) {
+  return (
+    <Tooltip title={name}>
+      <div
+        style={{ width: `${width}%` }}
+        className={cn(classes)}
+      />
+    </Tooltip>
+  );
+}
+
+export default TaskTimeline;
\ No newline at end of file
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/mstore/uiPlayerStore.ts b/frontend/app/mstore/uiPlayerStore.ts
index 172b85b38..5743d18c0 100644
--- a/frontend/app/mstore/uiPlayerStore.ts
+++ b/frontend/app/mstore/uiPlayerStore.ts
@@ -18,6 +18,7 @@ export const EXCEPTIONS = 9;
 export const INSPECTOR = 11;
 export const OVERVIEW = 12;
 export const BACKENDLOGS = 13;
+export const LONG_TASK = 14;
 
 export const blocks = {
   none: NONE,
@@ -33,6 +34,7 @@ export const blocks = {
   inspector: INSPECTOR,
   overview: OVERVIEW,
   backendLogs: BACKENDLOGS,
+  longTask: LONG_TASK,
 } as const;
 
 export const blockValues = [
@@ -49,6 +51,7 @@ export const blockValues = [
   INSPECTOR,
   OVERVIEW,
   BACKENDLOGS,
+  LONG_TASK
 ] as const;
 
 export default class UiPlayerStore {
diff --git a/frontend/app/player/web/Lists.ts b/frontend/app/player/web/Lists.ts
index 381473c8f..6d313d901 100644
--- a/frontend/app/player/web/Lists.ts
+++ b/frontend/app/player/web/Lists.ts
@@ -11,6 +11,7 @@ import {
   ConsoleLog as logMsg,
   WsChannel as websocketMsg,
   Profiler as profilerMsg,
+  LongAnimationTask as longTaskMsg,
 } from 'Player/web/messages';
 import ListWalker from '../common/ListWalker';
 import ListWalkerWithMarks from '../common/ListWalkerWithMarks';
@@ -43,6 +44,7 @@ type MsgTypeMap = {
   profilerList: profilerMsg;
   exceptionsList: exceptionsMsg;
   frustrationsList: Issue | InjectedEvent;
+  longTaskList: longTaskMsg;
 };
 type ListMessageType<K> = K extends keyof MsgTypeMap
   ? Array<MsgTypeMap[K]>
@@ -66,6 +68,7 @@ const MARKED_LIST_NAMES = [
   'fetch',
   'stack',
   'websocket',
+  'longTask',
 ] as const;
 
 const LIST_NAMES = [...SIMPLE_LIST_NAMES, ...MARKED_LIST_NAMES] as const;
diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts
index 9ea042b20..5545ddb81 100644
--- a/frontend/app/player/web/TabManager.ts
+++ b/frontend/app/player/web/TabManager.ts
@@ -349,6 +349,9 @@ export default class TabSessionManager {
       case MType.Profiler:
         this.lists.lists.profiles.append(msg);
         break;
+      case MType.LongAnimationTask:
+        this.lists.lists.longTask.append(msg);
+        break;
       /* ===|=== */
       default:
         switch (msg.tp) {
diff --git a/frontend/app/player/web/messages/RawMessageReader.gen.ts b/frontend/app/player/web/messages/RawMessageReader.gen.ts
index 09ec883f8..1b9105f88 100644
--- a/frontend/app/player/web/messages/RawMessageReader.gen.ts
+++ b/frontend/app/player/web/messages/RawMessageReader.gen.ts
@@ -1,22 +1,22 @@
 // Auto-generated, do not edit
+/* eslint-disable */
+
+import PrimitiveReader from './PrimitiveReader'
+import { MType } from './raw.gen'
+import type { RawMessage } from './raw.gen'
 
-import PrimitiveReader from './PrimitiveReader';
-import { MType } from './raw.gen';
-import type { RawMessage } from './raw.gen';
 
 export default class RawMessageReader extends PrimitiveReader {
   readMessage(): RawMessage | null {
-    const p = this.p;
+    const p = this.p
     const resetPointer = () => {
-      this.p = p;
-      return null;
-    };
-
-    const tp = this.readUint();
-    if (tp === null) {
-      return resetPointer();
+      this.p = p
+      return null
     }
 
+    const tp = this.readUint()
+    if (tp === null) { return resetPointer() }
+
     switch (tp) {
 
     case 0: {
@@ -733,6 +733,24 @@ export default class RawMessageReader extends PrimitiveReader {
       };
     }
 
+    case 89: {
+      const name = this.readString(); if (name === null) { return resetPointer() }
+      const duration = this.readInt(); if (duration === null) { return resetPointer() }
+      const blockingDuration = this.readInt(); if (blockingDuration === null) { return resetPointer() }
+      const firstUIEventTimestamp = this.readInt(); if (firstUIEventTimestamp === null) { return resetPointer() }
+      const startTime = this.readInt(); if (startTime === null) { return resetPointer() }
+      const scripts = this.readString(); if (scripts === null) { return resetPointer() }
+      return {
+        tp: MType.LongAnimationTask,
+        name,
+        duration,
+        blockingDuration,
+        firstUIEventTimestamp,
+        startTime,
+        scripts,
+      };
+    }
+
     case 113: {
       const selectionStart = this.readUint(); if (selectionStart === null) { return resetPointer() }
       const selectionEnd = this.readUint(); if (selectionEnd === null) { return resetPointer() }
diff --git a/frontend/app/player/web/messages/filters.gen.ts b/frontend/app/player/web/messages/filters.gen.ts
index 57708b1b4..435980358 100644
--- a/frontend/app/player/web/messages/filters.gen.ts
+++ b/frontend/app/player/web/messages/filters.gen.ts
@@ -1,6 +1,7 @@
 // Auto-generated, do not edit
+/* eslint-disable */
 
-import { MType } from './raw.gen';
+import { MType } from './raw.gen'
 
 const IOS_TYPES = [
   90, 91, 92, 93, 94, 95, 96, 97, 98, 100, 101, 102, 103, 104, 105, 106, 107,
@@ -11,6 +12,8 @@ const DOM_TYPES = [
   51, 43, 52, 54, 55, 57, 58, 59,60, 61, 67,68, 69, 70, 71, 72, 73, 74, 75, 76, 77,
   113, 114, 117, 118, 119, 122,
 ];
+const IOS_TYPES = [90,91,92,93,94,95,96,97,98,100,101,102,103,104,105,106,107,110,111]
+const DOM_TYPES = [0,4,5,6,7,8,9,10,11,12,13,14,15,16,18,19,20,34,35,49,50,51,43,52,54,55,57,58,60,61,68,69,70,71,72,73,74,75,76,77,113,114,117,118,119,122]
 export function isDOMType(t: MType) {
-  return DOM_TYPES.includes(t);
+	return DOM_TYPES.includes(t)
 }
diff --git a/frontend/app/player/web/messages/message.gen.ts b/frontend/app/player/web/messages/message.gen.ts
index bef4fec85..7864d89bf 100644
--- a/frontend/app/player/web/messages/message.gen.ts
+++ b/frontend/app/player/web/messages/message.gen.ts
@@ -1,8 +1,9 @@
 // Auto-generated, do not edit
+/* eslint-disable */
 
-import type { Timed } from './timed';
+import type { Timed } from './timed'
+import type { RawMessage } from './raw.gen'
 import type {
-  RawMessage,
   RawTimestamp,
   RawSetPageLocationDeprecated,
   RawSetViewportSize,
@@ -61,6 +62,7 @@ import type {
   RawZustand,
   RawNetworkRequest,
   RawWsChannel,
+  RawLongAnimationTask,
   RawSelectionChange,
   RawMouseThrashing,
   RawResourceTiming,
@@ -81,53 +83,52 @@ import type {
   RawMobileNetworkCall,
   RawMobileSwipeEvent,
   RawMobileIssueEvent,
-} from './raw.gen';
+} from './raw.gen'
 
-export type Message = RawMessage & Timed;
+export type Message = RawMessage & Timed
 
-export type Timestamp = RawTimestamp & Timed;
 
-export type SetPageLocationDeprecated = RawSetPageLocationDeprecated & Timed;
+export type Timestamp = RawTimestamp & Timed
 
-export type SetViewportSize = RawSetViewportSize & Timed;
+export type SetPageLocationDeprecated = RawSetPageLocationDeprecated & Timed
 
-export type SetViewportScroll = RawSetViewportScroll & Timed;
+export type SetViewportSize = RawSetViewportSize & Timed
 
-export type CreateDocument = RawCreateDocument & Timed;
+export type SetViewportScroll = RawSetViewportScroll & Timed
 
-export type CreateElementNode = RawCreateElementNode & Timed;
+export type CreateDocument = RawCreateDocument & Timed
 
-export type CreateTextNode = RawCreateTextNode & Timed;
+export type CreateElementNode = RawCreateElementNode & Timed
 
-export type MoveNode = RawMoveNode & Timed;
+export type CreateTextNode = RawCreateTextNode & Timed
 
-export type RemoveNode = RawRemoveNode & Timed;
+export type MoveNode = RawMoveNode & Timed
 
-export type SetNodeAttribute = RawSetNodeAttribute & Timed;
+export type RemoveNode = RawRemoveNode & Timed
 
-export type RemoveNodeAttribute = RawRemoveNodeAttribute & Timed;
+export type SetNodeAttribute = RawSetNodeAttribute & Timed
 
-export type SetNodeData = RawSetNodeData & Timed;
+export type RemoveNodeAttribute = RawRemoveNodeAttribute & Timed
 
-export type SetCssData = RawSetCssData & Timed;
+export type SetNodeData = RawSetNodeData & Timed
 
-export type SetNodeScroll = RawSetNodeScroll & Timed;
+export type SetCssData = RawSetCssData & Timed
 
-export type SetInputValue = RawSetInputValue & Timed;
+export type SetNodeScroll = RawSetNodeScroll & Timed
 
-export type SetInputChecked = RawSetInputChecked & Timed;
+export type SetInputValue = RawSetInputValue & Timed
 
-export type MouseMove = RawMouseMove & Timed;
+export type SetInputChecked = RawSetInputChecked & Timed
 
-export type NetworkRequestDeprecated = RawNetworkRequestDeprecated & Timed;
+export type MouseMove = RawMouseMove & Timed
 
-export type ConsoleLog = RawConsoleLog & Timed;
+export type NetworkRequestDeprecated = RawNetworkRequestDeprecated & Timed
 
-export type StringDictGlobal = RawStringDictGlobal & Timed;
+export type ConsoleLog = RawConsoleLog & Timed
 
-export type SetNodeAttributeDictGlobal = RawSetNodeAttributeDictGlobal & Timed;
+export type StringDictGlobal = RawStringDictGlobal & Timed
 
-export type CssInsertRule = RawCssInsertRule & Timed;
+export type SetNodeAttributeDictGlobal = RawSetNodeAttributeDictGlobal & Timed
 
 export type CssInsertRule = RawCssInsertRule & Timed
 
@@ -137,108 +138,111 @@ export type Fetch = RawFetch & Timed
 
 export type Profiler = RawProfiler & Timed
 
-export type ReduxDeprecated = RawReduxDeprecated & Timed;
+export type OTable = RawOTable & Timed
 
-export type Vuex = RawVuex & Timed;
+export type ReduxDeprecated = RawReduxDeprecated & Timed
 
-export type MobX = RawMobX & Timed;
+export type Vuex = RawVuex & Timed
 
-export type NgRx = RawNgRx & Timed;
+export type MobX = RawMobX & Timed
 
-export type GraphQlDeprecated = RawGraphQlDeprecated & Timed;
+export type NgRx = RawNgRx & Timed
 
-export type PerformanceTrack = RawPerformanceTrack & Timed;
+export type GraphQlDeprecated = RawGraphQlDeprecated & Timed
 
-export type StringDictDeprecated = RawStringDictDeprecated & Timed;
+export type PerformanceTrack = RawPerformanceTrack & Timed
 
-export type SetNodeAttributeDictDeprecated = RawSetNodeAttributeDictDeprecated &
-  Timed;
+export type StringDictDeprecated = RawStringDictDeprecated & Timed
 
-export type StringDict = RawStringDict & Timed;
+export type SetNodeAttributeDictDeprecated = RawSetNodeAttributeDictDeprecated & Timed
 
-export type SetNodeAttributeDict = RawSetNodeAttributeDict & Timed;
+export type StringDict = RawStringDict & Timed
 
-export type ResourceTimingDeprecated = RawResourceTimingDeprecated & Timed;
+export type SetNodeAttributeDict = RawSetNodeAttributeDict & Timed
 
-export type ConnectionInformation = RawConnectionInformation & Timed;
+export type ResourceTimingDeprecated = RawResourceTimingDeprecated & Timed
 
-export type SetPageVisibility = RawSetPageVisibility & Timed;
+export type ConnectionInformation = RawConnectionInformation & Timed
 
-export type LoadFontFace = RawLoadFontFace & Timed;
+export type SetPageVisibility = RawSetPageVisibility & Timed
 
-export type SetNodeFocus = RawSetNodeFocus & Timed;
+export type LoadFontFace = RawLoadFontFace & Timed
 
-export type LongTask = RawLongTask & Timed;
+export type SetNodeFocus = RawSetNodeFocus & Timed
 
 export type LongTask = RawLongTask & Timed
 
 export type SetNodeAttributeURLBased = RawSetNodeAttributeURLBased & Timed
 
-export type CssInsertRuleURLBased = RawCssInsertRuleURLBased & Timed;
+export type SetCssDataURLBased = RawSetCssDataURLBased & Timed
 
 export type CssInsertRuleURLBased = RawCssInsertRuleURLBased & Timed
 
 export type MouseClick = RawMouseClick & Timed
 
-export type CreateIFrameDocument = RawCreateIFrameDocument & Timed;
+export type MouseClickDeprecated = RawMouseClickDeprecated & Timed
 
-export type AdoptedSsReplaceURLBased = RawAdoptedSsReplaceURLBased & Timed;
+export type CreateIFrameDocument = RawCreateIFrameDocument & Timed
 
-export type AdoptedSsReplace = RawAdoptedSsReplace & Timed;
+export type AdoptedSsReplaceURLBased = RawAdoptedSsReplaceURLBased & Timed
 
-export type AdoptedSsInsertRuleURLBased = RawAdoptedSsInsertRuleURLBased &
-  Timed;
+export type AdoptedSsReplace = RawAdoptedSsReplace & Timed
 
-export type AdoptedSsInsertRule = RawAdoptedSsInsertRule & Timed;
+export type AdoptedSsInsertRuleURLBased = RawAdoptedSsInsertRuleURLBased & Timed
 
-export type AdoptedSsDeleteRule = RawAdoptedSsDeleteRule & Timed;
+export type AdoptedSsInsertRule = RawAdoptedSsInsertRule & Timed
 
-export type AdoptedSsAddOwner = RawAdoptedSsAddOwner & Timed;
+export type AdoptedSsDeleteRule = RawAdoptedSsDeleteRule & Timed
 
-export type AdoptedSsRemoveOwner = RawAdoptedSsRemoveOwner & Timed;
+export type AdoptedSsAddOwner = RawAdoptedSsAddOwner & Timed
 
-export type Zustand = RawZustand & Timed;
+export type AdoptedSsRemoveOwner = RawAdoptedSsRemoveOwner & Timed
 
-export type NetworkRequest = RawNetworkRequest & Timed;
+export type Zustand = RawZustand & Timed
 
-export type WsChannel = RawWsChannel & Timed;
+export type NetworkRequest = RawNetworkRequest & Timed
 
-export type SelectionChange = RawSelectionChange & Timed;
+export type WsChannel = RawWsChannel & Timed
 
-export type MouseThrashing = RawMouseThrashing & Timed;
+export type LongAnimationTask = RawLongAnimationTask & Timed
 
-export type ResourceTiming = RawResourceTiming & Timed;
+export type SelectionChange = RawSelectionChange & Timed
 
-export type TabChange = RawTabChange & Timed;
+export type MouseThrashing = RawMouseThrashing & Timed
 
-export type TabData = RawTabData & Timed;
+export type ResourceTiming = RawResourceTiming & Timed
 
-export type CanvasNode = RawCanvasNode & Timed;
+export type TabChange = RawTabChange & Timed
 
-export type TagTrigger = RawTagTrigger & Timed;
+export type TabData = RawTabData & Timed
 
-export type Redux = RawRedux & Timed;
+export type CanvasNode = RawCanvasNode & Timed
 
-export type SetPageLocation = RawSetPageLocation & Timed;
+export type TagTrigger = RawTagTrigger & Timed
 
-export type GraphQl = RawGraphQl & Timed;
+export type Redux = RawRedux & Timed
 
-export type MobileEvent = RawMobileEvent & Timed;
+export type SetPageLocation = RawSetPageLocation & Timed
 
-export type MobileScreenChanges = RawMobileScreenChanges & Timed;
+export type GraphQl = RawGraphQl & Timed
 
-export type MobileClickEvent = RawMobileClickEvent & Timed;
+export type MobileEvent = RawMobileEvent & Timed
 
-export type MobileInputEvent = RawMobileInputEvent & Timed;
+export type MobileScreenChanges = RawMobileScreenChanges & Timed
 
-export type MobilePerformanceEvent = RawMobilePerformanceEvent & Timed;
+export type MobileClickEvent = RawMobileClickEvent & Timed
 
-export type MobileLog = RawMobileLog & Timed;
+export type MobileInputEvent = RawMobileInputEvent & Timed
 
-export type MobileInternalError = RawMobileInternalError & Timed;
+export type MobilePerformanceEvent = RawMobilePerformanceEvent & Timed
 
-export type MobileNetworkCall = RawMobileNetworkCall & Timed;
+export type MobileLog = RawMobileLog & Timed
 
-export type MobileSwipeEvent = RawMobileSwipeEvent & Timed;
+export type MobileInternalError = RawMobileInternalError & Timed
+
+export type MobileNetworkCall = RawMobileNetworkCall & Timed
+
+export type MobileSwipeEvent = RawMobileSwipeEvent & Timed
+
+export type MobileIssueEvent = RawMobileIssueEvent & Timed
 
-export type MobileIssueEvent = RawMobileIssueEvent & Timed;
diff --git a/frontend/app/player/web/messages/raw.gen.ts b/frontend/app/player/web/messages/raw.gen.ts
index 9331f160e..bb8be727c 100644
--- a/frontend/app/player/web/messages/raw.gen.ts
+++ b/frontend/app/player/web/messages/raw.gen.ts
@@ -1,4 +1,5 @@
 // Auto-generated, do not edit
+/* eslint-disable */
 
 export const enum MType {
   Timestamp = 0,
@@ -59,6 +60,7 @@ export const enum MType {
   Zustand = 79,
   NetworkRequest = 83,
   WsChannel = 84,
+  LongAnimationTask = 89,
   SelectionChange = 113,
   MouseThrashing = 114,
   ResourceTiming = 116,
@@ -81,135 +83,137 @@ export const enum MType {
   MobileIssueEvent = 111,
 }
 
+
 export interface RawTimestamp {
-  tp: MType.Timestamp;
-  timestamp: number;
+  tp: MType.Timestamp,
+  timestamp: number,
 }
 
 export interface RawSetPageLocationDeprecated {
-  tp: MType.SetPageLocationDeprecated;
-  url: string;
-  referrer: string;
-  navigationStart: number;
+  tp: MType.SetPageLocationDeprecated,
+  url: string,
+  referrer: string,
+  navigationStart: number,
 }
 
 export interface RawSetViewportSize {
-  tp: MType.SetViewportSize;
-  width: number;
-  height: number;
+  tp: MType.SetViewportSize,
+  width: number,
+  height: number,
 }
 
 export interface RawSetViewportScroll {
-  tp: MType.SetViewportScroll;
-  x: number;
-  y: number;
+  tp: MType.SetViewportScroll,
+  x: number,
+  y: number,
 }
 
 export interface RawCreateDocument {
-  tp: MType.CreateDocument;
+  tp: MType.CreateDocument,
+
 }
 
 export interface RawCreateElementNode {
-  tp: MType.CreateElementNode;
-  id: number;
-  parentID: number;
-  index: number;
-  tag: string;
-  svg: boolean;
+  tp: MType.CreateElementNode,
+  id: number,
+  parentID: number,
+  index: number,
+  tag: string,
+  svg: boolean,
 }
 
 export interface RawCreateTextNode {
-  tp: MType.CreateTextNode;
-  id: number;
-  parentID: number;
-  index: number;
+  tp: MType.CreateTextNode,
+  id: number,
+  parentID: number,
+  index: number,
 }
 
 export interface RawMoveNode {
-  tp: MType.MoveNode;
-  id: number;
-  parentID: number;
-  index: number;
+  tp: MType.MoveNode,
+  id: number,
+  parentID: number,
+  index: number,
 }
 
 export interface RawRemoveNode {
-  tp: MType.RemoveNode;
-  id: number;
+  tp: MType.RemoveNode,
+  id: number,
 }
 
 export interface RawSetNodeAttribute {
-  tp: MType.SetNodeAttribute;
-  id: number;
-  name: string;
-  value: string;
+  tp: MType.SetNodeAttribute,
+  id: number,
+  name: string,
+  value: string,
 }
 
 export interface RawRemoveNodeAttribute {
-  tp: MType.RemoveNodeAttribute;
-  id: number;
-  name: string;
+  tp: MType.RemoveNodeAttribute,
+  id: number,
+  name: string,
 }
 
 export interface RawSetNodeData {
-  tp: MType.SetNodeData;
-  id: number;
-  data: string;
+  tp: MType.SetNodeData,
+  id: number,
+  data: string,
 }
 
 export interface RawSetCssData {
-  tp: MType.SetCssData;
-  id: number;
-  data: string;
+  tp: MType.SetCssData,
+  id: number,
+  data: string,
 }
 
 export interface RawSetNodeScroll {
-  tp: MType.SetNodeScroll;
-  id: number;
-  x: number;
-  y: number;
+  tp: MType.SetNodeScroll,
+  id: number,
+  x: number,
+  y: number,
 }
 
 export interface RawSetInputValue {
-  tp: MType.SetInputValue;
-  id: number;
-  value: string;
-  mask: number;
+  tp: MType.SetInputValue,
+  id: number,
+  value: string,
+  mask: number,
 }
 
 export interface RawSetInputChecked {
-  tp: MType.SetInputChecked;
-  id: number;
-  checked: boolean;
+  tp: MType.SetInputChecked,
+  id: number,
+  checked: boolean,
 }
 
 export interface RawMouseMove {
-  tp: MType.MouseMove;
-  x: number;
-  y: number;
+  tp: MType.MouseMove,
+  x: number,
+  y: number,
 }
 
 export interface RawNetworkRequestDeprecated {
-  tp: MType.NetworkRequestDeprecated;
-  type: string;
-  method: string;
-  url: string;
-  request: string;
-  response: string;
-  status: number;
-  timestamp: number;
-  duration: number;
+  tp: MType.NetworkRequestDeprecated,
+  type: string,
+  method: string,
+  url: string,
+  request: string,
+  response: string,
+  status: number,
+  timestamp: number,
+  duration: number,
 }
 
 export interface RawConsoleLog {
-  tp: MType.ConsoleLog;
-  level: string;
-  value: string;
+  tp: MType.ConsoleLog,
+  level: string,
+  value: string,
 }
 
 export interface RawStringDictGlobal {
-  tp: MType.StringDictGlobal;
-  key: number;
-  value: string;
+  tp: MType.StringDictGlobal,
+  key: number,
+  value: string,
 }
 
 export interface RawSetNodeAttributeDictGlobal {
@@ -244,117 +248,117 @@ export interface RawFetch {
 }
 
 export interface RawProfiler {
-  tp: MType.Profiler;
-  name: string;
-  duration: number;
-  args: string;
-  result: string;
+  tp: MType.Profiler,
+  name: string,
+  duration: number,
+  args: string,
+  result: string,
 }
 
 export interface RawOTable {
-  tp: MType.OTable;
-  key: string;
-  value: string;
+  tp: MType.OTable,
+  key: string,
+  value: string,
 }
 
 export interface RawReduxDeprecated {
-  tp: MType.ReduxDeprecated;
-  action: string;
-  state: string;
-  duration: number;
+  tp: MType.ReduxDeprecated,
+  action: string,
+  state: string,
+  duration: number,
 }
 
 export interface RawVuex {
-  tp: MType.Vuex;
-  mutation: string;
-  state: string;
+  tp: MType.Vuex,
+  mutation: string,
+  state: string,
 }
 
 export interface RawMobX {
-  tp: MType.MobX;
-  type: string;
-  payload: string;
+  tp: MType.MobX,
+  type: string,
+  payload: string,
 }
 
 export interface RawNgRx {
-  tp: MType.NgRx;
-  action: string;
-  state: string;
-  duration: number;
+  tp: MType.NgRx,
+  action: string,
+  state: string,
+  duration: number,
 }
 
 export interface RawGraphQlDeprecated {
-  tp: MType.GraphQlDeprecated;
-  operationKind: string;
-  operationName: string;
-  variables: string;
-  response: string;
-  duration: number;
+  tp: MType.GraphQlDeprecated,
+  operationKind: string,
+  operationName: string,
+  variables: string,
+  response: string,
+  duration: number,
 }
 
 export interface RawPerformanceTrack {
-  tp: MType.PerformanceTrack;
-  frames: number;
-  ticks: number;
-  totalJSHeapSize: number;
-  usedJSHeapSize: number;
+  tp: MType.PerformanceTrack,
+  frames: number,
+  ticks: number,
+  totalJSHeapSize: number,
+  usedJSHeapSize: number,
 }
 
 export interface RawStringDictDeprecated {
-  tp: MType.StringDictDeprecated;
-  key: number;
-  value: string;
+  tp: MType.StringDictDeprecated,
+  key: number,
+  value: string,
 }
 
 export interface RawSetNodeAttributeDictDeprecated {
-  tp: MType.SetNodeAttributeDictDeprecated;
-  id: number;
-  nameKey: number;
-  valueKey: number;
+  tp: MType.SetNodeAttributeDictDeprecated,
+  id: number,
+  nameKey: number,
+  valueKey: number,
 }
 
 export interface RawStringDict {
-  tp: MType.StringDict;
-  key: string;
-  value: string;
+  tp: MType.StringDict,
+  key: string,
+  value: string,
 }
 
 export interface RawSetNodeAttributeDict {
-  tp: MType.SetNodeAttributeDict;
-  id: number;
-  name: string;
-  value: string;
+  tp: MType.SetNodeAttributeDict,
+  id: number,
+  name: string,
+  value: string,
 }
 
 export interface RawResourceTimingDeprecated {
-  tp: MType.ResourceTimingDeprecated;
-  timestamp: number;
-  duration: number;
-  ttfb: number;
-  headerSize: number;
-  encodedBodySize: number;
-  decodedBodySize: number;
-  url: string;
-  initiator: string;
+  tp: MType.ResourceTimingDeprecated,
+  timestamp: number,
+  duration: number,
+  ttfb: number,
+  headerSize: number,
+  encodedBodySize: number,
+  decodedBodySize: number,
+  url: string,
+  initiator: string,
 }
 
 export interface RawConnectionInformation {
-  tp: MType.ConnectionInformation;
-  downlink: number;
-  type: string;
+  tp: MType.ConnectionInformation,
+  downlink: number,
+  type: string,
 }
 
 export interface RawSetPageVisibility {
-  tp: MType.SetPageVisibility;
-  hidden: boolean;
+  tp: MType.SetPageVisibility,
+  hidden: boolean,
 }
 
 export interface RawLoadFontFace {
-  tp: MType.LoadFontFace;
-  parentID: number;
-  family: string;
-  source: string;
-  descriptors: string;
+  tp: MType.LoadFontFace,
+  parentID: number,
+  family: string,
+  source: string,
+  descriptors: string,
 }
 
 export interface RawSetNodeFocus {
@@ -374,11 +378,11 @@ export interface RawLongTask {
 }
 
 export interface RawSetNodeAttributeURLBased {
-  tp: MType.SetNodeAttributeURLBased;
-  id: number;
-  name: string;
-  value: string;
-  baseURL: string;
+  tp: MType.SetNodeAttributeURLBased,
+  id: number,
+  name: string,
+  value: string,
+  baseURL: string,
 }
 
 export interface RawSetCssDataURLBased {
@@ -397,266 +401,277 @@ export interface RawCssInsertRuleURLBased {
 }
 
 export interface RawMouseClick {
-  tp: MType.MouseClick;
-  id: number;
-  hesitationTime: number;
-  label: string;
-  selector: string;
-  normalizedX: number;
-  normalizedY: number;
+  tp: MType.MouseClick,
+  id: number,
+  hesitationTime: number,
+  label: string,
+  selector: string,
+  normalizedX: number,
+  normalizedY: number,
 }
 
 export interface RawMouseClickDeprecated {
-  tp: MType.MouseClickDeprecated;
-  id: number;
-  hesitationTime: number;
-  label: string;
-  selector: string;
+  tp: MType.MouseClickDeprecated,
+  id: number,
+  hesitationTime: number,
+  label: string,
+  selector: string,
 }
 
 export interface RawCreateIFrameDocument {
-  tp: MType.CreateIFrameDocument;
-  frameID: number;
-  id: number;
+  tp: MType.CreateIFrameDocument,
+  frameID: number,
+  id: number,
 }
 
 export interface RawAdoptedSsReplaceURLBased {
-  tp: MType.AdoptedSsReplaceURLBased;
-  sheetID: number;
-  text: string;
-  baseURL: string;
+  tp: MType.AdoptedSsReplaceURLBased,
+  sheetID: number,
+  text: string,
+  baseURL: string,
 }
 
 export interface RawAdoptedSsReplace {
-  tp: MType.AdoptedSsReplace;
-  sheetID: number;
-  text: string;
+  tp: MType.AdoptedSsReplace,
+  sheetID: number,
+  text: string,
 }
 
 export interface RawAdoptedSsInsertRuleURLBased {
-  tp: MType.AdoptedSsInsertRuleURLBased;
-  sheetID: number;
-  rule: string;
-  index: number;
-  baseURL: string;
+  tp: MType.AdoptedSsInsertRuleURLBased,
+  sheetID: number,
+  rule: string,
+  index: number,
+  baseURL: string,
 }
 
 export interface RawAdoptedSsInsertRule {
-  tp: MType.AdoptedSsInsertRule;
-  sheetID: number;
-  rule: string;
-  index: number;
+  tp: MType.AdoptedSsInsertRule,
+  sheetID: number,
+  rule: string,
+  index: number,
 }
 
 export interface RawAdoptedSsDeleteRule {
-  tp: MType.AdoptedSsDeleteRule;
-  sheetID: number;
-  index: number;
+  tp: MType.AdoptedSsDeleteRule,
+  sheetID: number,
+  index: number,
 }
 
 export interface RawAdoptedSsAddOwner {
-  tp: MType.AdoptedSsAddOwner;
-  sheetID: number;
-  id: number;
+  tp: MType.AdoptedSsAddOwner,
+  sheetID: number,
+  id: number,
 }
 
 export interface RawAdoptedSsRemoveOwner {
-  tp: MType.AdoptedSsRemoveOwner;
-  sheetID: number;
-  id: number;
+  tp: MType.AdoptedSsRemoveOwner,
+  sheetID: number,
+  id: number,
 }
 
 export interface RawZustand {
-  tp: MType.Zustand;
-  mutation: string;
-  state: string;
+  tp: MType.Zustand,
+  mutation: string,
+  state: string,
 }
 
 export interface RawNetworkRequest {
-  tp: MType.NetworkRequest;
-  type: string;
-  method: string;
-  url: string;
-  request: string;
-  response: string;
-  status: number;
-  timestamp: number;
-  duration: number;
-  transferredBodySize: number;
+  tp: MType.NetworkRequest,
+  type: string,
+  method: string,
+  url: string,
+  request: string,
+  response: string,
+  status: number,
+  timestamp: number,
+  duration: number,
+  transferredBodySize: number,
 }
 
 export interface RawWsChannel {
-  tp: MType.WsChannel;
-  chType: string;
-  channelName: string;
-  data: string;
-  timestamp: number;
-  dir: string;
-  messageType: string;
+  tp: MType.WsChannel,
+  chType: string,
+  channelName: string,
+  data: string,
+  timestamp: number,
+  dir: string,
+  messageType: string,
+}
+
+export interface RawLongAnimationTask {
+  tp: MType.LongAnimationTask,
+  name: string,
+  duration: number,
+  blockingDuration: number,
+  firstUIEventTimestamp: number,
+  startTime: number,
+  scripts: string,
 }
 
 export interface RawSelectionChange {
-  tp: MType.SelectionChange;
-  selectionStart: number;
-  selectionEnd: number;
-  selection: string;
+  tp: MType.SelectionChange,
+  selectionStart: number,
+  selectionEnd: number,
+  selection: string,
 }
 
 export interface RawMouseThrashing {
-  tp: MType.MouseThrashing;
-  timestamp: number;
+  tp: MType.MouseThrashing,
+  timestamp: number,
 }
 
 export interface RawResourceTiming {
-  tp: MType.ResourceTiming;
-  timestamp: number;
-  duration: number;
-  ttfb: number;
-  headerSize: number;
-  encodedBodySize: number;
-  decodedBodySize: number;
-  url: string;
-  initiator: string;
-  transferredSize: number;
-  cached: boolean;
+  tp: MType.ResourceTiming,
+  timestamp: number,
+  duration: number,
+  ttfb: number,
+  headerSize: number,
+  encodedBodySize: number,
+  decodedBodySize: number,
+  url: string,
+  initiator: string,
+  transferredSize: number,
+  cached: boolean,
 }
 
 export interface RawTabChange {
-  tp: MType.TabChange;
-  tabId: string;
+  tp: MType.TabChange,
+  tabId: string,
 }
 
 export interface RawTabData {
-  tp: MType.TabData;
-  tabId: string;
+  tp: MType.TabData,
+  tabId: string,
 }
 
 export interface RawCanvasNode {
-  tp: MType.CanvasNode;
-  nodeId: string;
-  timestamp: number;
+  tp: MType.CanvasNode,
+  nodeId: string,
+  timestamp: number,
 }
 
 export interface RawTagTrigger {
-  tp: MType.TagTrigger;
-  tagId: number;
+  tp: MType.TagTrigger,
+  tagId: number,
 }
 
 export interface RawRedux {
-  tp: MType.Redux;
-  action: string;
-  state: string;
-  duration: number;
-  actionTime: number;
+  tp: MType.Redux,
+  action: string,
+  state: string,
+  duration: number,
+  actionTime: number,
 }
 
 export interface RawSetPageLocation {
-  tp: MType.SetPageLocation;
-  url: string;
-  referrer: string;
-  navigationStart: number;
-  documentTitle: string;
+  tp: MType.SetPageLocation,
+  url: string,
+  referrer: string,
+  navigationStart: number,
+  documentTitle: string,
 }
 
 export interface RawGraphQl {
-  tp: MType.GraphQl;
-  operationKind: string;
-  operationName: string;
-  variables: string;
-  response: string;
-  duration: number;
+  tp: MType.GraphQl,
+  operationKind: string,
+  operationName: string,
+  variables: string,
+  response: string,
+  duration: number,
 }
 
 export interface RawMobileEvent {
-  tp: MType.MobileEvent;
-  timestamp: number;
-  length: number;
-  name: string;
-  payload: string;
+  tp: MType.MobileEvent,
+  timestamp: number,
+  length: number,
+  name: string,
+  payload: string,
 }
 
 export interface RawMobileScreenChanges {
-  tp: MType.MobileScreenChanges;
-  timestamp: number;
-  length: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
+  tp: MType.MobileScreenChanges,
+  timestamp: number,
+  length: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
 }
 
 export interface RawMobileClickEvent {
-  tp: MType.MobileClickEvent;
-  timestamp: number;
-  length: number;
-  label: string;
-  x: number;
-  y: number;
+  tp: MType.MobileClickEvent,
+  timestamp: number,
+  length: number,
+  label: string,
+  x: number,
+  y: number,
 }
 
 export interface RawMobileInputEvent {
-  tp: MType.MobileInputEvent;
-  timestamp: number;
-  length: number;
-  value: string;
-  valueMasked: boolean;
-  label: string;
+  tp: MType.MobileInputEvent,
+  timestamp: number,
+  length: number,
+  value: string,
+  valueMasked: boolean,
+  label: string,
 }
 
 export interface RawMobilePerformanceEvent {
-  tp: MType.MobilePerformanceEvent;
-  timestamp: number;
-  length: number;
-  name: string;
-  value: number;
+  tp: MType.MobilePerformanceEvent,
+  timestamp: number,
+  length: number,
+  name: string,
+  value: number,
 }
 
 export interface RawMobileLog {
-  tp: MType.MobileLog;
-  timestamp: number;
-  length: number;
-  severity: string;
-  content: string;
+  tp: MType.MobileLog,
+  timestamp: number,
+  length: number,
+  severity: string,
+  content: string,
 }
 
 export interface RawMobileInternalError {
-  tp: MType.MobileInternalError;
-  timestamp: number;
-  length: number;
-  content: string;
+  tp: MType.MobileInternalError,
+  timestamp: number,
+  length: number,
+  content: string,
 }
 
 export interface RawMobileNetworkCall {
-  tp: MType.MobileNetworkCall;
-  timestamp: number;
-  length: number;
-  type: string;
-  method: string;
-  url: string;
-  request: string;
-  response: string;
-  status: number;
-  duration: number;
+  tp: MType.MobileNetworkCall,
+  timestamp: number,
+  length: number,
+  type: string,
+  method: string,
+  url: string,
+  request: string,
+  response: string,
+  status: number,
+  duration: number,
 }
 
 export interface RawMobileSwipeEvent {
-  tp: MType.MobileSwipeEvent;
-  timestamp: number;
-  length: number;
-  label: string;
-  x: number;
-  y: number;
-  direction: string;
+  tp: MType.MobileSwipeEvent,
+  timestamp: number,
+  length: number,
+  label: string,
+  x: number,
+  y: number,
+  direction: string,
 }
 
 export interface RawMobileIssueEvent {
-  tp: MType.MobileIssueEvent;
-  timestamp: number;
-  type: string;
-  contextString: string;
-  context: string;
-  payload: string;
+  tp: MType.MobileIssueEvent,
+  timestamp: number,
+  type: string,
+  contextString: string,
+  context: string,
+  payload: string,
 }
 
 
+export type RawMessage = RawTimestamp | RawSetPageLocationDeprecated | RawSetViewportSize | RawSetViewportScroll | RawCreateDocument | RawCreateElementNode | RawCreateTextNode | RawMoveNode | RawRemoveNode | RawSetNodeAttribute | RawRemoveNodeAttribute | RawSetNodeData | RawSetCssData | RawSetNodeScroll | RawSetInputValue | RawSetInputChecked | RawMouseMove | RawNetworkRequestDeprecated | RawConsoleLog | RawStringDictGlobal | RawSetNodeAttributeDictGlobal | RawProfiler | RawOTable | RawReduxDeprecated | RawVuex | RawMobX | RawNgRx | RawGraphQlDeprecated | RawPerformanceTrack | RawStringDictDeprecated | RawSetNodeAttributeDictDeprecated | RawStringDict | RawSetNodeAttributeDict | RawResourceTimingDeprecated | RawConnectionInformation | RawSetPageVisibility | RawLoadFontFace | RawSetNodeFocus | RawSetNodeAttributeURLBased | RawSetCssDataURLBased | RawMouseClick | RawMouseClickDeprecated | RawCreateIFrameDocument | RawAdoptedSsReplaceURLBased | RawAdoptedSsReplace | RawAdoptedSsInsertRuleURLBased | RawAdoptedSsInsertRule | RawAdoptedSsDeleteRule | RawAdoptedSsAddOwner | RawAdoptedSsRemoveOwner | RawZustand | RawNetworkRequest | RawWsChannel | RawLongAnimationTask | RawSelectionChange | RawMouseThrashing | RawResourceTiming | RawTabChange | RawTabData | RawCanvasNode | RawTagTrigger | RawRedux | RawSetPageLocation | RawGraphQl | RawMobileEvent | RawMobileScreenChanges | RawMobileClickEvent | RawMobileInputEvent | RawMobilePerformanceEvent | RawMobileLog | RawMobileInternalError | RawMobileNetworkCall | RawMobileSwipeEvent | RawMobileIssueEvent;
 export type RawMessage = RawTimestamp | RawSetPageLocationDeprecated | RawSetViewportSize | RawSetViewportScroll | RawCreateDocument | RawCreateElementNode | RawCreateTextNode | RawMoveNode | RawRemoveNode | RawSetNodeAttribute | RawRemoveNodeAttribute | RawSetNodeData | RawSetCssData | RawSetNodeScroll | RawSetInputValue | RawSetInputChecked | RawMouseMove | RawNetworkRequestDeprecated | RawConsoleLog | RawStringDictGlobal | RawSetNodeAttributeDictGlobal | RawCssInsertRule | RawCssDeleteRule | RawFetch | RawProfiler | RawOTable | RawReduxDeprecated | RawVuex | RawMobX | RawNgRx | RawGraphQlDeprecated | RawPerformanceTrack | RawStringDictDeprecated | RawSetNodeAttributeDictDeprecated | RawStringDict | RawSetNodeAttributeDict | RawResourceTimingDeprecated | RawConnectionInformation | RawSetPageVisibility | RawLoadFontFace | RawSetNodeFocus | RawLongTask | RawSetNodeAttributeURLBased | RawSetCssDataURLBased | RawCssInsertRuleURLBased | RawMouseClick | RawMouseClickDeprecated | RawCreateIFrameDocument | RawAdoptedSsReplaceURLBased | RawAdoptedSsReplace | RawAdoptedSsInsertRuleURLBased | RawAdoptedSsInsertRule | RawAdoptedSsDeleteRule | RawAdoptedSsAddOwner | RawAdoptedSsRemoveOwner | RawZustand | RawNetworkRequest | RawWsChannel | RawSelectionChange | RawMouseThrashing | RawResourceTiming | RawTabChange | RawTabData | RawCanvasNode | RawTagTrigger | RawRedux | RawSetPageLocation | RawGraphQl | RawMobileEvent | RawMobileScreenChanges | RawMobileClickEvent | RawMobileInputEvent | RawMobilePerformanceEvent | RawMobileLog | RawMobileInternalError | RawMobileNetworkCall | RawMobileSwipeEvent | RawMobileIssueEvent;
diff --git a/frontend/app/player/web/messages/tracker-legacy.gen.ts b/frontend/app/player/web/messages/tracker-legacy.gen.ts
index 48137b60d..21daaf8e2 100644
--- a/frontend/app/player/web/messages/tracker-legacy.gen.ts
+++ b/frontend/app/player/web/messages/tracker-legacy.gen.ts
@@ -1,6 +1,6 @@
 // Auto-generated, do not edit
 
-import { MType } from './raw.gen';
+import { MType } from './raw.gen'
 
 export const TP_MAP = {
   0: MType.Timestamp,
@@ -61,6 +61,7 @@ export const TP_MAP = {
   79: MType.Zustand,
   83: MType.NetworkRequest,
   84: MType.WsChannel,
+  89: MType.LongAnimationTask,
   113: MType.SelectionChange,
   114: MType.MouseThrashing,
   116: MType.ResourceTiming,
@@ -81,4 +82,4 @@ export const TP_MAP = {
   105: MType.MobileNetworkCall,
   106: MType.MobileSwipeEvent,
   111: MType.MobileIssueEvent,
-} as const;
+} as const
diff --git a/frontend/app/player/web/messages/tracker.gen.ts b/frontend/app/player/web/messages/tracker.gen.ts
index 6643e266a..aa7141a2a 100644
--- a/frontend/app/player/web/messages/tracker.gen.ts
+++ b/frontend/app/player/web/messages/tracker.gen.ts
@@ -1,22 +1,38 @@
 // Auto-generated, do not edit
+/* eslint-disable */
 
-import type { RawMessage } from './raw.gen';
-import { MType } from './raw.gen';
+import type { RawMessage } from './raw.gen'
+import { MType } from './raw.gen'
 
-type TrTimestamp = [type: 0, timestamp: number];
+
+type TrTimestamp = [
+  type: 0,
+  timestamp: number,
+]
 
 type TrSetPageLocationDeprecated = [
   type: 4,
   url: string,
   referrer: string,
   navigationStart: number,
-];
+]
 
-type TrSetViewportSize = [type: 5, width: number, height: number];
+type TrSetViewportSize = [
+  type: 5,
+  width: number,
+  height: number,
+]
 
-type TrSetViewportScroll = [type: 6, x: number, y: number];
+type TrSetViewportScroll = [
+  type: 6,
+  x: number,
+  y: number,
+]
 
-type TrCreateDocument = [type: 7];
+type TrCreateDocument = [
+  type: 7,
+
+]
 
 type TrCreateElementNode = [
   type: 8,
@@ -25,29 +41,77 @@ type TrCreateElementNode = [
   index: number,
   tag: string,
   svg: boolean,
-];
+]
 
-type TrCreateTextNode = [type: 9, id: number, parentID: number, index: number];
+type TrCreateTextNode = [
+  type: 9,
+  id: number,
+  parentID: number,
+  index: number,
+]
 
-type TrMoveNode = [type: 10, id: number, parentID: number, index: number];
+type TrMoveNode = [
+  type: 10,
+  id: number,
+  parentID: number,
+  index: number,
+]
 
-type TrRemoveNode = [type: 11, id: number];
+type TrRemoveNode = [
+  type: 11,
+  id: number,
+]
 
-type TrSetNodeAttribute = [type: 12, id: number, name: string, value: string];
+type TrSetNodeAttribute = [
+  type: 12,
+  id: number,
+  name: string,
+  value: string,
+]
 
-type TrRemoveNodeAttribute = [type: 13, id: number, name: string];
+type TrRemoveNodeAttribute = [
+  type: 13,
+  id: number,
+  name: string,
+]
 
-type TrSetNodeData = [type: 14, id: number, data: string];
+type TrSetNodeData = [
+  type: 14,
+  id: number,
+  data: string,
+]
 
-type TrSetNodeScroll = [type: 16, id: number, x: number, y: number];
+type TrSetNodeScroll = [
+  type: 16,
+  id: number,
+  x: number,
+  y: number,
+]
 
-type TrSetInputTarget = [type: 17, id: number, label: string];
+type TrSetInputTarget = [
+  type: 17,
+  id: number,
+  label: string,
+]
 
-type TrSetInputValue = [type: 18, id: number, value: string, mask: number];
+type TrSetInputValue = [
+  type: 18,
+  id: number,
+  value: string,
+  mask: number,
+]
 
-type TrSetInputChecked = [type: 19, id: number, checked: boolean];
+type TrSetInputChecked = [
+  type: 19,
+  id: number,
+  checked: boolean,
+]
 
-type TrMouseMove = [type: 20, x: number, y: number];
+type TrMouseMove = [
+  type: 20,
+  x: number,
+  y: number,
+]
 
 type TrNetworkRequestDeprecated = [
   type: 21,
@@ -59,9 +123,13 @@ type TrNetworkRequestDeprecated = [
   status: number,
   timestamp: number,
   duration: number,
-];
+]
 
-type TrConsoleLog = [type: 22, level: string, value: string];
+type TrConsoleLog = [
+  type: 22,
+  level: string,
+  value: string,
+]
 
 type TrPageLoadTiming = [
   type: 23,
@@ -74,24 +142,42 @@ type TrPageLoadTiming = [
   loadEventEnd: number,
   firstPaint: number,
   firstContentfulPaint: number,
-];
+]
 
 type TrPageRenderTiming = [
   type: 24,
   speedIndex: number,
   visuallyComplete: number,
   timeToInteractive: number,
-];
+]
 
-type TrCustomEvent = [type: 27, name: string, payload: string];
+type TrCustomEvent = [
+  type: 27,
+  name: string,
+  payload: string,
+]
 
-type TrUserID = [type: 28, id: string];
+type TrUserID = [
+  type: 28,
+  id: string,
+]
 
-type TrUserAnonymousID = [type: 29, id: string];
+type TrUserAnonymousID = [
+  type: 29,
+  id: string,
+]
 
-type TrMetadata = [type: 30, key: string, value: string];
+type TrMetadata = [
+  type: 30,
+  key: string,
+  value: string,
+]
 
-type TrStringDictGlobal = [type: 34, key: number, value: string];
+type TrStringDictGlobal = [
+  type: 34,
+  key: number,
+  value: string,
+]
 
 type TrSetNodeAttributeDictGlobal = [
   type: 35,
@@ -130,24 +216,44 @@ type TrProfiler = [
   duration: number,
   args: string,
   result: string,
-];
+]
 
-type TrOTable = [type: 41, key: string, value: string];
+type TrOTable = [
+  type: 41,
+  key: string,
+  value: string,
+]
 
-type TrStateAction = [type: 42, type: string];
+type TrStateAction = [
+  type: 42,
+  type: string,
+]
 
 type TrReduxDeprecated = [
   type: 44,
   action: string,
   state: string,
   duration: number,
-];
+]
 
-type TrVuex = [type: 45, mutation: string, state: string];
+type TrVuex = [
+  type: 45,
+  mutation: string,
+  state: string,
+]
 
-type TrMobX = [type: 46, type: string, payload: string];
+type TrMobX = [
+  type: 46,
+  type: string,
+  payload: string,
+]
 
-type TrNgRx = [type: 47, action: string, state: string, duration: number];
+type TrNgRx = [
+  type: 47,
+  action: string,
+  state: string,
+  duration: number,
+]
 
 type TrGraphQLDeprecated = [
   type: 48,
@@ -156,7 +262,7 @@ type TrGraphQLDeprecated = [
   variables: string,
   response: string,
   duration: number,
-];
+]
 
 type TrPerformanceTrack = [
   type: 49,
@@ -164,25 +270,33 @@ type TrPerformanceTrack = [
   ticks: number,
   totalJSHeapSize: number,
   usedJSHeapSize: number,
-];
+]
 
-type TrStringDictDeprecated = [type: 50, key: number, value: string];
+type TrStringDictDeprecated = [
+  type: 50,
+  key: number,
+  value: string,
+]
 
 type TrSetNodeAttributeDictDeprecated = [
   type: 51,
   id: number,
   nameKey: number,
   valueKey: number,
-];
+]
 
-type TrStringDict = [type: 43, key: string, value: string];
+type TrStringDict = [
+  type: 43,
+  key: string,
+  value: string,
+]
 
 type TrSetNodeAttributeDict = [
   type: 52,
   id: number,
   name: string,
   value: string,
-];
+]
 
 type TrResourceTimingDeprecated = [
   type: 53,
@@ -194,11 +308,18 @@ type TrResourceTimingDeprecated = [
   decodedBodySize: number,
   url: string,
   initiator: string,
-];
+]
 
-type TrConnectionInformation = [type: 54, downlink: number, type: string];
+type TrConnectionInformation = [
+  type: 54,
+  downlink: number,
+  type: string,
+]
 
-type TrSetPageVisibility = [type: 55, hidden: boolean];
+type TrSetPageVisibility = [
+  type: 55,
+  hidden: boolean,
+]
 
 type TrLoadFontFace = [
   type: 57,
@@ -206,7 +327,7 @@ type TrLoadFontFace = [
   family: string,
   source: string,
   descriptors: string,
-];
+]
 
 type TrSetNodeFocus = [type: 58, id: number];
 
@@ -227,16 +348,20 @@ type TrSetNodeAttributeURLBased = [
   name: string,
   value: string,
   baseURL: string,
-];
+]
 
 type TrSetCSSDataURLBased = [
   type: 61,
   id: number,
   data: string,
   baseURL: string,
-];
+]
 
-type TrTechnicalInfo = [type: 63, type: string, value: string];
+type TrTechnicalInfo = [
+  type: 63,
+  type: string,
+  value: string,
+]
 
 type TrCustomIssue = [type: 64, name: string, payload: string];
 
@@ -256,7 +381,7 @@ type TrMouseClick = [
   selector: string,
   normalizedX: number,
   normalizedY: number,
-];
+]
 
 type TrMouseClickDeprecated = [
   type: 69,
@@ -264,16 +389,20 @@ type TrMouseClickDeprecated = [
   hesitationTime: number,
   label: string,
   selector: string,
-];
+]
 
-type TrCreateIFrameDocument = [type: 70, frameID: number, id: number];
+type TrCreateIFrameDocument = [
+  type: 70,
+  frameID: number,
+  id: number,
+]
 
 type TrAdoptedSSReplaceURLBased = [
   type: 71,
   sheetID: number,
   text: string,
   baseURL: string,
-];
+]
 
 type TrAdoptedSSInsertRuleURLBased = [
   type: 73,
@@ -281,13 +410,25 @@ type TrAdoptedSSInsertRuleURLBased = [
   rule: string,
   index: number,
   baseURL: string,
-];
+]
 
-type TrAdoptedSSDeleteRule = [type: 75, sheetID: number, index: number];
+type TrAdoptedSSDeleteRule = [
+  type: 75,
+  sheetID: number,
+  index: number,
+]
 
-type TrAdoptedSSAddOwner = [type: 76, sheetID: number, id: number];
+type TrAdoptedSSAddOwner = [
+  type: 76,
+  sheetID: number,
+  id: number,
+]
 
-type TrAdoptedSSRemoveOwner = [type: 77, sheetID: number, id: number];
+type TrAdoptedSSRemoveOwner = [
+  type: 77,
+  sheetID: number,
+  id: number,
+]
 
 type TrJSException = [
   type: 78,
@@ -295,9 +436,13 @@ type TrJSException = [
   message: string,
   payload: string,
   metadata: string,
-];
+]
 
-type TrZustand = [type: 79, mutation: string, state: string];
+type TrZustand = [
+  type: 79,
+  mutation: string,
+  state: string,
+]
 
 type TrBatchMetadata = [
   type: 81,
@@ -306,9 +451,13 @@ type TrBatchMetadata = [
   firstIndex: number,
   timestamp: number,
   location: string,
-];
+]
 
-type TrPartitionedMessage = [type: 82, partNo: number, partTotal: number];
+type TrPartitionedMessage = [
+  type: 82,
+  partNo: number,
+  partTotal: number,
+]
 
 type TrNetworkRequest = [
   type: 83,
@@ -321,7 +470,7 @@ type TrNetworkRequest = [
   timestamp: number,
   duration: number,
   transferredBodySize: number,
-];
+]
 
 type TrWSChannel = [
   type: 84,
@@ -331,7 +480,17 @@ type TrWSChannel = [
   timestamp: number,
   dir: string,
   messageType: string,
-];
+]
+
+type TrLongAnimationTask = [
+  type: 89,
+  name: string,
+  duration: number,
+  blockingDuration: number,
+  firstUIEventTimestamp: number,
+  startTime: number,
+  scripts: string,
+]
 
 type TrInputChange = [
   type: 112,
@@ -341,18 +500,24 @@ type TrInputChange = [
   label: string,
   hesitationTime: number,
   inputDuration: number,
-];
+]
 
 type TrSelectionChange = [
   type: 113,
   selectionStart: number,
   selectionEnd: number,
   selection: string,
-];
+]
 
-type TrMouseThrashing = [type: 114, timestamp: number];
+type TrMouseThrashing = [
+  type: 114,
+  timestamp: number,
+]
 
-type TrUnbindNodes = [type: 115, totalRemovedPercent: number];
+type TrUnbindNodes = [
+  type: 115,
+  totalRemovedPercent: number,
+]
 
 type TrResourceTiming = [
   type: 116,
@@ -366,15 +531,28 @@ type TrResourceTiming = [
   initiator: string,
   transferredSize: number,
   cached: boolean,
-];
+]
 
-type TrTabChange = [type: 117, tabId: string];
+type TrTabChange = [
+  type: 117,
+  tabId: string,
+]
 
-type TrTabData = [type: 118, tabId: string];
+type TrTabData = [
+  type: 118,
+  tabId: string,
+]
 
-type TrCanvasNode = [type: 119, nodeId: string, timestamp: number];
+type TrCanvasNode = [
+  type: 119,
+  nodeId: string,
+  timestamp: number,
+]
 
-type TrTagTrigger = [type: 120, tagId: number];
+type TrTagTrigger = [
+  type: 120,
+  tagId: number,
+]
 
 type TrRedux = [
   type: 121,
@@ -382,7 +560,7 @@ type TrRedux = [
   state: string,
   duration: number,
   actionTime: number,
-];
+]
 
 type TrSetPageLocation = [
   type: 122,
@@ -390,7 +568,7 @@ type TrSetPageLocation = [
   referrer: string,
   navigationStart: number,
   documentTitle: string,
-];
+]
 
 type TrGraphQL = [
   type: 123,
@@ -399,20 +577,25 @@ type TrGraphQL = [
   variables: string,
   response: string,
   duration: number,
-];
+]
 
-type TrWebVitals = [type: 124, name: string, value: string];
+type TrWebVitals = [
+  type: 124,
+  name: string,
+  value: string,
+]
 
 
 export type TrackerMessage = TrTimestamp | TrSetPageLocationDeprecated | TrSetViewportSize | TrSetViewportScroll | TrCreateDocument | TrCreateElementNode | TrCreateTextNode | TrMoveNode | TrRemoveNode | TrSetNodeAttribute | TrRemoveNodeAttribute | TrSetNodeData | TrSetNodeScroll | TrSetInputTarget | TrSetInputValue | TrSetInputChecked | TrMouseMove | TrNetworkRequestDeprecated | TrConsoleLog | TrPageLoadTiming | TrPageRenderTiming | TrCustomEvent | TrUserID | TrUserAnonymousID | TrMetadata | TrStringDictGlobal | TrSetNodeAttributeDictGlobal | TrCSSInsertRule | TrCSSDeleteRule | TrFetch | TrProfiler | TrOTable | TrStateAction | TrReduxDeprecated | TrVuex | TrMobX | TrNgRx | TrGraphQLDeprecated | TrPerformanceTrack | TrStringDictDeprecated | TrSetNodeAttributeDictDeprecated | TrStringDict | TrSetNodeAttributeDict | TrResourceTimingDeprecated | TrConnectionInformation | TrSetPageVisibility | TrLoadFontFace | TrSetNodeFocus | TrLongTask | TrSetNodeAttributeURLBased | TrSetCSSDataURLBased | TrTechnicalInfo | TrCustomIssue | TrCSSInsertRuleURLBased | TrMouseClick | TrMouseClickDeprecated | TrCreateIFrameDocument | TrAdoptedSSReplaceURLBased | TrAdoptedSSInsertRuleURLBased | TrAdoptedSSDeleteRule | TrAdoptedSSAddOwner | TrAdoptedSSRemoveOwner | TrJSException | TrZustand | TrBatchMetadata | TrPartitionedMessage | TrNetworkRequest | TrWSChannel | TrInputChange | TrSelectionChange | TrMouseThrashing | TrUnbindNodes | TrResourceTiming | TrTabChange | TrTabData | TrCanvasNode | TrTagTrigger | TrRedux | TrSetPageLocation | TrGraphQL | TrWebVitals
 
 export default function translate(tMsg: TrackerMessage): RawMessage | null {
-  switch (tMsg[0]) {
+  switch(tMsg[0]) {
+
     case 0: {
       return {
         tp: MType.Timestamp,
         timestamp: tMsg[1],
-      };
+      }
     }
 
     case 4: {
@@ -421,7 +604,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         url: tMsg[1],
         referrer: tMsg[2],
         navigationStart: tMsg[3],
-      };
+      }
     }
 
     case 5: {
@@ -429,7 +612,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.SetViewportSize,
         width: tMsg[1],
         height: tMsg[2],
-      };
+      }
     }
 
     case 6: {
@@ -437,13 +620,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.SetViewportScroll,
         x: tMsg[1],
         y: tMsg[2],
-      };
+      }
     }
 
     case 7: {
       return {
         tp: MType.CreateDocument,
-      };
+
+      }
     }
 
     case 8: {
@@ -454,7 +638,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         index: tMsg[3],
         tag: tMsg[4],
         svg: tMsg[5],
-      };
+      }
     }
 
     case 9: {
@@ -463,7 +647,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         parentID: tMsg[2],
         index: tMsg[3],
-      };
+      }
     }
 
     case 10: {
@@ -472,14 +656,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         parentID: tMsg[2],
         index: tMsg[3],
-      };
+      }
     }
 
     case 11: {
       return {
         tp: MType.RemoveNode,
         id: tMsg[1],
-      };
+      }
     }
 
     case 12: {
@@ -488,7 +672,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         name: tMsg[2],
         value: tMsg[3],
-      };
+      }
     }
 
     case 13: {
@@ -496,7 +680,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.RemoveNodeAttribute,
         id: tMsg[1],
         name: tMsg[2],
-      };
+      }
     }
 
     case 14: {
@@ -504,7 +688,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.SetNodeData,
         id: tMsg[1],
         data: tMsg[2],
-      };
+      }
     }
 
     case 16: {
@@ -513,7 +697,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         x: tMsg[2],
         y: tMsg[3],
-      };
+      }
     }
 
     case 18: {
@@ -522,7 +706,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         value: tMsg[2],
         mask: tMsg[3],
-      };
+      }
     }
 
     case 19: {
@@ -530,7 +714,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.SetInputChecked,
         id: tMsg[1],
         checked: tMsg[2],
-      };
+      }
     }
 
     case 20: {
@@ -538,7 +722,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.MouseMove,
         x: tMsg[1],
         y: tMsg[2],
-      };
+      }
     }
 
     case 21: {
@@ -552,7 +736,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         status: tMsg[6],
         timestamp: tMsg[7],
         duration: tMsg[8],
-      };
+      }
     }
 
     case 22: {
@@ -560,7 +744,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.ConsoleLog,
         level: tMsg[1],
         value: tMsg[2],
-      };
+      }
     }
 
     case 34: {
@@ -568,7 +752,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.StringDictGlobal,
         key: tMsg[1],
         value: tMsg[2],
-      };
+      }
     }
 
     case 35: {
@@ -579,7 +763,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         value: tMsg[3],
       };
     }
-    
+
     case 37: {
       return {
         tp: MType.CssInsertRule,
@@ -588,7 +772,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         index: tMsg[3],
       }
     }
-    
+
     case 38: {
       return {
         tp: MType.CssDeleteRule,
@@ -596,7 +780,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         index: tMsg[2],
       }
     }
-    
+
     case 39: {
       return {
         tp: MType.Fetch,
@@ -609,7 +793,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         duration: tMsg[7],
       }
     }
-    
+
     case 40: {
       return {
         tp: MType.Profiler,
@@ -617,7 +801,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         duration: tMsg[2],
         args: tMsg[3],
         result: tMsg[4],
-      };
+      }
     }
 
     case 41: {
@@ -625,7 +809,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.OTable,
         key: tMsg[1],
         value: tMsg[2],
-      };
+      }
     }
 
     case 44: {
@@ -634,7 +818,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         action: tMsg[1],
         state: tMsg[2],
         duration: tMsg[3],
-      };
+      }
     }
 
     case 45: {
@@ -642,7 +826,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.Vuex,
         mutation: tMsg[1],
         state: tMsg[2],
-      };
+      }
     }
 
     case 46: {
@@ -650,7 +834,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.MobX,
         type: tMsg[1],
         payload: tMsg[2],
-      };
+      }
     }
 
     case 47: {
@@ -659,7 +843,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         action: tMsg[1],
         state: tMsg[2],
         duration: tMsg[3],
-      };
+      }
     }
 
     case 48: {
@@ -670,7 +854,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         variables: tMsg[3],
         response: tMsg[4],
         duration: tMsg[5],
-      };
+      }
     }
 
     case 49: {
@@ -680,7 +864,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         ticks: tMsg[2],
         totalJSHeapSize: tMsg[3],
         usedJSHeapSize: tMsg[4],
-      };
+      }
     }
 
     case 50: {
@@ -688,7 +872,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.StringDictDeprecated,
         key: tMsg[1],
         value: tMsg[2],
-      };
+      }
     }
 
     case 51: {
@@ -697,7 +881,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         nameKey: tMsg[2],
         valueKey: tMsg[3],
-      };
+      }
     }
 
     case 43: {
@@ -705,7 +889,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.StringDict,
         key: tMsg[1],
         value: tMsg[2],
-      };
+      }
     }
 
     case 52: {
@@ -714,7 +898,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
         name: tMsg[2],
         value: tMsg[3],
-      };
+      }
     }
 
     case 53: {
@@ -728,7 +912,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         decodedBodySize: tMsg[6],
         url: tMsg[7],
         initiator: tMsg[8],
-      };
+      }
     }
 
     case 54: {
@@ -736,14 +920,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.ConnectionInformation,
         downlink: tMsg[1],
         type: tMsg[2],
-      };
+      }
     }
 
     case 55: {
       return {
         tp: MType.SetPageVisibility,
         hidden: tMsg[1],
-      };
+      }
     }
 
     case 57: {
@@ -753,7 +937,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         family: tMsg[2],
         source: tMsg[3],
         descriptors: tMsg[4],
-      };
+      }
     }
 
     case 58: {
@@ -762,7 +946,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         id: tMsg[1],
       };
     }
-    
+
     case 59: {
       return {
         tp: MType.LongTask,
@@ -775,7 +959,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         containerName: tMsg[7],
       }
     }
-    
+
     case 60: {
       return {
         tp: MType.SetNodeAttributeURLBased,
@@ -783,7 +967,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         name: tMsg[2],
         value: tMsg[3],
         baseURL: tMsg[4],
-      };
+      }
     }
 
     case 61: {
@@ -794,7 +978,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         baseURL: tMsg[3],
       };
     }
-    
+
     case 67: {
       return {
         tp: MType.CssInsertRuleURLBased,
@@ -804,7 +988,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         baseURL: tMsg[4],
       }
     }
-    
+
     case 68: {
       return {
         tp: MType.MouseClick,
@@ -814,7 +998,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         selector: tMsg[4],
         normalizedX: tMsg[5],
         normalizedY: tMsg[6],
-      };
+      }
     }
 
     case 69: {
@@ -824,7 +1008,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         hesitationTime: tMsg[2],
         label: tMsg[3],
         selector: tMsg[4],
-      };
+      }
     }
 
     case 70: {
@@ -832,7 +1016,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.CreateIFrameDocument,
         frameID: tMsg[1],
         id: tMsg[2],
-      };
+      }
     }
 
     case 71: {
@@ -841,7 +1025,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         sheetID: tMsg[1],
         text: tMsg[2],
         baseURL: tMsg[3],
-      };
+      }
     }
 
     case 73: {
@@ -851,7 +1035,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         rule: tMsg[2],
         index: tMsg[3],
         baseURL: tMsg[4],
-      };
+      }
     }
 
     case 75: {
@@ -859,7 +1043,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.AdoptedSsDeleteRule,
         sheetID: tMsg[1],
         index: tMsg[2],
-      };
+      }
     }
 
     case 76: {
@@ -867,7 +1051,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.AdoptedSsAddOwner,
         sheetID: tMsg[1],
         id: tMsg[2],
-      };
+      }
     }
 
     case 77: {
@@ -875,7 +1059,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.AdoptedSsRemoveOwner,
         sheetID: tMsg[1],
         id: tMsg[2],
-      };
+      }
     }
 
     case 79: {
@@ -883,7 +1067,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.Zustand,
         mutation: tMsg[1],
         state: tMsg[2],
-      };
+      }
     }
 
     case 83: {
@@ -898,7 +1082,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         timestamp: tMsg[7],
         duration: tMsg[8],
         transferredBodySize: tMsg[9],
-      };
+      }
     }
 
     case 84: {
@@ -910,7 +1094,19 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         timestamp: tMsg[4],
         dir: tMsg[5],
         messageType: tMsg[6],
-      };
+      }
+    }
+
+    case 89: {
+      return {
+        tp: MType.LongAnimationTask,
+        name: tMsg[1],
+        duration: tMsg[2],
+        blockingDuration: tMsg[3],
+        firstUIEventTimestamp: tMsg[4],
+        startTime: tMsg[5],
+        scripts: tMsg[6],
+      }
     }
 
     case 113: {
@@ -919,14 +1115,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         selectionStart: tMsg[1],
         selectionEnd: tMsg[2],
         selection: tMsg[3],
-      };
+      }
     }
 
     case 114: {
       return {
         tp: MType.MouseThrashing,
         timestamp: tMsg[1],
-      };
+      }
     }
 
     case 116: {
@@ -942,21 +1138,21 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         initiator: tMsg[8],
         transferredSize: tMsg[9],
         cached: tMsg[10],
-      };
+      }
     }
 
     case 117: {
       return {
         tp: MType.TabChange,
         tabId: tMsg[1],
-      };
+      }
     }
 
     case 118: {
       return {
         tp: MType.TabData,
         tabId: tMsg[1],
-      };
+      }
     }
 
     case 119: {
@@ -964,14 +1160,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         tp: MType.CanvasNode,
         nodeId: tMsg[1],
         timestamp: tMsg[2],
-      };
+      }
     }
 
     case 120: {
       return {
         tp: MType.TagTrigger,
         tagId: tMsg[1],
-      };
+      }
     }
 
     case 121: {
@@ -981,7 +1177,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         state: tMsg[2],
         duration: tMsg[3],
         actionTime: tMsg[4],
-      };
+      }
     }
 
     case 122: {
@@ -991,7 +1187,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         referrer: tMsg[2],
         navigationStart: tMsg[3],
         documentTitle: tMsg[4],
-      };
+      }
     }
 
     case 123: {
@@ -1002,10 +1198,11 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
         variables: tMsg[3],
         response: tMsg[4],
         duration: tMsg[5],
-      };
+      }
     }
 
     default:
-      return null;
+      return null
   }
+
 }
diff --git a/frontend/app/player/web/types/longTask.ts b/frontend/app/player/web/types/longTask.ts
new file mode 100644
index 000000000..de5d05360
--- /dev/null
+++ b/frontend/app/player/web/types/longTask.ts
@@ -0,0 +1,41 @@
+import { LongAnimationTask } from "../messages";
+
+export interface ILongAnimationTask {
+  name: string;
+  duration: number;
+  blockingDuration: number;
+  firstUIEventTimestamp: number;
+  startTime: number;
+  scripts: [
+    {
+      name: string;
+      duration: number;
+      invoker: string;
+      invokerType: string;
+      pauseDuration: number;
+      sourceURL: string;
+      sourceFunctionName: string;
+      sourceCharPosition: number;
+      forcedStyleAndLayoutDuration: number;
+    },
+  ];
+  isRed: boolean;
+}
+
+export const getLongTask = (msg: LongAnimationTask): ILongAnimationTask => {
+  let scripts = []
+  try {
+    scripts = JSON.parse(msg.scripts)
+  } catch (e) {
+    console.error('Error parsing scripts for LAT:', e, msg)
+  }
+  return ({
+    name: msg.name,
+    duration: msg.duration,
+    blockingDuration: msg.blockingDuration,
+    firstUIEventTimestamp: msg.firstUIEventTimestamp,
+    startTime: msg.startTime,
+    scripts,
+    isRed: msg.blockingDuration > 50
+  });
+}
diff --git a/mobs/messages.rb b/mobs/messages.rb
index 3f9dfc827..2cba1545e 100644
--- a/mobs/messages.rb
+++ b/mobs/messages.rb
@@ -520,6 +520,15 @@ message 84, 'WSChannel', :replayer => :devtools do
     string 'MessageType'
 end
 
+message 89, 'LongAnimationTask', :replayer => :devtools do
+    string 'Name'
+    int 'Duration'
+    int 'BlockingDuration'
+    int 'FirstUIEventTimestamp'
+    int 'StartTime'
+    string 'Scripts'
+end
+
 # 90-111 reserved iOS
 
 message 112, 'InputChange', :replayer => false do
@@ -621,4 +630,4 @@ message 127, 'SessionSearch', :tracker => false, :replayer => false  do
   uint 'Partition'
 end
 
-# FREE 2, 34, 35, 36, 65, 85, 86, 87, 88, 89
\ No newline at end of file
+# FREE 2, 35, 36, 65, 85, 86, 87, 88, 89
\ No newline at end of file
diff --git a/tracker/tracker/src/common/messages.gen.ts b/tracker/tracker/src/common/messages.gen.ts
index 0911a99b4..af7df76df 100644
--- a/tracker/tracker/src/common/messages.gen.ts
+++ b/tracker/tracker/src/common/messages.gen.ts
@@ -70,6 +70,7 @@ export declare const enum Type {
   PartitionedMessage = 82,
   NetworkRequest = 83,
   WSChannel = 84,
+  LongAnimationTask = 89,
   InputChange = 112,
   SelectionChange = 113,
   MouseThrashing = 114,
@@ -112,7 +113,7 @@ export type SetViewportScroll = [
 
 export type CreateDocument = [
   /*type:*/ Type.CreateDocument,
-  
+
 ]
 
 export type CreateElementNode = [
@@ -570,6 +571,16 @@ export type WSChannel = [
   /*messageType:*/ string,
 ]
 
+export type LongAnimationTask = [
+  /*type:*/ Type.LongAnimationTask,
+  /*name:*/ string,
+  /*duration:*/ number,
+  /*blockingDuration:*/ number,
+  /*firstUIEventTimestamp:*/ number,
+  /*startTime:*/ number,
+  /*scripts:*/ string,
+]
+
 export type InputChange = [
   /*type:*/ Type.InputChange,
   /*id:*/ number,
diff --git a/tracker/tracker/src/main/app/messages.gen.ts b/tracker/tracker/src/main/app/messages.gen.ts
index ca9a88118..90e543f31 100644
--- a/tracker/tracker/src/main/app/messages.gen.ts
+++ b/tracker/tracker/src/main/app/messages.gen.ts
@@ -905,6 +905,25 @@ export function WSChannel(
   ]
 }
 
+export function LongAnimationTask(
+  name: string,
+  duration: number,
+  blockingDuration: number,
+  firstUIEventTimestamp: number,
+  startTime: number,
+  scripts: string,
+): Messages.LongAnimationTask {
+  return [
+    Messages.Type.LongAnimationTask,
+    name,
+    duration,
+    blockingDuration,
+    firstUIEventTimestamp,
+    startTime,
+    scripts,
+  ]
+}
+
 export function InputChange(
   id: number,
   value: string,
diff --git a/tracker/tracker/src/main/index.ts b/tracker/tracker/src/main/index.ts
index 2bca8f1a9..d0df3edf3 100644
--- a/tracker/tracker/src/main/index.ts
+++ b/tracker/tracker/src/main/index.ts
@@ -28,6 +28,7 @@ import Network from './modules/network.js'
 import ConstructedStyleSheets from './modules/constructedStyleSheets.js'
 import Selection from './modules/selection.js'
 import Tabs from './modules/tabs.js'
+import LongAnimationTask from "./modules/longAnimationTask.js";
 
 import { IN_BROWSER, deprecationWarn, DOCS_HOST, inIframe } from './utils.js'
 import FeatureFlags, { IFeatureFlag } from './modules/featureFlags.js'
@@ -41,13 +42,20 @@ import type { Options as NetworkOptions } from './modules/network.js'
 import type { MouseHandlerOptions } from './modules/mouse.js'
 import type { SessionInfo } from './app/session.js'
 import type { CssRulesOptions } from './modules/cssrules.js'
+import type { LATOptions } from './modules/longAnimationTask.js'
 
 import type { StartOptions } from './app/index.js'
 //TODO: unique options init
 import type { StartPromiseReturn } from './app/index.js'
 
 export type Options = Partial<
-  AppOptions & ConsoleOptions & ExceptionOptions & InputOptions & PerformanceOptions & TimingOptions
+  AppOptions &
+  ConsoleOptions &
+  ExceptionOptions &
+  InputOptions &
+  PerformanceOptions &
+  TimingOptions &
+  LATOptions
 > & {
   projectID?: number // For the back compatibility only (deprecated)
   projectKey: string
@@ -201,6 +209,7 @@ export default class API {
     Img(app)
     Input(app, options)
     Timing(app, options)
+    LongAnimationTask(app, options)
     Focus(app)
     Fonts(app)
     const skipNetwork = options.network?.disabled
diff --git a/tracker/tracker/src/main/modules/longAnimationTask.ts b/tracker/tracker/src/main/modules/longAnimationTask.ts
new file mode 100644
index 000000000..49a96ba94
--- /dev/null
+++ b/tracker/tracker/src/main/modules/longAnimationTask.ts
@@ -0,0 +1,61 @@
+import type App from '../app/index.js'
+import { LongAnimationTask } from "../app/messages.gen";
+
+export interface LongAnimationTask extends PerformanceEntry {
+  name: string;
+  duration: number;
+  blockingDuration: number;
+  firstUIEventTimestamp: number;
+  startTime: number;
+  scripts: [
+    {
+      name: string;
+      duration: number;
+      invoker: string;
+      invokerType: string;
+      pauseDuration: number;
+      sourceURL: string;
+      sourceFunctionName: string;
+      sourceCharPosition: number;
+      forcedStyleAndLayoutDuration: number;
+    },
+  ];
+}
+
+export interface LATOptions {
+  longTasks: boolean;
+}
+
+export default function (app: App, opts: Partial<LATOptions>): void {
+  if (!opts.longTasks || !('PerformanceObserver' in window) || !('LongTaskObserver' in window)) {
+    return;
+  }
+  const onEntry = (entry: LongAnimationTask) => {
+    app.send(LongAnimationTask(
+      entry.name,
+      entry.duration,
+      entry.blockingDuration,
+      entry.firstUIEventTimestamp,
+      entry.startTime,
+      JSON.stringify(entry.scripts ?? []),
+    ))
+  }
+  const observer = new PerformanceObserver((entryList) => {
+    entryList.getEntries().forEach((entry) => {
+      if (entry.entryType === 'long-animation-frame') {
+        onEntry(entry as LongAnimationTask)
+      }
+    })
+  })
+  app.attachStartCallback(() => {
+    performance.getEntriesByType('long-animation-frame').forEach((lat: LongAnimationTask) => {
+      onEntry(lat)
+    })
+    observer.observe({
+      entryTypes: ['long-animation-frame'],
+    })
+  })
+  app.attachStopCallback(() => {
+    observer.disconnect()
+  })
+}
\ No newline at end of file
diff --git a/tracker/tracker/src/webworker/MessageEncoder.gen.ts b/tracker/tracker/src/webworker/MessageEncoder.gen.ts
index cd8a2b5d3..20756d205 100644
--- a/tracker/tracker/src/webworker/MessageEncoder.gen.ts
+++ b/tracker/tracker/src/webworker/MessageEncoder.gen.ts
@@ -282,6 +282,10 @@ export default class MessageEncoder extends PrimitiveEncoder {
       return  this.string(msg[1]) && this.string(msg[2]) && this.string(msg[3]) && this.uint(msg[4]) && this.string(msg[5]) && this.string(msg[6])
     break
 
+    case Messages.Type.LongAnimationTask:
+      return  this.string(msg[1]) && this.int(msg[2]) && this.int(msg[3]) && this.int(msg[4]) && this.int(msg[5]) && this.string(msg[6])
+    break
+
     case Messages.Type.InputChange:
       return  this.uint(msg[1]) && this.string(msg[2]) && this.boolean(msg[3]) && this.string(msg[4]) && this.int(msg[5]) && this.int(msg[6])
     break