- {!fullscreen &&
}
+
+ {!fullscreen && !fullView && (
+
+ )}
);
diff --git a/frontend/app/components/Session_/Storage/DiffRow.tsx b/frontend/app/components/Session_/Storage/DiffRow.tsx
index 21eca8adb..73e7c7d37 100644
--- a/frontend/app/components/Session_/Storage/DiffRow.tsx
+++ b/frontend/app/components/Session_/Storage/DiffRow.tsx
@@ -50,31 +50,41 @@ function DiffRow({ diff, path }: Props) {
: newValue;
return (
-
+
20 ? 'cursor-pointer' : ''} onClick={() => setShorten(!shorten)}>
{pathStr}
{': '}
-
setShortenOldVal(!shortenOldVal)}
className={cn(
- 'line-through text-disabled-text',
+ 'text-disabled-text',
diffLengths[0] > 50 ? 'cursor-pointer' : ''
)}
>
- {oldValueSafe || 'undefined'}
-
+
{oldValueSafe || 'undefined'}
+ {diffLengths[0] > 50
+ ? (
+
setShortenOldVal(!shortenOldVal)} className="cursor-pointer px-1 text-white bg-gray-light rounded text-sm w-fit">
+ {!shortenOldVal ? 'collapse' : 'expand'}
+
+ ) : null}
+
{' -> '}
-
setShortenNewVal(!shortenNewVal)}
+ 50 ? 'cursor-pointer' : ''
)}
>
{newValueSafe || 'undefined'}
-
+ {diffLengths[1] > 50
+ ? (
+
setShortenNewVal(!shortenNewVal)} className="cursor-pointer px-1 text-white bg-gray-light rounded text-sm w-fit">
+ {!shortenNewVal ? 'collapse' : 'expand'}
+
+ ) : null}
+
);
}
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
new file mode 100644
index 000000000..e0fbb73f6
--- /dev/null
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -0,0 +1,368 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { hideHint } from 'Duck/components/player';
+import {
+ connectPlayer,
+ selectStorageType,
+ STORAGE_TYPES,
+ selectStorageListNow,
+ selectStorageList,
+} from 'Player';
+import { JSONTree, NoContent, Tooltip } from 'UI';
+import { formatMs } from 'App/date';
+import { diff } from 'deep-diff';
+import { jump } from 'Player';
+import BottomBlock from '../BottomBlock/index';
+import DiffRow from './DiffRow';
+import stl from './storage.module.css';
+import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+
+const ROW_HEIGHT = 90;
+
+function getActionsName(type) {
+ switch (type) {
+ case STORAGE_TYPES.MOBX:
+ case STORAGE_TYPES.VUEX:
+ return 'MUTATIONS';
+ default:
+ return 'ACTIONS';
+ }
+}
+
+@connectPlayer((state) => ({
+ type: selectStorageType(state),
+ list: selectStorageList(state),
+ listNow: selectStorageListNow(state),
+}))
+@connect(
+ (state) => ({
+ hintIsHidden: state.getIn(['components', 'player', 'hiddenHints', 'storage']),
+ }),
+ {
+ hideHint,
+ }
+)
+export default class Storage extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.lastBtnRef = React.createRef();
+ this._list = React.createRef();
+ this.cache = new CellMeasurerCache({
+ fixedWidth: true,
+ keyMapper: (index) => this.props.listNow[index],
+ });
+ this._rowRenderer = this._rowRenderer.bind(this);
+ }
+
+ focusNextButton() {
+ if (this.lastBtnRef.current) {
+ this.lastBtnRef.current.focus();
+ }
+ }
+
+ componentDidMount() {
+ this.focusNextButton();
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.listNow.length !== this.props.listNow.length) {
+ this.focusNextButton();
+ /** possible performance gain, but does not work with dynamic list insertion for some reason
+ * getting NaN offsets, maybe I detect changed rows wrongly
+ */
+ // const newRows = this.props.listNow.filter(evt => prevProps.listNow.indexOf(evt._index) < 0);
+ // if (newRows.length > 0) {
+ // const newRowsIndexes = newRows.map(r => this.props.listNow.indexOf(r))
+ // newRowsIndexes.forEach(ind => this.cache.clear(ind))
+ // this._list.recomputeRowHeights(newRowsIndexes)
+ // }
+ }
+ }
+
+ renderDiff(item, prevItem) {
+ if (!prevItem) {
+ // we don't have state before first action
+ return
;
+ }
+
+ const stateDiff = diff(prevItem.state, item.state);
+
+ if (!stateDiff) {
+ return (
+
+ No diff
+
+ );
+ }
+
+ return (
+
+ {stateDiff.map((d, i) => this.renderDiffs(d, i))}
+
+ );
+ }
+
+ renderDiffs(diff, i) {
+ const path = this.createPath(diff);
+
+ return (
+
+
+ );
+ }
+
+ createPath = (diff) => {
+ let path = [];
+
+ if (diff.path) {
+ path = path.concat(diff.path);
+ }
+ if (typeof diff.index !== 'undefined') {
+ path.push(diff.index);
+ }
+
+ const pathStr = path.length ? path.join('.') : '';
+ return pathStr;
+ };
+
+ ensureString(actionType) {
+ if (typeof actionType === 'string') return actionType;
+ return 'UNKNOWN';
+ }
+
+ goNext = () => {
+ const { list, listNow } = this.props;
+ jump(list[listNow.length].time, list[listNow.length]._index);
+ };
+
+ renderTab() {
+ const { listNow } = this.props;
+ if (listNow.length === 0) {
+ return 'Not initialized'; //?
+ }
+ return
;
+ }
+
+ renderItem(item, i, prevItem, style) {
+ const { type } = this.props;
+ let src;
+ let name;
+
+ switch (type) {
+ case STORAGE_TYPES.REDUX:
+ case STORAGE_TYPES.NGRX:
+ src = item.action;
+ name = src && src.type;
+ break;
+ case STORAGE_TYPES.VUEX:
+ src = item.mutation;
+ name = src && src.type;
+ break;
+ case STORAGE_TYPES.MOBX:
+ src = item.payload;
+ name = `@${item.type} ${src && src.type}`;
+ break;
+ case STORAGE_TYPES.ZUSTAND:
+ src = null;
+ name = item.mutation.join('');
+ }
+
+ return (
+
+ {src === null ? (
+
+ {name}
+
+ ) : (
+ <>
+ {this.renderDiff(item, prevItem, i)}
+
+ console.log('test')}
+ />
+
+
+ )}
+
+ {typeof item.duration === 'number' && (
+
{formatMs(item.duration)}
+ )}
+
+ {i + 1 < this.props.listNow.length && (
+ jump(item.time, item._index)}>
+ {'JUMP'}
+
+ )}
+ {i + 1 === this.props.listNow.length && i + 1 < this.props.list.length && (
+
+ {'NEXT'}
+
+ )}
+
+
+
+ );
+ }
+
+ _rowRenderer({ index, parent, key, style }) {
+ const { listNow } = this.props;
+
+ if (!listNow[index]) return console.warn(index, listNow);
+
+ return (
+
+ {this.renderItem(listNow[index], index, index > 0 ? listNow[index - 1] : undefined, style)}
+
+ );
+ }
+
+ render() {
+ const { type, list, listNow, hintIsHidden } = this.props;
+
+ const showStore = type !== STORAGE_TYPES.MOBX;
+ return (
+
+
+ {list.length > 0 && (
+
+ {showStore && (
+
+ {'STATE'}
+
+ )}
+ {type !== STORAGE_TYPES.ZUSTAND ? (
+
+ DIFFS
+
+ ) : null}
+
+ {getActionsName(type)}
+
+
+ TTE
+
+
+ )}
+
+
+
+ {
+ 'Inspect your application state while you’re replaying your users sessions. OpenReplay supports '
+ }
+
+ Redux
+
+ {', '}
+
+ VueX
+
+ {', '}
+
+ Pinia
+
+ {', '}
+
+ Zustand
+
+ {', '}
+
+ MobX
+
+ {' and '}
+
+ NgRx
+
+ .
+ this.props.hideHint('storage')}>
+ Got It!
+
+
+ ) : null
+ }
+ size="small"
+ show={listNow.length === 0}
+ >
+ {showStore && (
+
+ {listNow.length === 0 ? (
+
+ {'Empty state.'}
+
+ ) : (
+ this.renderTab()
+ )}
+
+
+ {({ height, width }) => (
+ {
+ this._list = element;
+ }}
+ deferredMeasurementCache={this.cache}
+ overscanRowCount={1}
+ rowCount={Math.ceil(parseInt(this.props.listNow.length) || 1)}
+ rowHeight={ROW_HEIGHT}
+ rowRenderer={this._rowRenderer}
+ width={width}
+ height={height}
+ />
+ )}
+
+
+
+
+ );
+ }
+}
diff --git a/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js b/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js
index 069757e60..8b7826755 100644
--- a/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js
+++ b/frontend/app/components/shared/DevTools/BottomBlock/BottomBlock.js
@@ -1,17 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import cn from 'classnames';
import stl from './bottomBlock.module.css';
+let timer = null;
const BottomBlock = ({
children = null,
className = '',
additionalHeight = 0,
+ onMouseEnter = () => {},
+ onMouseLeave = () => {},
...props
-}) => (
-
- { children }
-
-);
+}) => {
+ useEffect(() => {}, []);
+
+ return (
+
+ {children}
+
+ );
+};
BottomBlock.displayName = 'BottomBlock';
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index ae275a37a..d22ff088b 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import Log from 'Types/session/log';
import BottomBlock from '../BottomBlock';
import { LEVEL } from 'Types/session/log';
@@ -8,6 +8,11 @@ import ConsoleRow from '../ConsoleRow';
import { getRE } from 'App/utils';
import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
+import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+import { useObserver } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
+import { useModal } from 'App/components/Modal';
const ALL = 'ALL';
const INFO = 'INFO';
@@ -52,11 +57,16 @@ const getIconProps = (level: any) => {
return null;
};
+
+const INDEX_KEY = 'console';
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+
function ConsolePanel() {
const { player, store } = React.useContext(PlayerContext)
const jump = (t: number) => player.jump(t)
- const { logList, exceptionsList } = store.get()
+ const { logList, exceptionsList, time } = store.get()
const logExceptions = exceptionsList.map(({ time, errorId, name, projectId }: any) =>
Log({
@@ -68,12 +78,106 @@ function ConsolePanel() {
);
// @ts-ignore
const logs = logList.concat(logExceptions)
-
const additionalHeight = 0;
- const [activeTab, setActiveTab] = useState(ALL);
- const [filter, setFilter] = useState('');
+ const {
+ sessionStore: { devTools },
+ } = useStore();
- let filtered = React.useMemo(() => {
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+ const [filteredList, setFilteredList] = useState([]);
+ const filter = useObserver(() => devTools[INDEX_KEY].filter);
+ const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
+ const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
+ const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+ const synRef: any = useRef({});
+ const { showModal } = useModal();
+
+ const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({ target: { value } }: any) => {
+ devTools.update(INDEX_KEY, { filter: value });
+ };
+
+ synRef.current = {
+ pauseSync,
+ activeIndex,
+ };
+
+ const removePause = () => {
+ setIsDetailsModalActive(false);
+ clearTimeout(timeOut);
+ timeOut = setTimeout(() => {
+ devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+ setPauseSync(false);
+ }, TIMEOUT_DURATION);
+ };
+
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) return;
+ removePause();
+ };
+
+ useEffect(() => {
+ if (pauseSync) {
+ removePause();
+ }
+
+ return () => {
+ clearTimeout(timeOut);
+ if (!synRef.current.pauseSync) {
+ devTools.update(INDEX_KEY, { index: 0 });
+ }
+ };
+ }, []);
+
+ const getCurrentIndex = () => {
+ return filteredList.filter((item: any) => item.time <= time).length - 1;
+ };
+
+ useEffect(() => {
+ const currentIndex = getCurrentIndex();
+ if (currentIndex !== activeIndex && !pauseSync) {
+ devTools.update(INDEX_KEY, { index: currentIndex });
+ }
+ }, [time]);
+
+ const cache = new CellMeasurerCache({
+ fixedWidth: true,
+ keyMapper: (index: number) => filteredList[index],
+ });
+ const _list = React.useRef();
+
+ const showDetails = (log: any) => {
+ setIsDetailsModalActive(true);
+ showModal(
, { right: true, onClose: removePause });
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(log) });
+ setPauseSync(true);
+ };
+
+ const _rowRenderer = ({ index, key, parent, style }: any) => {
+ const item = filteredList[index];
+
+ return (
+ // @ts-ignore
+
+ {({ measure }: any) => (
+ showDetails(item)}
+ recalcHeight={() => {
+ measure();
+ (_list as any).current.recomputeRowHeights(index);
+ }}
+ />
+ )}
+
+ );
+ };
+
+ React.useMemo(() => {
const filterRE = getRE(filter, 'i');
let list = logs;
@@ -82,14 +186,23 @@ function ConsolePanel() {
(!!filter ? filterRE.test(value) : true) &&
(activeTab === ALL || activeTab === LEVEL_TAB[level])
);
- return list;
- }, [filter, activeTab]);
+ setFilteredList(list);
+ }, [logs, filter, activeTab]);
- const onTabClick = (activeTab: any) => setActiveTab(activeTab);
- const onFilterChange = ({ target: { value } }: any) => setFilter(value);
+ useEffect(() => {
+ if (_list.current) {
+ // @ts-ignore
+ _list.current.scrollToRow(activeIndex);
+ }
+ }, [activeIndex]);
return (
-
+ setPauseSync(true)}
+ onMouseLeave={onMouseLeave}
+ >
+ {/* @ts-ignore */}
Console
@@ -103,8 +216,11 @@ function ConsolePanel() {
name="filter"
height={28}
onChange={onFilterChange}
+ value={filter}
/>
+ {/* @ts-ignore */}
+ {/* @ts-ignore */}
}
size="small"
- show={filtered.length === 0}
+ show={filteredList.length === 0}
>
- {/* */}
- {filtered.map((l: any, index: any) => (
- */}
+ {/* @ts-ignore */}
+
+ {({ height, width }: any) => (
+ // @ts-ignore
+
+ )}
+
+ {/* @ts-ignore */}
);
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index 145f14640..83929cbed 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -1,43 +1,43 @@
import React, { useState } from 'react';
import cn from 'classnames';
-// import stl from '../console.module.css';
import { Icon } from 'UI';
import JumpButton from 'Shared/DevTools/JumpButton';
-import { useModal } from 'App/components/Modal';
-import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
interface Props {
log: any;
iconProps: any;
jump?: any;
renderWithNL?: any;
+ style?: any;
+ recalcHeight?: () => void;
+ onClick: () => void;
}
function ConsoleRow(props: Props) {
- const { log, iconProps, jump, renderWithNL } = props;
- const { showModal } = useModal();
+ const { log, iconProps, jump, renderWithNL, style, recalcHeight } = props;
const [expanded, setExpanded] = useState(false);
const lines = log.value.split('\n').filter((l: any) => !!l);
const canExpand = lines.length > 1;
const clickable = canExpand || !!log.errorId;
- const onErrorClick = () => {
- showModal(
, { right: true });
+ const toggleExpand = () => {
+ setExpanded(!expanded);
+ setTimeout(() => recalcHeight(), 0);
};
return (
(!!log.errorId ? onErrorClick() : setExpanded(!expanded)) : () => {}
- }
+ onClick={clickable ? () => (!!log.errorId ? props.onClick() : toggleExpand()) : () => {}}
>
{renderWithNL(lines.pop())}
- {canExpand && expanded && lines.map((l: any) =>
{l}
)}
+ {canExpand &&
+ expanded &&
+ lines.map((l: string, i: number) => (
+
+ {l}
+
+ ))}
jump(log.time)} />
diff --git a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
index c52b0cffd..31307fd9b 100644
--- a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
+++ b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
@@ -6,10 +6,10 @@ interface Props {
tooltip?: string;
}
function JumpButton(props: Props) {
- const { tooltip = '' } = props;
+ const { tooltip } = props;
return (
-
+
{
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 444d448fc..5301066cb 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
import { getRE } from 'App/utils';
import Resource, { TYPES } from 'Types/session/resource';
@@ -13,6 +13,9 @@ import { useModal } from 'App/components/Modal';
import FetchDetailsModal from 'Shared/FetchDetailsModal';
import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+
+const INDEX_KEY = 'network';
const ALL = 'ALL';
const XHR = 'xhr';
@@ -72,7 +75,7 @@ function renderSize(r: any) {
if (r.responseBodySize) return formatBytes(r.responseBodySize);
let triggerText;
let content;
- if (r.decodedBodySize == null) {
+ if (r.decodedBodySize == null || r.decodedBodySize === 0) {
triggerText = 'x';
content = 'Not captured';
} else {
@@ -120,6 +123,19 @@ export function renderDuration(r: any) {
);
}
+interface Props {
+ location: any;
+ resources: any;
+ fetchList: any;
+ domContentLoadedTime: any;
+ loadTime: any;
+ playing: boolean;
+ domBuildingTime: any;
+ time: any;
+}
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+
function NetworkPanel() {
const { player, store } = React.useContext(PlayerContext)
@@ -127,48 +143,104 @@ function NetworkPanel() {
resourceList: resources,
domContentLoadedTime,
loadTime,
+ time,
domBuildingTime,
fetchList: fetchUnmap,
} = store.get();
- const fetchList = fetchUnmap.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR }))
+ const fetchList = fetchUnmap.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR, time: i.time < 0 ? 0 : i.time }))
- const { showModal, hideModal } = useModal();
- const [activeTab, setActiveTab] = useState(ALL);
+ const { showModal } = useModal();
const [sortBy, setSortBy] = useState('time');
const [sortAscending, setSortAscending] = useState(true);
- const [filter, setFilter] = useState('');
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
- const onTabClick = (activeTab: any) => setActiveTab(activeTab);
- const onFilterChange = ({ target: { value } }: any) => setFilter(value);
+
+ const [filteredList, setFilteredList] = useState([]);
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
const additionalHeight = 0;
const fetchPresented = fetchList.length > 0;
+ const {
+ sessionStore: { devTools },
+ } = useStore();
+ const filter = devTools[INDEX_KEY].filter;
+ const activeTab = devTools[INDEX_KEY].activeTab;
+ const activeIndex = devTools[INDEX_KEY].index;
+ const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+ const synRef: any = useRef({});
- const resourcesSize = resources.reduce(
- (sum: any, { decodedBodySize }: any) => sum + (decodedBodySize || 0),
- 0
- );
+ const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({ target: { value } }: any) => {
+ devTools.update(INDEX_KEY, { filter: value });
+ };
- const transferredSize = resources.reduce(
- (sum: any, { headerSize, encodedBodySize }: any) =>
- sum + (headerSize || 0) + (encodedBodySize || 0),
- 0
- );
+ synRef.current = {
+ pauseSync,
+ activeIndex,
+ };
- const filterRE = getRE(filter, 'i');
- let filtered = React.useMemo(() => {
+ const removePause = () => {
+ setIsDetailsModalActive(false);
+ clearTimeout(timeOut);
+ timeOut = setTimeout(() => {
+ devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+ setPauseSync(false);
+ }, TIMEOUT_DURATION);
+ };
+
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) return;
+ removePause();
+ };
+
+ useEffect(() => {
+ if (pauseSync) {
+ removePause();
+ }
+
+ return () => {
+ clearTimeout(timeOut);
+ if (!synRef.current.pauseSync) {
+ devTools.update(INDEX_KEY, { index: 0 });
+ }
+ };
+ }, []);
+
+ const getCurrentIndex = () => {
+ return filteredList.filter((item: any) => item.time <= time).length - 1;
+ };
+
+ useEffect(() => {
+ const currentIndex = getCurrentIndex();
+ if (currentIndex !== activeIndex && !pauseSync) {
+ devTools.update(INDEX_KEY, { index: currentIndex });
+ }
+ }, [time]);
+
+ const { resourcesSize, transferredSize } = useMemo(() => {
+ const resourcesSize = resources.reduce(
+ (sum: any, { decodedBodySize }: any) => sum + (decodedBodySize || 0),
+ 0
+ );
+
+ const transferredSize = resources.reduce(
+ (sum: any, { headerSize, encodedBodySize }: any) =>
+ sum + (headerSize || 0) + (encodedBodySize || 0),
+ 0
+ );
+ return {
+ resourcesSize,
+ transferredSize,
+ };
+ }, [resources]);
+
+ useEffect(() => {
+ const filterRE = getRE(filter, 'i');
let list = resources;
fetchList.forEach(
(fetchCall: any) =>
(list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
);
+ // @ts-ignore
list = list.concat(fetchList);
- list = list.sort((a: any, b: any) => {
- return compare(a, b, sortBy);
- });
-
- if (!sortAscending) {
- list = list.reverse();
- }
list = list.filter(
({ type, name, status, success }: any) =>
@@ -176,41 +248,53 @@ function NetworkPanel() {
(activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
(showOnlyErrors ? parseInt(status) >= 400 || !success : true)
);
- return list;
- }, [filter, sortBy, sortAscending, showOnlyErrors, activeTab]);
+ setFilteredList(list);
+ }, [resources, filter, showOnlyErrors, activeTab]);
- // const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
- const referenceLines = [];
- if (domContentLoadedTime != null) {
- referenceLines.push({
- time: domContentLoadedTime.time,
- color: DOM_LOADED_TIME_COLOR,
- });
- }
- if (loadTime != null) {
- referenceLines.push({
- time: loadTime.time,
- color: LOAD_TIME_COLOR,
- });
- }
+ const referenceLines = useMemo(() => {
+ const arr = [];
- const onRowClick = (row: any) => {
- showModal(
, {
- right: true,
- });
- };
-
- const handleSort = (sortKey: string) => {
- if (sortKey === sortBy) {
- setSortAscending(!sortAscending);
- // setSortBy('time');
+ if (domContentLoadedTime != null) {
+ arr.push({
+ time: domContentLoadedTime.time,
+ color: DOM_LOADED_TIME_COLOR,
+ });
}
- setSortBy(sortKey);
+ if (loadTime != null) {
+ arr.push({
+ time: loadTime.time,
+ color: LOAD_TIME_COLOR,
+ });
+ }
+
+ return arr;
+ }, []);
+
+ const showDetailsModal = (row: any) => {
+ setIsDetailsModalActive(true);
+ showModal(
+
,
+ {
+ right: true,
+ onClose: removePause,
+ }
+ );
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
+ setPauseSync(true);
};
+ useEffect(() => {
+ devTools.update(INDEX_KEY, { filter, activeTab });
+ }, [filter, activeTab]);
+
return (
-
+ setPauseSync(true)}
+ onMouseLeave={onMouseLeave}
+ >
Network
@@ -231,6 +315,7 @@ function NetworkPanel() {
onChange={onFilterChange}
height={28}
width={230}
+ value={filter}
/>
@@ -244,7 +329,7 @@ function NetworkPanel() {
/>
-
}
size="small"
- show={filtered.length === 0}
+ show={filteredList.length === 0}
>
player.jump(t)}
sortBy={sortBy}
sortAscending={sortAscending}
- // activeIndex={lastIndex}
+ onJump={(row: any) => {
+ setPauseSync(true);
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
+ player.jump(row.time);
+ }}
+ activeIndex={activeIndex}
>
{[
// {
@@ -305,28 +394,24 @@ function NetworkPanel() {
label: 'Status',
dataKey: 'status',
width: 70,
- onClick: handleSort,
},
{
label: 'Type',
dataKey: 'type',
width: 90,
render: renderType,
- onClick: handleSort,
},
{
label: 'Name',
width: 240,
dataKey: 'name',
render: renderName,
- onClick: handleSort,
},
{
label: 'Size',
width: 80,
dataKey: 'decodedBodySize',
render: renderSize,
- onClick: handleSort,
hidden: activeTab === XHR,
},
{
@@ -334,7 +419,6 @@ function NetworkPanel() {
width: 80,
dataKey: 'duration',
render: renderDuration,
- onClick: handleSort,
},
]}
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
new file mode 100644
index 000000000..557c72172
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { hideHint } from 'Duck/components/player';
+import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
+import { getRE } from 'App/utils';
+import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+
+import BottomBlock from '../BottomBlock';
+import { connectPlayer, jump } from 'Player';
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
+import { connect } from 'react-redux';
+import StackEventRow from 'Shared/DevTools/StackEventRow';
+import StackEventModal from '../StackEventModal';
+
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+const INDEX_KEY = 'stackEvent';
+const ALL = 'ALL';
+const TABS = [ALL, ...typeList].map((tab) => ({ text: tab, key: tab }));
+
+interface Props {
+ list: any;
+ hideHint: any;
+ time: any;
+}
+function StackEventPanel(props: Props) {
+ const { list, time } = props;
+ const additionalHeight = 0;
+ const {
+ sessionStore: { devTools },
+ } = useStore();
+ const { showModal } = useModal();
+ const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+ const [filteredList, setFilteredList] = useState([]);
+ const filter = useObserver(() => devTools[INDEX_KEY].filter);
+ const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
+ const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
+ const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+ const synRef: any = useRef({});
+ synRef.current = {
+ pauseSync,
+ activeIndex,
+ };
+ const _list = React.useRef();
+
+ const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+ const onFilterChange = ({ target: { value } }: any) => {
+ devTools.update(INDEX_KEY, { filter: value });
+ };
+
+ const getCurrentIndex = () => {
+ return filteredList.filter((item: any) => item.time <= time).length - 1;
+ };
+
+ const removePause = () => {
+ clearTimeout(timeOut);
+ setIsDetailsModalActive(false);
+ timeOut = setTimeout(() => {
+ devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+ setPauseSync(false);
+ }, TIMEOUT_DURATION);
+ };
+
+ useEffect(() => {
+ const currentIndex = getCurrentIndex();
+ if (currentIndex !== activeIndex && !pauseSync) {
+ devTools.update(INDEX_KEY, { index: currentIndex });
+ }
+ }, [time]);
+
+ const onMouseLeave = () => {
+ if (isDetailsModalActive) return;
+ removePause();
+ };
+
+ React.useMemo(() => {
+ const filterRE = getRE(filter, 'i');
+ let list = props.list;
+
+ list = list.filter(
+ ({ name, source }: any) =>
+ (!!filter ? filterRE.test(name) : true) && (activeTab === ALL || activeTab === source)
+ );
+
+ setFilteredList(list);
+ }, [filter, activeTab]);
+
+ const tabs = useMemo(() => {
+ return TABS.filter(({ key }) => key === ALL || list.some(({ source }: any) => key === source));
+ }, []);
+
+ const cache = new CellMeasurerCache({
+ fixedWidth: true,
+ keyMapper: (index: number) => filteredList[index],
+ });
+
+ const showDetails = (item: any) => {
+ setIsDetailsModalActive(true);
+ showModal(
+ {() => (
+ {
+ setPauseSync(true);
+ devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
+ jump(item.time);
+ }}
+ onClick={() => showDetails(item)}
+ />
+ )}
+
+ );
+ };
+
+ useEffect(() => {
+ if (_list.current) {
+ // @ts-ignore
+ _list.current.scrollToRow(activeIndex);
+ }
+ }, [activeIndex]);
+
+ return (
+ setPauseSync(true)}
+ onMouseLeave={onMouseLeave}
+ >
+
+
+ Stack Events
+
+
+
+
+
+ {({ height, width }: any) => (
+
+ )}
+
+
+
+
+ );
+}
+
+export default connect(
+ (state: any) => ({
+ hintIsHidden:
+ state.getIn(['components', 'player', 'hiddenHints', 'stack']) ||
+ !state.getIn(['site', 'list']).some((s: any) => s.stackIntegrations),
+ }),
+ { hideHint }
+)(
+ connectPlayer((state: any) => ({
+ list: state.stackList,
+ time: state.time,
+ }))(StackEventPanel)
+);
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/index.ts b/frontend/app/components/shared/DevTools/StackEventPanel/index.ts
new file mode 100644
index 000000000..bb0ca8cb6
--- /dev/null
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/index.ts
@@ -0,0 +1 @@
+export { default } from './StackEventPanel';
diff --git a/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx b/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx
index b6b1a8a6f..0d2eeb554 100644
--- a/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx
@@ -3,21 +3,18 @@ import JumpButton from '../JumpButton';
import { Icon } from 'UI';
import cn from 'classnames';
import { OPENREPLAY, SENTRY, DATADOG, STACKDRIVER } from 'Types/session/stackEvent';
-import { useModal } from 'App/components/Modal';
-import StackEventModal from '../StackEventModal';
interface Props {
event: any;
onJump: any;
+ style?: any;
+ isActive?: boolean;
+ onClick?: any;
}
function StackEventRow(props: Props) {
- const { event, onJump } = props;
+ const { event, onJump, style, isActive } = props;
let message = event.payload[0] || '';
message = typeof message === 'string' ? message : JSON.stringify(message);
- const onClickDetails = () => {
- showModal(
diff --git a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
index 2b151cf14..f283eb7ac 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
@@ -27,6 +27,40 @@ const BarRow = ({
}: Props) => {
const timeOffset = time - timestart;
ttfb = ttfb || 0;
+ // TODO fix the tooltip
+
+ const content = (
+
+ {ttfb != null && (
+
+
{'Waiting (TTFB)'}
+
+
{formatTime(ttfb)}
+
+
{'Content Download'}
+
+
{formatTime(duration - ttfb)}
+
+ );
const trigger = (
-
- {ttfb != null && (
-
-
{'Waiting (TTFB)'}
-
-
{formatTime(ttfb)}
-
-
{'Content Download'}
-
-
{formatTime(duration - ttfb)}
-
+
+ {trigger}
);
};
diff --git a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
index 2b242f331..8271a6561 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
@@ -72,8 +72,6 @@ type Props = {
hoverable?: boolean;
onRowClick?: (row: any, index: number) => void;
onJump?: (time: any) => void;
- sortBy?: string;
- sortAscending?: boolean;
};
type TimeLineInfo = {
@@ -145,8 +143,19 @@ export default class TimeTable extends React.PureComponent
{
scroller = React.createRef();
autoScroll = true;
- componentDidMount() {
- if (this.scroller.current) {
+ // componentDidMount() {
+ // if (this.scroller.current) {
+ // this.scroller.current.scrollToRow(this.props.activeIndex);
+ // }
+ // }
+
+ adjustScroll(prevActiveIndex: number) {
+ if (
+ this.props.activeIndex &&
+ this.props.activeIndex >= 0 &&
+ prevActiveIndex !== this.props.activeIndex &&
+ this.scroller.current
+ ) {
this.scroller.current.scrollToRow(this.props.activeIndex);
}
}
@@ -161,14 +170,8 @@ export default class TimeTable extends React.PureComponent {
...computeTimeLine(this.props.rows, this.state.firstVisibleRowIndex, this.visibleCount),
});
}
- if (
- this.props.activeIndex &&
- this.props.activeIndex >= 0 &&
- prevProps.activeIndex !== this.props.activeIndex &&
- this.scroller.current
- ) {
- this.scroller.current.scrollToRow(this.props.activeIndex);
- }
+
+ // this.adjustScroll(prevProps.activeIndex);
}
onScroll = ({
@@ -190,7 +193,7 @@ export default class TimeTable extends React.PureComponent {
onJump = (index: any) => {
if (this.props.onJump) {
- this.props.onJump(this.props.rows[index].time);
+ this.props.onJump(this.props.rows[index]);
}
};
@@ -203,23 +206,29 @@ export default class TimeTable extends React.PureComponent {
activeIndex,
- })}
+ className={cn(
+ 'dev-row border-b border-color-gray-light-shade group items-center',
+ stl.row,
+ {
+ [stl.hoverable]: hoverable,
+ 'error color-red': !!row.isRed && row.isRed(),
+ 'cursor-pointer': typeof onRowClick === 'function',
+ [stl.activeRow]: activeIndex === index,
+ // [stl.inactiveRow]: !activeIndex || index > activeIndex,
+ }
+ )}
onClick={typeof onRowClick === 'function' ? () => onRowClick(row, index) : undefined}
id="table-row"
>
- {columns.filter((i: any) => !i.hidden).map(({ dataKey, render, width }) => (
-
- {render
- ? render(row)
- : row[dataKey || ''] || {'empty'} }
-
- ))}
+ {columns
+ .filter((i: any) => !i.hidden)
+ .map(({ dataKey, render, width }) => (
+
+ {render
+ ? render(row)
+ : row[dataKey || ''] || {'empty'} }
+
+ ))}
@@ -270,8 +279,6 @@ export default class TimeTable extends React.PureComponent
{
referenceLines = [],
additionalHeight = 0,
activeIndex,
- sortBy = '',
- sortAscending = true,
} = this.props;
const columns = this.props.children.filter((i: any) => !i.hidden);
const { timewidth, timestart } = this.state;
@@ -324,10 +331,9 @@ export default class TimeTable extends React.PureComponent {
'cursor-pointer': typeof onClick === 'function',
})}
style={{ width: `${width}px` }}
- onClick={() => this.onColumnClick(dataKey, onClick)}
+ // onClick={() => this.onColumnClick(dataKey, onClick)}
>
{label}
- {!!sortBy && sortBy === dataKey &&
@@ -360,6 +366,7 @@ export default class TimeTable extends React.PureComponent
{
{({ width }: { width: number }) => (
{
rowHeight={ROW_HEIGHT}
rowRenderer={this.renderRow}
onScroll={this.onScroll}
- scrollToAlignment="start"
+ scrollToAlignment="center"
forceUpdateProp={timestart | timewidth | (activeIndex || 0)}
/>
)}
diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
index 2121c9aa1..bcee5f5b9 100644
--- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
@@ -4,6 +4,7 @@ import { Button } from 'UI';
import FetchPluginMessage from './components/FetchPluginMessage';
import { TYPES } from 'Types/session/resource';
import FetchTabs from './components/FetchTabs/FetchTabs';
+import { useStore } from 'App/mstore';
interface Props {
resource: any;
@@ -15,6 +16,10 @@ function FetchDetailsModal(props: Props) {
const [resource, setResource] = useState(props.resource);
const [first, setFirst] = useState(false);
const [last, setLast] = useState(false);
+ const isXHR = resource.type === TYPES.XHR || resource.type === TYPES.FETCH;
+ const {
+ sessionStore: { devTools },
+ } = useStore();
useEffect(() => {
const index = rows.indexOf(resource);
@@ -27,6 +32,7 @@ function FetchDetailsModal(props: Props) {
const index = rows.indexOf(resource);
if (index > 0) {
setResource(rows[index - 1]);
+ devTools.update('network', { index: index - 1 })
}
};
@@ -34,6 +40,7 @@ function FetchDetailsModal(props: Props) {
const index = rows.indexOf(resource);
if (index < rows.length - 1) {
setResource(rows[index + 1]);
+ devTools.update('network', { index: index + 1 })
}
};
@@ -42,9 +49,8 @@ function FetchDetailsModal(props: Props) {
Network Request
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
index 6c81a744c..49e16c00f 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
@@ -1,20 +1,27 @@
-import React from 'react';
-import { Icon } from 'UI';
+import React, { useMemo } from 'react';
import { formatBytes } from 'App/utils';
import CopyText from 'Shared/CopyText';
-import { TYPES } from 'Types/session/resource';
+import cn from 'classnames';
interface Props {
resource: any;
}
function FetchBasicDetails({ resource }: Props) {
const _duration = parseInt(resource.duration);
+ const text = useMemo(() => {
+ if (resource.url.length > 50) {
+ const endText = resource.url.split('/').pop();
+ return resource.url.substring(0, 50 - endText.length) + '.../' + endText;
+ }
+ return resource.url;
+ }, [resource]);
+
return (
Name
- {resource.name}
+ {text}
@@ -46,7 +53,12 @@ function FetchBasicDetails({ resource }: Props) {
{resource.status && (
Status
-
+
{resource.status === '200' && (
)}
diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx
index 647ee68bd..f2624b460 100644
--- a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx
+++ b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx
@@ -49,10 +49,12 @@ const SessionSearchQueryParamHandler = React.memo((props: Props) => {
} else {
const _filters: any = { ...filtersMap };
const _filter = _filters[key];
- _filter.value = valueArr;
- _filter.operator = operator;
- _filter.source = sourceArr;
- props.addFilter(_filter);
+ if (!!_filter) {
+ _filter.value = valueArr;
+ _filter.operator = operator;
+ _filter.source = sourceArr;
+ props.addFilter(_filter);
+ }
}
}
};
diff --git a/frontend/app/components/ui/JSONTree/JSONTree.js b/frontend/app/components/ui/JSONTree/JSONTree.js
index dc6ab786c..b94324ebd 100644
--- a/frontend/app/components/ui/JSONTree/JSONTree.js
+++ b/frontend/app/components/ui/JSONTree/JSONTree.js
@@ -8,7 +8,7 @@ function updateObjectLink(obj) {
}
export default ({ src, ...props }) => (
-
(
iconStle="triangle"
{ ...props }
/>
-);
\ No newline at end of file
+);
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 58e73ad61..50a451917 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -256,7 +256,7 @@ const SVG = (props: Props) => {
case 'id-card': return {
+ return new Promise((resolve, reject) => {
+ sessionService
+ .getSessions(filter.toJson())
+ .then((response: any) => {
+ resolve({
+ sessions: response.sessions.map((session: any) => new Session().fromJson(session)),
+ total: response.total,
+ });
+ })
+ .catch((error: any) => {
+ reject(error);
});
- }
-
- resetUserFilter() {
- this.userFilter = new UserFilter();
- }
-
- getSessions(filter: any): Promise {
- return new Promise((resolve, reject) => {
- sessionService
- .getSessions(filter.toJson())
- .then((response: any) => {
- resolve({
- sessions: response.sessions.map((session: any) => new Session().fromJson(session)),
- total: response.total,
- });
- })
- .catch((error: any) => {
- reject(error);
- });
- });
- }
+ });
+ }
}
diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts
index 85cbb7a64..7d79bb402 100644
--- a/frontend/app/mstore/types/funnelStage.ts
+++ b/frontend/app/mstore/types/funnelStage.ts
@@ -24,10 +24,11 @@ export default class FunnelStage {
}
fromJSON(json: any, total: number = 0, previousSessionCount: number = 0) {
- this.dropDueToIssues = json.dropDueToIssues;
+ previousSessionCount = previousSessionCount || 0;
+ this.dropDueToIssues = json.dropDueToIssues || 0;
this.dropPct = json.dropPct;
this.operator = json.operator;
- this.sessionsCount = json.sessionsCount;
+ this.sessionsCount = json.sessionsCount || 0;
this.usersCount = json.usersCount;
this.value = json.value;
this.type = json.type;
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index c43cf76e2..68e2813f4 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -6,7 +6,7 @@ import Session from "App/mstore/types/session";
import Funnelissue from 'App/mstore/types/funnelIssue';
import { issueOptions } from 'App/constants/filterOptions';
import { FilterKey } from 'Types/filter/filterType';
-import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
+import Period, { LAST_24_HOURS } from 'Types/app/period';
export default class Widget {
public static get ID_KEY():string { return "metricId" }
diff --git a/frontend/app/player/_singletone.ts b/frontend/app/player/_singletone.ts
index 2449542b6..63d545edd 100644
--- a/frontend/app/player/_singletone.ts
+++ b/frontend/app/player/_singletone.ts
@@ -24,7 +24,7 @@ export function init(session, config, live = false) {
export function clean() {
if (instance === null) return;
instance.clean();
- cleanStore()
+ cleanStore();
instance = null;
}
@@ -88,4 +88,4 @@ export const Controls = {
speedUp,
speedDown,
callPeer
-}
\ No newline at end of file
+}
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index deaf09f11..92c67fd7b 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -24,7 +24,7 @@ import { decryptSessionBytes } from './network/crypto';
import Lists, { INITIAL_STATE as LISTS_INITIAL_STATE, State as ListsState } from './Lists';
-import Screen, {
+import Screen, {
INITIAL_STATE as SCREEN_INITIAL_STATE,
State as ScreenState,
} from './Screen/Screen';
@@ -117,7 +117,7 @@ export default class MessageManager {
private lastMessageInFileTime: number = 0;
constructor(
- private readonly session: any /*Session*/,
+ private readonly session: any /*Session*/,
private readonly state: Store,
private readonly screen: Screen,
initialLists?: Partial
@@ -293,7 +293,7 @@ export default class MessageManager {
/* == REFACTOR_ME == */
const lastLoadedLocationMsg = this.loadedLocationManager.moveGetLast(t, index);
if (!!lastLoadedLocationMsg) {
- // TODO: page-wise resources list // setListsStartTime(lastLoadedLocationMsg.time)
+ // TODO: page-wise resources list // setListsStartTime(lastLoadedLocationMsg.time)
this.navigationStartOffset = lastLoadedLocationMsg.navigationStart - this.sessionStart;
}
const llEvent = this.locationEventManager.moveGetLast(t, index);
@@ -525,7 +525,7 @@ export default class MessageManager {
this.state.update({ cssLoading });
}
- private setSize({ height, width }: { height: number, width: number }) {
+ private setSize({ height, width }: { height: number, width: number }) {
this.screen.scale({ height, width });
this.state.update({ width, height });
diff --git a/frontend/app/player/web/assist/ListWalkerWithMarks.ts b/frontend/app/player/web/assist/ListWalkerWithMarks.ts
new file mode 100644
index 000000000..43c05382b
--- /dev/null
+++ b/frontend/app/player/web/assist/ListWalkerWithMarks.ts
@@ -0,0 +1,42 @@
+import type { Timed } from './types';
+import ListWalker from './ListWalker'
+
+
+type CheckFn = (t: T) => boolean
+
+
+export default class ListWalkerWithMarks extends ListWalker {
+ private _markCountNow: number = 0
+ private _markCount: number = 0
+ constructor(private isMarked: CheckFn, initialList: T[] = []) {
+ super(initialList)
+ this._markCount = initialList.reduce((n, item) => isMarked(item) ? n+1 : n, 0)
+ }
+
+ append(item: T) {
+ if (this.isMarked(item)) { this._markCount++ }
+ super.append(item)
+ }
+
+ protected moveNext() {
+ const val = super.moveNext()
+ if (val && this.isMarked(val)) {
+ this._markCountNow++
+ }
+ return val
+ }
+ protected movePrev() {
+ const val = super.movePrev()
+ if (val && this.isMarked(val)) {
+ this._markCountNow--
+ }
+ return val
+ }
+ get markedCountNow(): number {
+ return this._markCountNow
+ }
+ get markedCount(): number {
+ return this._markCount
+ }
+
+}
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index cce982514..a21cfe239 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -355,4 +355,8 @@ p {
width: 80px;
height: 80px;
transform: rotate(45deg);
+}
+
+.dev-row {
+ transition: all 0.5s;
}
\ No newline at end of file
diff --git a/frontend/app/svg/icons/info-circle.svg b/frontend/app/svg/icons/info-circle.svg
index 035661835..42dc99c8f 100644
--- a/frontend/app/svg/icons/info-circle.svg
+++ b/frontend/app/svg/icons/info-circle.svg
@@ -1,11 +1,4 @@
-
-
-
-
-
-
-
-
+
+
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/helper.js b/frontend/app/types/dashboard/helper.js
index 05e50d757..f6e819da8 100644
--- a/frontend/app/types/dashboard/helper.js
+++ b/frontend/app/types/dashboard/helper.js
@@ -27,7 +27,7 @@ const weekdays = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
// const months = [ "January", "February" ];
export const getTimeString = (ts, period) => {
const date = new Date(ts);
- const diff = period.end - period.start;
+ const diff = period.endTimestamp - period.startTimestamp;
if (diff <= DAY) {
var isPM = date.getHours() >= 12;
return `${ isPM ? date.getHours() - 12 : date.getHours() }:${ startWithZero(date.getMinutes()) } ${isPM? 'pm' : 'am'}`;
diff --git a/frontend/package.json b/frontend/package.json
index af78fbdaf..c4f0a68de 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -91,6 +91,7 @@
"@types/react-dom": "^18.0.4",
"@types/react-redux": "^7.1.24",
"@types/react-router-dom": "^5.3.3",
+ "@types/react-virtualized": "^9.21.21",
"@typescript-eslint/eslint-plugin": "^5.24.0",
"@typescript-eslint/parser": "^5.24.0",
"autoprefixer": "^10.4.7",
diff --git a/peers/package-lock.json b/peers/package-lock.json
index a903cfd08..ce7c3c1c4 100644
--- a/peers/package-lock.json
+++ b/peers/package-lock.json
@@ -10,87 +10,7 @@
"license": "Elastic License 2.0 (ELv2)",
"dependencies": {
"express": "^4.18.1",
- "peer": "^0.6.1"
- }
- },
- "node_modules/@types/body-parser": {
- "version": "1.19.2",
- "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
- "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
- "dependencies": {
- "@types/connect": "*",
- "@types/node": "*"
- }
- },
- "node_modules/@types/connect": {
- "version": "3.4.35",
- "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
- "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
- "dependencies": {
- "@types/node": "*"
- }
- },
- "node_modules/@types/cors": {
- "version": "2.8.12",
- "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
- "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
- },
- "node_modules/@types/express": {
- "version": "4.17.13",
- "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
- "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
- "dependencies": {
- "@types/body-parser": "*",
- "@types/express-serve-static-core": "^4.17.18",
- "@types/qs": "*",
- "@types/serve-static": "*"
- }
- },
- "node_modules/@types/express-serve-static-core": {
- "version": "4.17.30",
- "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
- "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
- "dependencies": {
- "@types/node": "*",
- "@types/qs": "*",
- "@types/range-parser": "*"
- }
- },
- "node_modules/@types/mime": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
- "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
- },
- "node_modules/@types/node": {
- "version": "18.7.16",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
- "integrity": "sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg=="
- },
- "node_modules/@types/qs": {
- "version": "6.9.7",
- "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
- "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
- },
- "node_modules/@types/range-parser": {
- "version": "1.2.4",
- "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
- "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
- },
- "node_modules/@types/serve-static": {
- "version": "1.15.0",
- "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
- "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
- "dependencies": {
- "@types/mime": "*",
- "@types/node": "*"
- }
- },
- "node_modules/@types/ws": {
- "version": "7.4.7",
- "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
- "integrity": "sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==",
- "dependencies": {
- "@types/node": "*"
+ "peer": "^v1.0.0-rc.4"
}
},
"node_modules/accepts": {
@@ -655,17 +575,12 @@
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"node_modules/peer": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/peer/-/peer-0.6.1.tgz",
- "integrity": "sha512-zPJSPoZvo+83sPJNrW8o93QTktx7dKk67965RRDDNAIelWw1ZwE6ZmmhsvRrdNRlK0knQb3rR8GBdZlbWzCYJw==",
+ "version": "1.0.0-rc.4",
+ "resolved": "https://registry.npmjs.org/peer/-/peer-1.0.0-rc.4.tgz",
+ "integrity": "sha512-xaNIDm3yWR5m8cuijK7jEFAMOWqNJDGSVJ0+Y3qKW5XTNYsNWEdqtg/Btq9eznGxTTeqQZGNw/SxwyrCVdmmDg==",
"dependencies": {
- "@types/cors": "^2.8.6",
- "@types/express": "^4.17.3",
- "@types/ws": "^7.2.3",
- "body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
- "uuid": "^3.4.0",
"ws": "^7.2.3",
"yargs": "^15.3.1"
},
@@ -673,7 +588,7 @@
"peerjs": "bin/peerjs"
},
"engines": {
- "node": ">=10"
+ "node": ">=14"
}
},
"node_modules/proxy-addr": {
@@ -894,15 +809,6 @@
"node": ">= 0.4.0"
}
},
- "node_modules/uuid": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
- "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
- "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
- "bin": {
- "uuid": "bin/uuid"
- }
- },
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -989,86 +895,6 @@
}
},
"dependencies": {
- "@types/body-parser": {
- "version": "1.19.2",
- "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
- "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
- "requires": {
- "@types/connect": "*",
- "@types/node": "*"
- }
- },
- "@types/connect": {
- "version": "3.4.35",
- "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
- "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
- "requires": {
- "@types/node": "*"
- }
- },
- "@types/cors": {
- "version": "2.8.12",
- "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
- "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
- },
- "@types/express": {
- "version": "4.17.13",
- "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
- "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
- "requires": {
- "@types/body-parser": "*",
- "@types/express-serve-static-core": "^4.17.18",
- "@types/qs": "*",
- "@types/serve-static": "*"
- }
- },
- "@types/express-serve-static-core": {
- "version": "4.17.30",
- "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
- "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
- "requires": {
- "@types/node": "*",
- "@types/qs": "*",
- "@types/range-parser": "*"
- }
- },
- "@types/mime": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
- "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
- },
- "@types/node": {
- "version": "18.7.16",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
- "integrity": "sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg=="
- },
- "@types/qs": {
- "version": "6.9.7",
- "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
- "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
- },
- "@types/range-parser": {
- "version": "1.2.4",
- "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
- "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
- },
- "@types/serve-static": {
- "version": "1.15.0",
- "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
- "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
- "requires": {
- "@types/mime": "*",
- "@types/node": "*"
- }
- },
- "@types/ws": {
- "version": "7.4.7",
- "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
- "integrity": "sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==",
- "requires": {
- "@types/node": "*"
- }
- },
"accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -1482,17 +1308,12 @@
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"peer": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/peer/-/peer-0.6.1.tgz",
- "integrity": "sha512-zPJSPoZvo+83sPJNrW8o93QTktx7dKk67965RRDDNAIelWw1ZwE6ZmmhsvRrdNRlK0knQb3rR8GBdZlbWzCYJw==",
+ "version": "1.0.0-rc.4",
+ "resolved": "https://registry.npmjs.org/peer/-/peer-1.0.0-rc.4.tgz",
+ "integrity": "sha512-xaNIDm3yWR5m8cuijK7jEFAMOWqNJDGSVJ0+Y3qKW5XTNYsNWEdqtg/Btq9eznGxTTeqQZGNw/SxwyrCVdmmDg==",
"requires": {
- "@types/cors": "^2.8.6",
- "@types/express": "^4.17.3",
- "@types/ws": "^7.2.3",
- "body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
- "uuid": "^3.4.0",
"ws": "^7.2.3",
"yargs": "^15.3.1"
}
@@ -1655,11 +1476,6 @@
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
},
- "uuid": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
- "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
- },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/peers/package.json b/peers/package.json
index 51f37b5fa..a38ad3343 100644
--- a/peers/package.json
+++ b/peers/package.json
@@ -19,6 +19,6 @@
"homepage": "https://github.com/openreplay/openreplay#readme",
"dependencies": {
"express": "^4.18.1",
- "peer": "^0.6.1"
+ "peer": "^v1.0.0-rc.4"
}
}
diff --git a/scripts/helmcharts/openreplay/files/minio.sh b/scripts/helmcharts/openreplay/files/minio.sh
index 0e7b4c506..fc0a7238f 100644
--- a/scripts/helmcharts/openreplay/files/minio.sh
+++ b/scripts/helmcharts/openreplay/files/minio.sh
@@ -5,7 +5,7 @@ set -e
cd /tmp
-buckets=("mobs" "sessions-assets" "static" "sourcemaps" "sessions-mobile-assets" "quickwit" "vault-data")
+buckets=("mobs" "sessions-assets" "sourcemaps" "sessions-mobile-assets" "quickwit" "vault-data")
mc alias set minio http://minio.db.svc.cluster.local:9000 $MINIO_ACCESS_KEY $MINIO_SECRET_KEY
@@ -31,11 +31,14 @@ mc mb minio/${bucket} || true
done
mc ilm import minio/mobs < /tmp/lifecycle.json || true
-# Creating frontend bucket
+#####################################################
+# Creating frontend bucket; Do not change this block!
+# !! PUBLIC BUCKETS !!
+#####################################################
mc mb minio/frontend || true
mc policy set download minio/frontend || true
mc policy set download minio/sessions-assets || true
-mc policy set download minio/static || true
+
}
# /bin/bash kafka.sh migrate $migration_versions
diff --git a/scripts/schema/db/init_dbs/postgresql/1.9.0/1.9.0.sql b/scripts/schema/db/init_dbs/postgresql/1.9.0/1.9.0.sql
index 638d0774b..c4c146d9b 100644
--- a/scripts/schema/db/init_dbs/postgresql/1.9.0/1.9.0.sql
+++ b/scripts/schema/db/init_dbs/postgresql/1.9.0/1.9.0.sql
@@ -60,4 +60,11 @@ BEGIN
END;
$$ LANGUAGE plpgsql;
+DROP INDEX IF EXISTS events_common.requests_url_idx;
+DROP INDEX IF EXISTS events_common.requests_url_gin_idx;
+DROP INDEX IF EXISTS events_common.requests_url_gin_idx2;
+
+DROP INDEX IF EXISTS events.resources_url_gin_idx;
+DROP INDEX IF EXISTS events.resources_url_idx;
+
COMMIT;
\ No newline at end of file
diff --git a/scripts/schema/db/init_dbs/postgresql/init_schema.sql b/scripts/schema/db/init_dbs/postgresql/init_schema.sql
index c58e65d4c..a57978965 100644
--- a/scripts/schema/db/init_dbs/postgresql/init_schema.sql
+++ b/scripts/schema/db/init_dbs/postgresql/init_schema.sql
@@ -596,17 +596,9 @@ $$
query text NULL,
PRIMARY KEY (session_id, timestamp, seq_index)
);
- CREATE INDEX requests_url_idx ON events_common.requests (url);
+
CREATE INDEX requests_duration_idx ON events_common.requests (duration);
- CREATE INDEX requests_url_gin_idx ON events_common.requests USING GIN (url gin_trgm_ops);
CREATE INDEX requests_timestamp_idx ON events_common.requests (timestamp);
- CREATE INDEX requests_url_gin_idx2 ON events_common.requests USING GIN (RIGHT(url, length(url) - (CASE
- WHEN url LIKE 'http://%'
- THEN 7
- WHEN url LIKE 'https://%'
- THEN 8
- ELSE 0 END))
- gin_trgm_ops);
CREATE INDEX requests_timestamp_session_id_failed_idx ON events_common.requests (timestamp, session_id) WHERE success = FALSE;
CREATE INDEX requests_request_body_nn_gin_idx ON events_common.requests USING GIN (request_body gin_trgm_ops) WHERE request_body IS NOT NULL;
CREATE INDEX requests_response_body_nn_gin_idx ON events_common.requests USING GIN (response_body gin_trgm_ops) WHERE response_body IS NOT NULL;
diff --git a/sourcemap-uploader/cli.js b/sourcemap-uploader/cli.js
index 7085f1345..28c167ea3 100755
--- a/sourcemap-uploader/cli.js
+++ b/sourcemap-uploader/cli.js
@@ -55,10 +55,10 @@ dir.addArgument(['-u', '--js-dir-url'], {
// TODO: exclude in dir
-const { command, api_key, project_key, server, verbose, ...args } =
+const { command, api_key, project_key, server, logs, ...args } =
parser.parseArgs();
-global._VERBOSE = !!verbose;
+global._VERBOSE = !!logs;
(command === 'file'
? uploadFile(
diff --git a/sourcemap-uploader/package.json b/sourcemap-uploader/package.json
index e8da522a1..ee495605e 100644
--- a/sourcemap-uploader/package.json
+++ b/sourcemap-uploader/package.json
@@ -1,6 +1,6 @@
{
"name": "@openreplay/sourcemap-uploader",
- "version": "3.0.6",
+ "version": "3.0.7",
"description": "NPM module to upload your JS sourcemaps files to OpenReplay",
"bin": "cli.js",
"main": "index.js",
diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts
index 9c640af29..ce2473ef5 100644
--- a/tracker/tracker/src/main/app/index.ts
+++ b/tracker/tracker/src/main/app/index.ts
@@ -164,7 +164,7 @@ export default class App {
this.worker.onmessage = ({ data }: MessageEvent) => {
if (data === 'restart') {
this.stop(false)
- this.start({ forceNew: true }) // TODO: keep userID & metadata (draw scenarios)
+ this.start({}, true)
} else if (data.type === 'failure') {
this.stop(false)
this._debug('worker_failed', data.reason)
@@ -201,7 +201,6 @@ export default class App {
send(message: Message, urgent = false): void {
if (this.activityState === ActivityState.NotActive) {
- // this.debug.log('SendiTrying to send when not active', message) <- crashing the app
return
}
this.messages.push(message)
@@ -370,7 +369,7 @@ export default class App {
this.sessionStorage.removeItem(this.options.session_reset_key)
}
}
- private _start(startOpts: StartOptions): Promise {
+ private _start(startOpts: StartOptions = {}, resetByWorker = false): Promise {
if (!this.worker) {
return Promise.resolve(UnsuccessfulStart('No worker found: perhaps, CSP is not set.'))
}
@@ -382,9 +381,19 @@ export default class App {
)
}
this.activityState = ActivityState.Starting
+
if (startOpts.sessionHash) {
this.session.applySessionHash(startOpts.sessionHash)
}
+ if (startOpts.forceNew) {
+ // Reset session metadata only if requested directly
+ this.session.reset()
+ }
+ this.session.assign({
+ // MBTODO: maybe it would make sense to `forceNew` if the `userID` was changed
+ userID: startOpts.userID,
+ metadata: startOpts.metadata,
+ })
const timestamp = now()
this.worker.postMessage({
@@ -397,17 +406,9 @@ export default class App {
connAttemptGap: this.options.connAttemptGap,
})
- this.session.update({
- // TODO: transparent "session" module logic AND explicit internal api for plugins.
- // "updating" with old metadata in order to trigger session's UpdateCallbacks.
- // (for the case of internal .start() calls, like on "restart" webworker signal or assistent connection in tracker-assist )
- metadata: startOpts.metadata || this.session.getInfo().metadata,
- userID: startOpts.userID,
- })
-
- const sReset = this.sessionStorage.getItem(this.options.session_reset_key)
+ const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null
this.sessionStorage.removeItem(this.options.session_reset_key)
- const shouldReset = startOpts.forceNew || sReset !== null
+ const needNewSessionID = startOpts.forceNew || lsReset || resetByWorker
return window
.fetch(this.options.ingestPoint + '/v1/web/start', {
@@ -419,7 +420,7 @@ export default class App {
...this.getTrackerInfo(),
timestamp,
userID: this.session.getInfo().userID,
- token: shouldReset ? undefined : this.session.getSessionToken(),
+ token: needNewSessionID ? undefined : this.session.getSessionToken(),
deviceMemory,
jsHeapSizeLimit,
}),
@@ -447,29 +448,33 @@ export default class App {
const {
token,
userUUID,
- sessionID,
projectID,
beaconSizeLimit,
- startTimestamp, // real startTS, derived from sessionID
- delay,
+ delay, // derived from token
+ sessionID, // derived from token
+ startTimestamp, // real startTS (server time), derived from sessionID
} = r
if (
typeof token !== 'string' ||
typeof userUUID !== 'string' ||
- //typeof startTimestamp !== 'number' ||
- //typeof sessionID !== 'string' ||
+ (typeof startTimestamp !== 'number' && typeof startTimestamp !== 'undefined') ||
+ typeof sessionID !== 'string' ||
typeof delay !== 'number' ||
(typeof beaconSizeLimit !== 'number' && typeof beaconSizeLimit !== 'undefined')
) {
return Promise.reject(`Incorrect server response: ${JSON.stringify(r)}`)
}
this.delay = delay
- const prevSessionID = this.session.getInfo().sessionID
- if (prevSessionID && prevSessionID !== sessionID) {
- this.session.reset()
- }
this.session.setSessionToken(token)
- this.session.update({ sessionID, timestamp: startTimestamp || timestamp, projectID }) // TODO: no no-explicit 'any'
+ this.session.assign({
+ sessionID,
+ timestamp: startTimestamp || timestamp,
+ projectID,
+ })
+ // (Re)send Metadata for the case of a new session
+ Object.entries(this.session.getInfo().metadata).forEach(([key, value]) =>
+ this.send(Metadata(key, value)),
+ )
this.localStorage.setItem(this.options.local_uuid_key, userUUID)
this.worker.postMessage({
@@ -506,15 +511,15 @@ export default class App {
})
}
- start(options: StartOptions = {}): Promise {
+ start(...args: Parameters): Promise {
if (!document.hidden) {
- return this._start(options)
+ return this._start(...args)
} else {
return new Promise((resolve) => {
const onVisibilityChange = () => {
if (!document.hidden) {
document.removeEventListener('visibilitychange', onVisibilityChange)
- resolve(this._start(options))
+ resolve(this._start(...args))
}
}
document.addEventListener('visibilitychange', onVisibilityChange)
@@ -538,8 +543,4 @@ export default class App {
}
}
}
- restart() {
- this.stop(false)
- this.start({ forceNew: false })
- }
}
diff --git a/tracker/tracker/src/main/app/session.ts b/tracker/tracker/src/main/app/session.ts
index 5c3db5ac5..4682bcc43 100644
--- a/tracker/tracker/src/main/app/session.ts
+++ b/tracker/tracker/src/main/app/session.ts
@@ -37,7 +37,7 @@ export default class Session {
this.callbacks.forEach((cb) => cb(newInfo))
}
- update(newInfo: Partial): void {
+ assign(newInfo: Partial): void {
if (newInfo.userID !== undefined) {
// TODO clear nullable/undefinable types
this.userID = newInfo.userID