pulled dev
This commit is contained in:
Андрей Бабушкин
commit
7894d10509
38 changed files with 835 additions and 501 deletions
|
|
@ -3,6 +3,7 @@ import withPageTitle from 'HOCs/withPageTitle';
|
|||
import { PageTitle } from 'UI';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useStore } from 'App/mstore';
|
||||
import LanguageSwitcher from "App/components/LanguageSwitcher";
|
||||
import Settings from './Settings';
|
||||
import ChangePassword from './ChangePassword';
|
||||
import styles from './profileSettings.module.css';
|
||||
|
|
@ -20,107 +21,90 @@ function ProfileSettings() {
|
|||
return (
|
||||
<div className="bg-white rounded-lg border shadow-sm p-5">
|
||||
<PageTitle title={<div>{t('Account')}</div>} />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('Profile')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t(
|
||||
'Your email address is your identity on OpenReplay and is used to login.',
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Settings />
|
||||
</div>
|
||||
</div>
|
||||
<Section
|
||||
title={t('Profile')}
|
||||
description={t('Your email address is your identity on OpenReplay and is used to login.')}
|
||||
children={<Settings />}
|
||||
/>
|
||||
|
||||
<div className="border-b my-10" />
|
||||
|
||||
{account.hasPassword && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('Change Password')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t('Updating your password from time to time enhances your account’s security.')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ChangePassword />
|
||||
</div>
|
||||
</div>
|
||||
<Section
|
||||
title={t('Change Password')}
|
||||
description={t('Updating your password from time to time enhaces your account’s security')}
|
||||
children={<ChangePassword />}
|
||||
/>
|
||||
|
||||
<div className="border-b my-10" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('Organization API Key')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t('Your API key gives you access to an extra set of services.')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Api />
|
||||
</div>
|
||||
</div>
|
||||
<Section
|
||||
title={t('Interface Language')}
|
||||
description={t('Select the language in which OpenReplay will appear.')}
|
||||
children={<LanguageSwitcher />}
|
||||
/>
|
||||
|
||||
<Section
|
||||
title={t('Organization API Key')}
|
||||
description={t('Your API key gives you access to an extra set of services.')}
|
||||
children={<Api />}
|
||||
/>
|
||||
|
||||
{isEnterprise && (account.admin || account.superAdmin) && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('Tenant Key')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t('For SSO (SAML) authentication.')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TenantKey />
|
||||
</div>
|
||||
</div>
|
||||
<Section
|
||||
title={t('Tenant Key')}
|
||||
description={t('For SSO (SAML) authentication.')}
|
||||
children={<TenantKey />}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isEnterprise && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('Data Collection')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t('Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<OptOut />
|
||||
</div>
|
||||
</div>
|
||||
<Section
|
||||
title={t('Data Collection')}
|
||||
description={t('Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.')}
|
||||
children={<OptOut />}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{account.license && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{t('License')}</h4>
|
||||
<div className={styles.info}>
|
||||
{t('License key and expiration date.')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Licenses />
|
||||
</div>
|
||||
</div>
|
||||
<Section title={t('License')} description={t('License key and expiration date.')} children={<Licenses />} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, description, children }: {
|
||||
title: string;
|
||||
description: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{title}</h4>
|
||||
<div className={styles.info}>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default withPageTitle('Account - OpenReplay Preferences')(
|
||||
observer(ProfileSettings),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { Button, Dropdown, MenuProps, Space, Typography } from 'antd';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Button, Dropdown, MenuProps, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CaretDownOutlined } from '@ant-design/icons';
|
||||
import { Languages } from 'lucide-react';
|
||||
import { Icon } from '../ui';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
const langs = [
|
||||
{ code: 'en', label: 'English' },
|
||||
|
|
@ -12,14 +10,25 @@ const langs = [
|
|||
{ code: 'ru', label: 'Русский' },
|
||||
{ code: 'zh', label: '中國人' },
|
||||
];
|
||||
const langLabels = {
|
||||
en: 'English',
|
||||
fr: 'Français',
|
||||
es: 'Español',
|
||||
ru: 'Русский',
|
||||
zh: '中國人',
|
||||
}
|
||||
|
||||
function LanguageSwitcher() {
|
||||
const { i18n } = useTranslation();
|
||||
const [selected, setSelected] = React.useState(i18n.language);
|
||||
|
||||
const handleChangeLanguage = useCallback((lang: string) => {
|
||||
i18n.changeLanguage(lang);
|
||||
localStorage.setItem('i18nextLng', lang);
|
||||
}, []);
|
||||
const onChange = (val: string) => {
|
||||
setSelected(val)
|
||||
}
|
||||
const handleChangeLanguage = () => {
|
||||
void i18n.changeLanguage(selected)
|
||||
localStorage.setItem('i18nextLng', selected)
|
||||
}
|
||||
|
||||
const menuItems: MenuProps['items'] = langs.map((lang) => ({
|
||||
key: lang.code,
|
||||
|
|
@ -31,21 +40,31 @@ function LanguageSwitcher() {
|
|||
}));
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: menuItems,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: [i18n.language],
|
||||
style: {
|
||||
maxHeight: 500,
|
||||
overflowY: 'auto',
|
||||
},
|
||||
onClick: (e) => handleChangeLanguage(e.key),
|
||||
}}
|
||||
placement="bottomLeft"
|
||||
>
|
||||
<Button icon={<Languages size={12} />} />
|
||||
</Dropdown>
|
||||
<div className={'flex flex-col gap-2 align-start'}>
|
||||
<div className={'font-semibold'}>{i18n.t('Language')}</div>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: menuItems,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: [i18n.language],
|
||||
style: {
|
||||
maxHeight: 500,
|
||||
overflowY: 'auto',
|
||||
},
|
||||
onClick: (e) => onChange(e.key),
|
||||
}}
|
||||
>
|
||||
<Button>
|
||||
<div className={'flex justify-between items-center gap-8'}>
|
||||
<span>{langLabels[selected]}</span>
|
||||
<ChevronDown size={14} />
|
||||
</div>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Button className={'w-fit'} onClick={handleChangeLanguage}>
|
||||
{i18n.t('Update')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import MobileOnboardingTabs from '../OnboardingTabs/OnboardingMobileTabs';
|
|||
import ProjectFormButton from '../ProjectFormButton';
|
||||
import withOnboarding, { WithOnboardingProps } from '../withOnboarding';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CircleHelp } from 'lucide-react'
|
||||
|
||||
interface Props extends WithOnboardingProps {
|
||||
platforms: Array<{
|
||||
|
|
@ -45,8 +46,8 @@ function InstallOpenReplayTab(props: Props) {
|
|||
</div>
|
||||
<a href={"https://docs.openreplay.com/en/sdk/using-or/"} target="_blank">
|
||||
<Button size={"small"} type={"text"} className="ml-2 flex items-center gap-2">
|
||||
<Icon name={"question-circle"} />
|
||||
<div className={"text-main"}>{t('See Documentation')}</div>
|
||||
<CircleHelp size={14} />
|
||||
<div>{t('See Documentation')}</div>
|
||||
</Button>
|
||||
</a>
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import DocCard from "App/components/shared/DocCard";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Mail } from 'lucide-react'
|
||||
import { CopyButton } from "UI";
|
||||
|
||||
export function CollabCard({ showUserModal }: { showUserModal: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<DocCard title={t('Need help from team member?')}>
|
||||
<div className={'text-main cursor-pointer flex items-center gap-2'} onClick={showUserModal}>
|
||||
<Mail size={14} />
|
||||
<span>
|
||||
{t('Invite and Collaborate')}
|
||||
</span>
|
||||
</div>
|
||||
</DocCard>
|
||||
)
|
||||
}
|
||||
|
||||
export function ProjectKeyCard({ projectKey }: { projectKey: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<DocCard title={t('Project Key')}>
|
||||
<div className="p-2 rounded bg-white flex justify-between items-center">
|
||||
<div className={'font-mono'}>{projectKey}</div>
|
||||
<CopyButton content={projectKey} className={'capitalize font-medium text-neutral-400'} />
|
||||
</div>
|
||||
</DocCard>
|
||||
)
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import DocCard from 'Shared/DocCard/DocCard';
|
|||
import { useModal } from 'App/components/Modal';
|
||||
import UserForm from 'App/components/Client/Users/components/UserForm/UserForm';
|
||||
import AndroidInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs';
|
||||
import { CollabCard, ProjectKeyCard } from "./Callouts";
|
||||
import MobileInstallDocs from './InstallDocs/MobileInstallDocs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
|
@ -39,18 +40,9 @@ function MobileTrackingCodeModal(props: Props) {
|
|||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<DocCard title={t('Need help from team member?')}>
|
||||
<a className="link" onClick={showUserModal}>
|
||||
{t('Invite and Collaborate')}
|
||||
</a>
|
||||
</DocCard>
|
||||
<CollabCard showUserModal={showUserModal} />
|
||||
|
||||
<DocCard title={t('Project Key')}>
|
||||
<div className="p-2 rounded bg-white flex justify-between items-center">
|
||||
{site.projectKey}
|
||||
<CopyButton content={site.projectKey} />
|
||||
</div>
|
||||
</DocCard>
|
||||
<ProjectKeyCard projectKey={site.projectKey} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -62,18 +54,9 @@ function MobileTrackingCodeModal(props: Props) {
|
|||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<DocCard title={t('Need help from team member?')}>
|
||||
<a className="link" onClick={showUserModal}>
|
||||
{t('Invite and Collaborate')}
|
||||
</a>
|
||||
</DocCard>
|
||||
<CollabCard showUserModal={showUserModal} />
|
||||
|
||||
<DocCard title={t('Project Key')}>
|
||||
<div className="p-2 rounded bg-white flex justify-between items-center">
|
||||
{site.projectKey}
|
||||
<CopyButton content={site.projectKey} />
|
||||
</div>
|
||||
</DocCard>
|
||||
<ProjectKeyCard projectKey={site.projectKey} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Tabs, Icon, CopyButton } from 'UI';
|
|||
import DocCard from 'Shared/DocCard/DocCard';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import UserForm from 'App/components/Client/Users/components/UserForm/UserForm';
|
||||
import { CollabCard, ProjectKeyCard } from "./Callouts";
|
||||
import InstallDocs from './InstallDocs';
|
||||
import ProjectCodeSnippet from './ProjectCodeSnippet';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
|
@ -37,20 +38,9 @@ function TrackingCodeModal(props: Props) {
|
|||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<DocCard title="Need help from team member?">
|
||||
<a className="link" onClick={showUserModal}>
|
||||
{t('Invite and Collaborate')}
|
||||
</a>
|
||||
</DocCard>
|
||||
<DocCard title="Project Key">
|
||||
<div className="rounded bg-white px-2 py-1 flex items-center justify-between">
|
||||
<span>{site.projectKey}</span>
|
||||
<CopyButton
|
||||
content={site.projectKey}
|
||||
className="capitalize"
|
||||
/>
|
||||
</div>
|
||||
</DocCard>
|
||||
<CollabCard showUserModal={showUserModal} />
|
||||
|
||||
<ProjectKeyCard projectKey={site.projectKey} />
|
||||
<DocCard title="Other ways to install">
|
||||
<a
|
||||
className="link flex items-center"
|
||||
|
|
@ -77,18 +67,9 @@ function TrackingCodeModal(props: Props) {
|
|||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<DocCard title="Need help from team member?">
|
||||
<a className="link" onClick={showUserModal}>
|
||||
{t('Invite and Collaborate')}
|
||||
</a>
|
||||
</DocCard>
|
||||
<CollabCard showUserModal={showUserModal} />
|
||||
|
||||
<DocCard title="Project Key">
|
||||
<div className="p-2 rounded bg-white flex justify-between items-center">
|
||||
{site.projectKey}
|
||||
<CopyButton content={site.projectKey} />
|
||||
</div>
|
||||
</DocCard>
|
||||
<ProjectKeyCard projectKey={site.projectKey} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ function SideMenu(props: Props) {
|
|||
<Menu
|
||||
mode="inline"
|
||||
onClick={handleClick}
|
||||
style={{ marginTop: '8px', border: 'none' }}
|
||||
style={{ border: 'none' }}
|
||||
selectedKeys={activeTab ? [activeTab] : []}
|
||||
>
|
||||
<Menu.Item
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ function GraphQL({ panelHeight }: { panelHeight: number }) {
|
|||
|
||||
const filterList = (list: any, value: string) => {
|
||||
const filterRE = getRE(value, 'i');
|
||||
const { t } = useTranslation();
|
||||
|
||||
return value
|
||||
? list.filter(
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
/* eslint-disable i18next/no-literal-string */
|
||||
import { ResourceType, Timed } from 'Player';
|
||||
import { WsChannel } from 'Player/web/messages';
|
||||
import MobilePlayer from 'Player/mobile/IOSPlayer';
|
||||
import WebPlayer from 'Player/web/WebPlayer';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import React, {
|
||||
useMemo,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import i18n from 'App/i18n'
|
||||
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import {
|
||||
|
|
@ -12,25 +20,27 @@ import {
|
|||
} from 'App/components/Session/playerContext';
|
||||
import { formatMs } from 'App/date';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { formatBytes } from 'App/utils';
|
||||
import { formatBytes, debounceCall } from 'App/utils';
|
||||
import { Icon, NoContent, Tabs } from 'UI';
|
||||
import { Tooltip, Input, Switch, Form } from 'antd';
|
||||
import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
SearchOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
import FetchDetailsModal from 'Shared/FetchDetailsModal';
|
||||
import { WsChannel } from 'App/player/web/messages';
|
||||
|
||||
import BottomBlock from '../BottomBlock';
|
||||
import InfoLine from '../BottomBlock/InfoLine';
|
||||
import TabSelector from '../TabSelector';
|
||||
import TimeTable from '../TimeTable';
|
||||
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
|
||||
import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
|
||||
import WSPanel from './WSPanel';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { mergeListsWithZoom, processInChunks } from './utils'
|
||||
|
||||
// Constants remain the same
|
||||
const INDEX_KEY = 'network';
|
||||
|
||||
const ALL = 'ALL';
|
||||
const XHR = 'xhr';
|
||||
const JS = 'js';
|
||||
|
|
@ -62,6 +72,9 @@ export const NETWORK_TABS = TAP_KEYS.map((tab) => ({
|
|||
const DOM_LOADED_TIME_COLOR = 'teal';
|
||||
const LOAD_TIME_COLOR = 'red';
|
||||
|
||||
const BATCH_SIZE = 2500;
|
||||
const INITIAL_LOAD_SIZE = 5000;
|
||||
|
||||
export function renderType(r: any) {
|
||||
return (
|
||||
<Tooltip style={{ width: '100%' }} title={<div>{r.type}</div>}>
|
||||
|
|
@ -79,13 +92,17 @@ export function renderName(r: any) {
|
|||
}
|
||||
|
||||
function renderSize(r: any) {
|
||||
const { t } = useTranslation();
|
||||
if (r.responseBodySize) return formatBytes(r.responseBodySize);
|
||||
const t = i18n.t;
|
||||
const notCaptured = t('Not captured');
|
||||
const resSizeStr = t('Resource size')
|
||||
let triggerText;
|
||||
let content;
|
||||
if (r.decodedBodySize == null || r.decodedBodySize === 0) {
|
||||
if (r.responseBodySize) {
|
||||
triggerText = formatBytes(r.responseBodySize);
|
||||
content = undefined;
|
||||
} else if (r.decodedBodySize == null || r.decodedBodySize === 0) {
|
||||
triggerText = 'x';
|
||||
content = t('Not captured');
|
||||
content = notCaptured;
|
||||
} else {
|
||||
const headerSize = r.headerSize || 0;
|
||||
const showTransferred = r.headerSize != null;
|
||||
|
|
@ -100,7 +117,7 @@ function renderSize(r: any) {
|
|||
)} transferred over network`}
|
||||
</li>
|
||||
)}
|
||||
<li>{`${t('Resource size')}: ${formatBytes(r.decodedBodySize)} `}</li>
|
||||
<li>{`${resSizeStr}: ${formatBytes(r.decodedBodySize)} `}</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
@ -168,6 +185,8 @@ function renderStatus({
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
// Main component for Network Panel
|
||||
function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
|
||||
const { player, store } = React.useContext(PlayerContext);
|
||||
const { sessionStore, uiPlayerStore } = useStore();
|
||||
|
|
@ -216,6 +235,7 @@ function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
|
|||
|
||||
const getTabNum = (tab: string) => tabsArr.findIndex((t) => t === tab) + 1;
|
||||
const getTabName = (tabId: string) => tabNames[tabId];
|
||||
|
||||
return (
|
||||
<NetworkPanelComp
|
||||
loadTime={loadTime}
|
||||
|
|
@ -228,8 +248,8 @@ function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
|
|||
resourceListNow={resourceListNow}
|
||||
player={player}
|
||||
startedAt={startedAt}
|
||||
websocketList={websocketList as WSMessage[]}
|
||||
websocketListNow={websocketListNow as WSMessage[]}
|
||||
websocketList={websocketList}
|
||||
websocketListNow={websocketListNow}
|
||||
getTabNum={getTabNum}
|
||||
getTabName={getTabName}
|
||||
showSingleTab={showSingleTab}
|
||||
|
|
@ -269,9 +289,7 @@ function MobileNetworkPanelCont({ panelHeight }: { panelHeight: number }) {
|
|||
resourceListNow={resourceListNow}
|
||||
player={player}
|
||||
startedAt={startedAt}
|
||||
// @ts-ignore
|
||||
websocketList={websocketList}
|
||||
// @ts-ignore
|
||||
websocketListNow={websocketListNow}
|
||||
zoomEnabled={zoomEnabled}
|
||||
zoomStartTs={zoomStartTs}
|
||||
|
|
@ -280,12 +298,35 @@ function MobileNetworkPanelCont({ panelHeight }: { panelHeight: number }) {
|
|||
);
|
||||
}
|
||||
|
||||
type WSMessage = Timed & {
|
||||
channelName: string;
|
||||
data: string;
|
||||
timestamp: number;
|
||||
dir: 'up' | 'down';
|
||||
messageType: string;
|
||||
const useInfiniteScroll = (loadMoreCallback: () => void, hasMore: boolean) => {
|
||||
const observerRef = useRef<IntersectionObserver>(null);
|
||||
const loadingRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0]?.isIntersecting && hasMore) {
|
||||
loadMoreCallback();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
);
|
||||
|
||||
if (loadingRef.current) {
|
||||
observer.observe(loadingRef.current);
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
observerRef.current = observer;
|
||||
|
||||
return () => {
|
||||
if (observerRef.current) {
|
||||
observerRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, [loadMoreCallback, hasMore, loadingRef]);
|
||||
|
||||
return loadingRef;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
|
|
@ -302,8 +343,8 @@ interface Props {
|
|||
resourceList: Timed[];
|
||||
fetchListNow: Timed[];
|
||||
resourceListNow: Timed[];
|
||||
websocketList: Array<WSMessage>;
|
||||
websocketListNow: Array<WSMessage>;
|
||||
websocketList: Array<WsChannel>;
|
||||
websocketListNow: Array<WsChannel>;
|
||||
player: WebPlayer | MobilePlayer;
|
||||
startedAt: number;
|
||||
isMobile?: boolean;
|
||||
|
|
@ -349,107 +390,189 @@ export const NetworkPanelComp = observer(
|
|||
>(null);
|
||||
const { showModal } = useModal();
|
||||
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
|
||||
|
||||
const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [displayedItems, setDisplayedItems] = useState([]);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [summaryStats, setSummaryStats] = useState({
|
||||
resourcesSize: 0,
|
||||
transferredSize: 0,
|
||||
});
|
||||
|
||||
const originalListRef = useRef([]);
|
||||
const socketListRef = useRef([]);
|
||||
|
||||
const {
|
||||
sessionStore: { devTools },
|
||||
} = useStore();
|
||||
const { filter } = devTools[INDEX_KEY];
|
||||
const { activeTab } = devTools[INDEX_KEY];
|
||||
const activeIndex = activeOutsideIndex ?? devTools[INDEX_KEY].index;
|
||||
const [inputFilterValue, setInputFilterValue] = useState(filter);
|
||||
|
||||
const socketList = useMemo(
|
||||
() =>
|
||||
websocketList.filter(
|
||||
(ws, i, arr) =>
|
||||
arr.findIndex((it) => it.channelName === ws.channelName) === i,
|
||||
),
|
||||
[websocketList],
|
||||
const debouncedFilter = useCallback(
|
||||
debounceCall((filterValue) => {
|
||||
devTools.update(INDEX_KEY, { filter: filterValue });
|
||||
}, 300),
|
||||
[],
|
||||
);
|
||||
|
||||
const list = useMemo(
|
||||
() =>
|
||||
// TODO: better merge (with body size info) - do it in player
|
||||
resourceList
|
||||
.filter(
|
||||
(res) =>
|
||||
!fetchList.some((ft) => {
|
||||
// res.url !== ft.url doesn't work on relative URLs appearing within fetchList (to-fix in player)
|
||||
if (res.name === ft.name) {
|
||||
if (res.time === ft.time) return true;
|
||||
if (res.url.includes(ft.url)) {
|
||||
return (
|
||||
Math.abs(res.time - ft.time) < 350 ||
|
||||
Math.abs(res.timestamp - ft.timestamp) < 350
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (res.name !== ft.name) {
|
||||
return false;
|
||||
}
|
||||
if (Math.abs(res.time - ft.time) > 250) {
|
||||
return false;
|
||||
} // TODO: find good epsilons
|
||||
if (Math.abs(res.duration - ft.duration) > 200) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}),
|
||||
)
|
||||
.concat(fetchList)
|
||||
.concat(
|
||||
socketList.map((ws) => ({
|
||||
...ws,
|
||||
type: 'websocket',
|
||||
method: 'ws',
|
||||
url: ws.channelName,
|
||||
name: ws.channelName,
|
||||
status: '101',
|
||||
duration: 0,
|
||||
transferredBodySize: 0,
|
||||
})),
|
||||
)
|
||||
.filter((req) =>
|
||||
zoomEnabled
|
||||
? req.time >= zoomStartTs! && req.time <= zoomEndTs!
|
||||
: true,
|
||||
)
|
||||
.sort((a, b) => a.time - b.time),
|
||||
[resourceList.length, fetchList.length, socketList.length],
|
||||
);
|
||||
|
||||
let filteredList = useMemo(() => {
|
||||
if (!showOnlyErrors) {
|
||||
return list;
|
||||
}
|
||||
return list.filter(
|
||||
(it) => parseInt(it.status) >= 400 || !it.success || it.error,
|
||||
// Process socket lists once
|
||||
useEffect(() => {
|
||||
const uniqueSocketList = websocketList.filter(
|
||||
(ws, i, arr) =>
|
||||
arr.findIndex((it) => it.channelName === ws.channelName) === i,
|
||||
);
|
||||
}, [showOnlyErrors, list]);
|
||||
filteredList = useRegExListFilterMemo(
|
||||
filteredList,
|
||||
(it) => [it.status, it.name, it.type, it.method],
|
||||
filter,
|
||||
);
|
||||
filteredList = useTabListFilterMemo(
|
||||
filteredList,
|
||||
(it) => TYPE_TO_TAB[it.type],
|
||||
ALL,
|
||||
activeTab,
|
||||
);
|
||||
socketListRef.current = uniqueSocketList;
|
||||
}, [websocketList.length]);
|
||||
|
||||
const onTabClick = (activeTab: (typeof TAP_KEYS)[number]) =>
|
||||
// Initial data processing - do this only once when data changes
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
|
||||
// Heaviest operation here, will create a final merged network list
|
||||
const processData = async () => {
|
||||
const fetchUrls = new Set(
|
||||
fetchList.map((ft) => {
|
||||
return `${ft.name}-${Math.floor(ft.time / 100)}-${Math.floor(ft.duration / 100)}`;
|
||||
}),
|
||||
);
|
||||
|
||||
// We want to get resources that aren't in fetch list
|
||||
const filteredResources = await processInChunks(resourceList, (chunk) =>
|
||||
chunk.filter((res: any) => {
|
||||
const key = `${res.name}-${Math.floor(res.time / 100)}-${Math.floor(res.duration / 100)}`;
|
||||
return !fetchUrls.has(key);
|
||||
}),
|
||||
BATCH_SIZE,
|
||||
25,
|
||||
);
|
||||
|
||||
const processedSockets = socketListRef.current.map((ws: any) => ({
|
||||
...ws,
|
||||
type: 'websocket',
|
||||
method: 'ws',
|
||||
url: ws.channelName,
|
||||
name: ws.channelName,
|
||||
status: '101',
|
||||
duration: 0,
|
||||
transferredBodySize: 0,
|
||||
}));
|
||||
|
||||
const mergedList: Timed[] = mergeListsWithZoom(
|
||||
filteredResources as Timed[],
|
||||
fetchList,
|
||||
processedSockets as Timed[],
|
||||
{ enabled: Boolean(zoomEnabled), start: zoomStartTs ?? 0, end: zoomEndTs ?? 0 }
|
||||
)
|
||||
|
||||
originalListRef.current = mergedList;
|
||||
setTotalItems(mergedList.length);
|
||||
|
||||
calculateResourceStats(resourceList);
|
||||
|
||||
// Only display initial chunk
|
||||
setDisplayedItems(mergedList.slice(0, INITIAL_LOAD_SIZE));
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
void processData();
|
||||
}, [
|
||||
resourceList.length,
|
||||
fetchList.length,
|
||||
socketListRef.current.length,
|
||||
zoomEnabled,
|
||||
zoomStartTs,
|
||||
zoomEndTs,
|
||||
]);
|
||||
|
||||
const calculateResourceStats = (resourceList: Record<string, any>) => {
|
||||
setTimeout(() => {
|
||||
let resourcesSize = 0
|
||||
let transferredSize = 0
|
||||
resourceList.forEach(({ decodedBodySize, headerSize, encodedBodySize }: any) => {
|
||||
resourcesSize += decodedBodySize || 0
|
||||
transferredSize += (headerSize || 0) + (encodedBodySize || 0)
|
||||
})
|
||||
|
||||
setSummaryStats({
|
||||
resourcesSize,
|
||||
transferredSize,
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (originalListRef.current.length === 0) return;
|
||||
setIsProcessing(true);
|
||||
const applyFilters = async () => {
|
||||
let filteredItems: any[] = originalListRef.current;
|
||||
|
||||
filteredItems = await processInChunks(filteredItems, (chunk) =>
|
||||
chunk.filter(
|
||||
(it) => {
|
||||
let valid = true;
|
||||
if (showOnlyErrors) {
|
||||
valid = parseInt(it.status) >= 400 || !it.success || it.error
|
||||
}
|
||||
if (filter) {
|
||||
try {
|
||||
const regex = new RegExp(filter, 'i');
|
||||
valid = valid && regex.test(it.status) || regex.test(it.name) || regex.test(it.type) || regex.test(it.method);
|
||||
} catch (e) {
|
||||
valid = valid && String(it.status).includes(filter) || it.name.includes(filter) || it.type.includes(filter) || (it.method && it.method.includes(filter));
|
||||
}
|
||||
}
|
||||
if (activeTab !== ALL) {
|
||||
valid = valid && TYPE_TO_TAB[it.type] === activeTab;
|
||||
}
|
||||
|
||||
return valid;
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
// Update displayed items
|
||||
setDisplayedItems(filteredItems.slice(0, INITIAL_LOAD_SIZE));
|
||||
setTotalItems(filteredItems.length);
|
||||
setIsProcessing(false);
|
||||
};
|
||||
|
||||
void applyFilters();
|
||||
}, [filter, activeTab, showOnlyErrors]);
|
||||
|
||||
const loadMoreItems = useCallback(() => {
|
||||
if (isProcessing) return;
|
||||
|
||||
setIsProcessing(true);
|
||||
setTimeout(() => {
|
||||
setDisplayedItems((prevItems) => {
|
||||
const currentLength = prevItems.length;
|
||||
const newItems = originalListRef.current.slice(
|
||||
currentLength,
|
||||
currentLength + BATCH_SIZE,
|
||||
);
|
||||
return [...prevItems, ...newItems];
|
||||
});
|
||||
setIsProcessing(false);
|
||||
}, 10);
|
||||
}, [isProcessing]);
|
||||
|
||||
const hasMoreItems = displayedItems.length < totalItems;
|
||||
const loadingRef = useInfiniteScroll(loadMoreItems, hasMoreItems);
|
||||
|
||||
const onTabClick = (activeTab) => {
|
||||
devTools.update(INDEX_KEY, { activeTab });
|
||||
const onFilterChange = ({
|
||||
target: { value },
|
||||
}: React.ChangeEvent<HTMLInputElement>) =>
|
||||
devTools.update(INDEX_KEY, { filter: value });
|
||||
};
|
||||
|
||||
const onFilterChange = ({ target: { value } }) => {
|
||||
setInputFilterValue(value)
|
||||
debouncedFilter(value);
|
||||
};
|
||||
|
||||
// AutoScroll
|
||||
const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
|
||||
filteredList,
|
||||
displayedItems,
|
||||
getLastItemTime(fetchListNow, resourceListNow),
|
||||
activeIndex,
|
||||
(index) => devTools.update(INDEX_KEY, { index }),
|
||||
|
|
@ -462,24 +585,6 @@ export const NetworkPanelComp = observer(
|
|||
timeoutStartAutoscroll();
|
||||
};
|
||||
|
||||
const resourcesSize = useMemo(
|
||||
() =>
|
||||
resourceList.reduce(
|
||||
(sum, { decodedBodySize }) => sum + (decodedBodySize || 0),
|
||||
0,
|
||||
),
|
||||
[resourceList.length],
|
||||
);
|
||||
const transferredSize = useMemo(
|
||||
() =>
|
||||
resourceList.reduce(
|
||||
(sum, { headerSize, encodedBodySize }) =>
|
||||
sum + (headerSize || 0) + (encodedBodySize || 0),
|
||||
0,
|
||||
),
|
||||
[resourceList.length],
|
||||
);
|
||||
|
||||
const referenceLines = useMemo(() => {
|
||||
const arr = [];
|
||||
|
||||
|
|
@ -513,7 +618,7 @@ export const NetworkPanelComp = observer(
|
|||
isSpot={isSpot}
|
||||
time={item.time + startedAt}
|
||||
resource={item}
|
||||
rows={filteredList}
|
||||
rows={displayedItems}
|
||||
fetchPresented={fetchList.length > 0}
|
||||
/>,
|
||||
{
|
||||
|
|
@ -525,12 +630,12 @@ export const NetworkPanelComp = observer(
|
|||
},
|
||||
},
|
||||
);
|
||||
devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
|
||||
devTools.update(INDEX_KEY, { index: displayedItems.indexOf(item) });
|
||||
stopAutoscroll();
|
||||
};
|
||||
|
||||
const tableCols = React.useMemo(() => {
|
||||
const cols: any[] = [
|
||||
const tableCols = useMemo(() => {
|
||||
const cols = [
|
||||
{
|
||||
label: t('Status'),
|
||||
dataKey: 'status',
|
||||
|
|
@ -585,7 +690,7 @@ export const NetworkPanelComp = observer(
|
|||
});
|
||||
}
|
||||
return cols;
|
||||
}, [showSingleTab]);
|
||||
}, [showSingleTab, activeTab, t, getTabName, getTabNum, isSpot]);
|
||||
|
||||
return (
|
||||
<BottomBlock
|
||||
|
|
@ -617,7 +722,7 @@ export const NetworkPanelComp = observer(
|
|||
name="filter"
|
||||
onChange={onFilterChange}
|
||||
width={280}
|
||||
value={filter}
|
||||
value={inputFilterValue}
|
||||
size="small"
|
||||
prefix={<SearchOutlined className="text-neutral-400" />}
|
||||
/>
|
||||
|
|
@ -625,7 +730,7 @@ export const NetworkPanelComp = observer(
|
|||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<div className="flex items-center justify-between px-4 border-b bg-teal/5 h-8">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<Form.Item name="show-errors-only" className="mb-0">
|
||||
<label
|
||||
style={{
|
||||
|
|
@ -642,21 +747,29 @@ export const NetworkPanelComp = observer(
|
|||
<span className="text-sm ms-2">4xx-5xx Only</span>
|
||||
</label>
|
||||
</Form.Item>
|
||||
|
||||
{isProcessing && (
|
||||
<span className="text-xs text-gray-500 ml-4">
|
||||
Processing data...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<InfoLine>
|
||||
<InfoLine.Point label={`${totalItems}`} value="requests" />
|
||||
<InfoLine.Point
|
||||
label={`${filteredList.length}`}
|
||||
value=" requests"
|
||||
label={`${displayedItems.length}/${totalItems}`}
|
||||
value="displayed"
|
||||
display={displayedItems.length < totalItems}
|
||||
/>
|
||||
<InfoLine.Point
|
||||
label={formatBytes(transferredSize)}
|
||||
label={formatBytes(summaryStats.transferredSize)}
|
||||
value="transferred"
|
||||
display={transferredSize > 0}
|
||||
display={summaryStats.transferredSize > 0}
|
||||
/>
|
||||
<InfoLine.Point
|
||||
label={formatBytes(resourcesSize)}
|
||||
label={formatBytes(summaryStats.resourcesSize)}
|
||||
value="resources"
|
||||
display={resourcesSize > 0}
|
||||
display={summaryStats.resourcesSize > 0}
|
||||
/>
|
||||
<InfoLine.Point
|
||||
label={formatMs(domBuildingTime)}
|
||||
|
|
@ -679,42 +792,67 @@ export const NetworkPanelComp = observer(
|
|||
/>
|
||||
</InfoLine>
|
||||
</div>
|
||||
<NoContent
|
||||
title={
|
||||
<div className="capitalize flex items-center gap-2">
|
||||
<InfoCircleOutlined size={18} />
|
||||
{t('No Data')}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
|
||||
<p>Processing initial network data...</p>
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
show={filteredList.length === 0}
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
<TimeTable
|
||||
rows={filteredList}
|
||||
tableHeight={panelHeight - 102}
|
||||
referenceLines={referenceLines}
|
||||
renderPopup
|
||||
onRowClick={showDetailsModal}
|
||||
sortBy="time"
|
||||
sortAscending
|
||||
onJump={(row: any) => {
|
||||
devTools.update(INDEX_KEY, {
|
||||
index: filteredList.indexOf(row),
|
||||
});
|
||||
player.jump(row.time);
|
||||
}}
|
||||
activeIndex={activeIndex}
|
||||
</div>
|
||||
) : (
|
||||
<NoContent
|
||||
title={
|
||||
<div className="capitalize flex items-center gap-2">
|
||||
<InfoCircleOutlined size={18} />
|
||||
{t('No Data')}
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
show={displayedItems.length === 0}
|
||||
>
|
||||
{tableCols}
|
||||
</TimeTable>
|
||||
{selectedWsChannel ? (
|
||||
<WSPanel
|
||||
socketMsgList={selectedWsChannel}
|
||||
onClose={() => setSelectedWsChannel(null)}
|
||||
/>
|
||||
) : null}
|
||||
</NoContent>
|
||||
<div>
|
||||
<TimeTable
|
||||
rows={displayedItems}
|
||||
tableHeight={panelHeight - 102 - (hasMoreItems ? 30 : 0)}
|
||||
referenceLines={referenceLines}
|
||||
renderPopup
|
||||
onRowClick={showDetailsModal}
|
||||
sortBy="time"
|
||||
sortAscending
|
||||
onJump={(row) => {
|
||||
devTools.update(INDEX_KEY, {
|
||||
index: displayedItems.indexOf(row),
|
||||
});
|
||||
player.jump(row.time);
|
||||
}}
|
||||
activeIndex={activeIndex}
|
||||
>
|
||||
{tableCols}
|
||||
</TimeTable>
|
||||
|
||||
{hasMoreItems && (
|
||||
<div
|
||||
ref={loadingRef}
|
||||
className="flex justify-center items-center text-xs text-gray-500"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"></div>
|
||||
Loading more data ({totalItems - displayedItems.length}{' '}
|
||||
remaining)
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedWsChannel ? (
|
||||
<WSPanel
|
||||
socketMsgList={selectedWsChannel}
|
||||
onClose={() => setSelectedWsChannel(null)}
|
||||
/>
|
||||
) : null}
|
||||
</NoContent>
|
||||
)}
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
);
|
||||
|
|
@ -722,7 +860,6 @@ export const NetworkPanelComp = observer(
|
|||
);
|
||||
|
||||
const WebNetworkPanel = observer(NetworkPanelCont);
|
||||
|
||||
const MobileNetworkPanel = observer(MobileNetworkPanelCont);
|
||||
|
||||
export { WebNetworkPanel, MobileNetworkPanel };
|
||||
|
|
|
|||
178
frontend/app/components/shared/DevTools/NetworkPanel/utils.ts
Normal file
178
frontend/app/components/shared/DevTools/NetworkPanel/utils.ts
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
export function mergeListsWithZoom<
|
||||
T extends Record<string, any>,
|
||||
Y extends Record<string, any>,
|
||||
Z extends Record<string, any>,
|
||||
>(
|
||||
arr1: T[],
|
||||
arr2: Y[],
|
||||
arr3: Z[],
|
||||
zoom?: { enabled: boolean; start: number; end: number },
|
||||
): Array<T | Y | Z> {
|
||||
// Early return for empty arrays
|
||||
if (arr1.length === 0 && arr2.length === 0 && arr3.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Optimized for common case - no zoom
|
||||
if (!zoom?.enabled) {
|
||||
return mergeThreeSortedArrays(arr1, arr2, arr3);
|
||||
}
|
||||
|
||||
// Binary search for start indexes (faster than linear search for large arrays)
|
||||
const index1 = binarySearchStartIndex(arr1, zoom.start);
|
||||
const index2 = binarySearchStartIndex(arr2, zoom.start);
|
||||
const index3 = binarySearchStartIndex(arr3, zoom.start);
|
||||
|
||||
// Merge arrays within zoom range
|
||||
return mergeThreeSortedArraysWithinRange(
|
||||
arr1,
|
||||
arr2,
|
||||
arr3,
|
||||
index1,
|
||||
index2,
|
||||
index3,
|
||||
zoom.start,
|
||||
zoom.end,
|
||||
);
|
||||
}
|
||||
|
||||
function binarySearchStartIndex<T extends Record<string, any>>(
|
||||
arr: T[],
|
||||
threshold: number,
|
||||
): number {
|
||||
if (arr.length === 0) return 0;
|
||||
|
||||
let low = 0;
|
||||
let high = arr.length - 1;
|
||||
|
||||
// Handle edge cases first for better performance
|
||||
if (arr[high].time < threshold) return arr.length;
|
||||
if (arr[low].time >= threshold) return 0;
|
||||
|
||||
while (low <= high) {
|
||||
const mid = Math.floor((low + high) / 2);
|
||||
|
||||
if (arr[mid].time < threshold) {
|
||||
low = mid + 1;
|
||||
} else {
|
||||
high = mid - 1;
|
||||
}
|
||||
}
|
||||
|
||||
return low;
|
||||
}
|
||||
|
||||
function mergeThreeSortedArrays<
|
||||
T extends Record<string, any>,
|
||||
Y extends Record<string, any>,
|
||||
Z extends Record<string, any>,
|
||||
>(arr1: T[], arr2: Y[], arr3: Z[]): Array<T | Y | Z> {
|
||||
const totalLength = arr1.length + arr2.length + arr3.length;
|
||||
// prealloc array size
|
||||
const result = new Array(totalLength);
|
||||
|
||||
let i = 0,
|
||||
j = 0,
|
||||
k = 0,
|
||||
index = 0;
|
||||
|
||||
while (i < arr1.length || j < arr2.length || k < arr3.length) {
|
||||
const val1 = i < arr1.length ? arr1[i].time : Infinity;
|
||||
const val2 = j < arr2.length ? arr2[j].time : Infinity;
|
||||
const val3 = k < arr3.length ? arr3[k].time : Infinity;
|
||||
|
||||
if (val1 <= val2 && val1 <= val3) {
|
||||
result[index++] = arr1[i++];
|
||||
} else if (val2 <= val1 && val2 <= val3) {
|
||||
result[index++] = arr2[j++];
|
||||
} else {
|
||||
result[index++] = arr3[k++];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// same as above, just with zoom stuff
|
||||
function mergeThreeSortedArraysWithinRange<
|
||||
T extends Record<string, any>,
|
||||
Y extends Record<string, any>,
|
||||
Z extends Record<string, any>,
|
||||
>(
|
||||
arr1: T[],
|
||||
arr2: Y[],
|
||||
arr3: Z[],
|
||||
startIdx1: number,
|
||||
startIdx2: number,
|
||||
startIdx3: number,
|
||||
start: number,
|
||||
end: number,
|
||||
): Array<T | Y | Z> {
|
||||
// we don't know beforehand how many items will be there
|
||||
const result = [];
|
||||
|
||||
let i = startIdx1;
|
||||
let j = startIdx2;
|
||||
let k = startIdx3;
|
||||
|
||||
while (i < arr1.length || j < arr2.length || k < arr3.length) {
|
||||
const val1 = i < arr1.length ? arr1[i].time : Infinity;
|
||||
const val2 = j < arr2.length ? arr2[j].time : Infinity;
|
||||
const val3 = k < arr3.length ? arr3[k].time : Infinity;
|
||||
|
||||
// Early termination: if all remaining values exceed end time
|
||||
if (Math.min(val1, val2, val3) > end) {
|
||||
break;
|
||||
}
|
||||
|
||||
if (val1 <= val2 && val1 <= val3) {
|
||||
if (val1 <= end) {
|
||||
result.push(arr1[i]);
|
||||
}
|
||||
i++;
|
||||
} else if (val2 <= val1 && val2 <= val3) {
|
||||
if (val2 <= end) {
|
||||
result.push(arr2[j]);
|
||||
}
|
||||
j++;
|
||||
} else {
|
||||
if (val3 <= end) {
|
||||
result.push(arr3[k]);
|
||||
}
|
||||
k++;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function processInChunks(
|
||||
items: any[],
|
||||
processFn: (item: any) => any,
|
||||
chunkSize = 1000,
|
||||
overscan = 0,
|
||||
) {
|
||||
return new Promise((resolve) => {
|
||||
if (items.length === 0) {
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
|
||||
let result: any[] = [];
|
||||
let index = 0;
|
||||
|
||||
const processNextChunk = () => {
|
||||
const chunk = items.slice(index, index + chunkSize + overscan);
|
||||
result = result.concat(processFn(chunk));
|
||||
index += chunkSize;
|
||||
|
||||
if (index < items.length) {
|
||||
setTimeout(processNextChunk, 0);
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
};
|
||||
|
||||
processNextChunk();
|
||||
});
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ function DocCard(props: Props) {
|
|||
} = props;
|
||||
|
||||
return (
|
||||
<div className={cn('p-5 bg-gray-lightest mb-4 rounded', className)}>
|
||||
<div className={cn('p-5 bg-gray-lightest mb-4 rounded-lg', className)}>
|
||||
<div className="font-medium mb-2 flex items-center">
|
||||
{props.icon && (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
import { Input } from 'antd';
|
||||
import React from 'react';
|
||||
import { useStore } from 'App/mstore';
|
||||
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import NoSessionsMessage from 'Shared/NoSessionsMessage/NoSessionsMessage';
|
||||
import MainSearchBar from 'Shared/MainSearchBar/MainSearchBar';
|
||||
import usePageTitle from '@/hooks/usePageTitle';
|
||||
|
|
@ -13,22 +9,8 @@ import SessionHeader from './components/SessionHeader';
|
|||
import LatestSessionsMessage from './components/LatestSessionsMessage';
|
||||
|
||||
function SessionsTabOverview() {
|
||||
const [query, setQuery] = React.useState('');
|
||||
const { aiFiltersStore, searchStore } = useStore();
|
||||
const appliedFilter = searchStore.instance;
|
||||
usePageTitle('Sessions - OpenReplay');
|
||||
|
||||
const handleKeyDown = (event: any) => {
|
||||
if (event.key === 'Enter') {
|
||||
fetchResults();
|
||||
}
|
||||
};
|
||||
const fetchResults = () => {
|
||||
void aiFiltersStore.omniSearch(query, appliedFilter.toData());
|
||||
};
|
||||
|
||||
const testingKey =
|
||||
localStorage.getItem('__mauricio_testing_access') === 'true';
|
||||
return (
|
||||
<>
|
||||
<NoSessionsMessage />
|
||||
|
|
@ -36,15 +18,6 @@ function SessionsTabOverview() {
|
|||
<MainSearchBar />
|
||||
<div className="my-4" />
|
||||
<div className="widget-wrapper">
|
||||
{testingKey ? (
|
||||
<Input
|
||||
value={query}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="mb-2"
|
||||
placeholder="ask session ai"
|
||||
/>
|
||||
) : null}
|
||||
<SessionHeader />
|
||||
<div className="border-b" />
|
||||
<LatestSessionsMessage />
|
||||
|
|
@ -59,4 +32,4 @@ export default withPermissions(
|
|||
'',
|
||||
false,
|
||||
false,
|
||||
)(observer(SessionsTabOverview));
|
||||
)(SessionsTabOverview);
|
||||
|
|
|
|||
|
|
@ -20,73 +20,13 @@ const tagIcons = {
|
|||
function SessionTags() {
|
||||
const { t } = useTranslation();
|
||||
const screens = useBreakpoint();
|
||||
const { projectsStore, sessionStore, searchStore } = useStore();
|
||||
const total = sessionStore.total;
|
||||
const { projectsStore, searchStore } = useStore();
|
||||
const platform = projectsStore.active?.platform || '';
|
||||
const activeTab = searchStore.activeTags;
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const filteredOptions = issues_types
|
||||
.filter(
|
||||
(tag) =>
|
||||
tag.type !== 'mouse_thrashing' &&
|
||||
(platform === 'web'
|
||||
? tag.type !== types.TAP_RAGE
|
||||
: tag.type !== types.CLICK_RAGE),
|
||||
)
|
||||
.map((tag) => ({
|
||||
value: tag.type,
|
||||
icon: tagIcons[tag.type],
|
||||
label: t(tag.name),
|
||||
}));
|
||||
|
||||
// Find the currently active option
|
||||
const activeOption =
|
||||
filteredOptions.find((option) => option.value === activeTab[0]) ||
|
||||
filteredOptions[0];
|
||||
|
||||
// Check if on mobile
|
||||
useEffect(() => {
|
||||
const checkIfMobile = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
checkIfMobile();
|
||||
window.addEventListener('resize', checkIfMobile);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkIfMobile);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!(dropdownRef.current as HTMLElement).contains(event.target as Node)
|
||||
) {
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handler for dropdown item selection
|
||||
const handleSelectOption = (value: string) => {
|
||||
searchStore.toggleTag(value as any);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
if (total === 0 && (activeTab.length === 0 || activeTab[0] === 'all')) {
|
||||
return null;
|
||||
}
|
||||
React.useEffect(() => {
|
||||
searchStore.toggleTag(types.ALL);
|
||||
}, [projectsStore.activeSiteId])
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
30
frontend/app/layout/LangBanner.tsx
Normal file
30
frontend/app/layout/LangBanner.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
Languages, X, Info
|
||||
} from 'lucide-react'
|
||||
import { Button } from 'antd';
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { client } from 'App/routes'
|
||||
|
||||
function LangBanner({ onClose }: { onClose: () => void }) {
|
||||
const history = useHistory()
|
||||
|
||||
const onClick = () => {
|
||||
history.push(client('account'))
|
||||
}
|
||||
return (
|
||||
<div className={'px-4 py-2 bg-yellow flex items-center w-screen gap-2'}>
|
||||
<Info size={16} />
|
||||
<div>
|
||||
OpenReplay now supports French, Russian, Chinese, and Spanish 🎉. Update your language in settings.
|
||||
</div>
|
||||
<div className={'ml-auto'} />
|
||||
<Button icon={<Languages size={14} />} size={'small'} onClick={onClick}>
|
||||
Change Language
|
||||
</Button>
|
||||
<Button icon={<X size={16} />} type={'text'} shape={'circle'} onClick={onClose} size={'small'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LangBanner
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Layout, Space, Tooltip } from 'antd';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import React, { useEffect } from 'react';
|
||||
import LangBanner from './LangBanner';
|
||||
|
||||
import { INDEXES } from 'App/constants/zindex';
|
||||
import Logo from 'App/layout/Logo';
|
||||
|
|
@ -11,14 +12,27 @@ import { useTranslation } from 'react-i18next';
|
|||
|
||||
const { Header } = Layout;
|
||||
|
||||
const langBannerClosedKey = '__or__langBannerClosed';
|
||||
const getLangBannerClosed = () => localStorage.getItem(langBannerClosedKey) === '1'
|
||||
function TopHeader() {
|
||||
const { userStore, notificationStore, projectsStore, settingsStore } =
|
||||
useStore();
|
||||
const { account } = userStore;
|
||||
const { siteId } = projectsStore;
|
||||
const { initialDataFetched } = userStore;
|
||||
const [langBannerClosed, setLangBannerClosed] = React.useState(getLangBannerClosed);
|
||||
const { t } = useTranslation();
|
||||
|
||||
React.useEffect(() => {
|
||||
const langBannerVal = localStorage.getItem(langBannerClosedKey);
|
||||
if (langBannerVal === null) {
|
||||
localStorage.setItem(langBannerClosedKey, '0')
|
||||
}
|
||||
if (langBannerVal === '0') {
|
||||
localStorage.setItem(langBannerClosedKey, '1')
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!account.id || initialDataFetched) return;
|
||||
Promise.all([
|
||||
|
|
@ -29,51 +43,58 @@ function TopHeader() {
|
|||
});
|
||||
}, [account]);
|
||||
|
||||
const closeLangBanner = () => {
|
||||
setLangBannerClosed(true);
|
||||
localStorage.setItem(langBannerClosedKey, '1');
|
||||
}
|
||||
return (
|
||||
<Header
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: INDEXES.HEADER,
|
||||
padding: '0 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '60px',
|
||||
}}
|
||||
className="justify-between"
|
||||
>
|
||||
<Space>
|
||||
<div
|
||||
onClick={() => {
|
||||
settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed);
|
||||
}}
|
||||
style={{ paddingTop: '4px' }}
|
||||
className="cursor-pointer xl:block hidden"
|
||||
>
|
||||
<Tooltip
|
||||
title={
|
||||
settingsStore.menuCollapsed ? t('Show Menu') : t('Hide Menu')
|
||||
}
|
||||
mouseEnterDelay={1}
|
||||
<>
|
||||
{langBannerClosed ? null : <LangBanner onClose={closeLangBanner} />}
|
||||
<Header
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: INDEXES.HEADER,
|
||||
padding: '0 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '60px',
|
||||
}}
|
||||
className="justify-between"
|
||||
>
|
||||
<Space>
|
||||
<div
|
||||
onClick={() => {
|
||||
settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed);
|
||||
}}
|
||||
style={{ paddingTop: '4px' }}
|
||||
className="cursor-pointer xl:block hidden"
|
||||
>
|
||||
<Icon
|
||||
name={
|
||||
settingsStore.menuCollapsed
|
||||
? 'side_menu_closed'
|
||||
: 'side_menu_open'
|
||||
<Tooltip
|
||||
title={
|
||||
settingsStore.menuCollapsed ? t('Show Menu') : t('Hide Menu')
|
||||
}
|
||||
size={20}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
mouseEnterDelay={1}
|
||||
>
|
||||
<Icon
|
||||
name={
|
||||
settingsStore.menuCollapsed
|
||||
? 'side_menu_closed'
|
||||
: 'side_menu_open'
|
||||
}
|
||||
size={20}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<Logo siteId={siteId} />
|
||||
</div>
|
||||
</Space>
|
||||
<div className="flex items-center">
|
||||
<Logo siteId={siteId} />
|
||||
</div>
|
||||
</Space>
|
||||
|
||||
<TopRight />
|
||||
</Header>
|
||||
<TopRight />
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,18 +11,13 @@ import ProjectDropdown from 'Shared/ProjectDropdown';
|
|||
import { useStore } from 'App/mstore';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
interface Props {
|
||||
account: any;
|
||||
spotOnly?: boolean;
|
||||
}
|
||||
|
||||
function TopRight(props: Props) {
|
||||
function TopRight() {
|
||||
const { userStore } = useStore();
|
||||
const spotOnly = userStore.scopeState === 1;
|
||||
const { account } = userStore;
|
||||
return (
|
||||
<Space style={{ lineHeight: '0' }}>
|
||||
{props.spotOnly ? null : (
|
||||
{spotOnly ? null : (
|
||||
<>
|
||||
<ProjectDropdown />
|
||||
<GettingStartedProgress />
|
||||
|
|
@ -30,7 +25,6 @@ function TopRight(props: Props) {
|
|||
<Notifications />
|
||||
|
||||
{account.name ? <HealthStatus /> : null}
|
||||
<LanguageSwitcher />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1498,5 +1498,8 @@
|
|||
"More attribute": "More attribute",
|
||||
"More attributes": "More attributes",
|
||||
"Account settings updated successfully": "Account settings updated successfully",
|
||||
"Include rage clicks": "Include rage clicks"
|
||||
"Include rage clicks": "Include rage clicks",
|
||||
"Interface Language": "Interface Language",
|
||||
"Select the language in which OpenReplay will appear.": "Select the language in which OpenReplay will appear.",
|
||||
"Language": "Language"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1498,5 +1498,8 @@
|
|||
"More attribute": "Más atributos",
|
||||
"More attributes": "Más atributos",
|
||||
"Account settings updated successfully": "Configuración de la cuenta actualizada correctamente",
|
||||
"Include rage clicks": "Incluir clics de ira"
|
||||
"Include rage clicks": "Incluir clics de ira",
|
||||
"Interface Language": "Idioma de la interfaz",
|
||||
"Select the language in which OpenReplay will appear.": "Selecciona el idioma en el que aparecerá OpenReplay.",
|
||||
"Language": "Idioma"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1498,5 +1498,8 @@
|
|||
"More attribute": "Plus d'attributs",
|
||||
"More attributes": "Plus d'attributs",
|
||||
"Account settings updated successfully": "Paramètres du compte mis à jour avec succès",
|
||||
"Include rage clicks": "Inclure les clics de rage"
|
||||
"Include rage clicks": "Inclure les clics de rage",
|
||||
"Interface Language": "Langue de l'interface",
|
||||
"Select the language in which OpenReplay will appear.": "Sélectionnez la langue dans laquelle OpenReplay apparaîtra.",
|
||||
"Language": "Langue"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1498,5 +1498,8 @@
|
|||
"More attribute": "Еще атрибут",
|
||||
"More attributes": "Еще атрибуты",
|
||||
"Account settings updated successfully": "Настройки аккаунта успешно обновлены",
|
||||
"Include rage clicks": "Включить невыносимые клики"
|
||||
"Include rage clicks": "Включить невыносимые клики",
|
||||
"Interface Language": "Язык интерфейса",
|
||||
"Select the language in which OpenReplay will appear.": "Выберите язык, на котором будет отображаться OpenReplay.",
|
||||
"Language": "Язык"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1498,5 +1498,8 @@
|
|||
"More attributes": "更多属性",
|
||||
"More attribute": "更多属性",
|
||||
"Account settings updated successfully": "帐户设置已成功更新",
|
||||
"Include rage clicks": "包括点击狂怒"
|
||||
"Include rage clicks": "包括点击狂怒",
|
||||
"Interface Language": "界面语言",
|
||||
"Select the language in which OpenReplay will appear.": "选择 OpenReplay 将显示的语言。",
|
||||
"Language": "语言"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,18 +240,7 @@ class UserStore {
|
|||
resolve(response);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
const err = await e.response?.json();
|
||||
runInAction(() => {
|
||||
this.saving = false;
|
||||
});
|
||||
const errStr = err.errors[0]
|
||||
? err.errors[0].includes('already exists')
|
||||
? this.t(
|
||||
"This email is already linked to an account or team on OpenReplay and can't be used again.",
|
||||
)
|
||||
: err.errors[0]
|
||||
: this.t('Error saving user');
|
||||
toast.error(errStr);
|
||||
toast.error(e.message || this.t("Failed to save user's data."));
|
||||
reject(e);
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,15 @@ export function debounce(callback, wait, context = this) {
|
|||
};
|
||||
}
|
||||
|
||||
export function debounceCall(func, wait) {
|
||||
let timeout;
|
||||
return function (...args) {
|
||||
const context = this;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(context, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
export function randomInt(a, b) {
|
||||
const min = (b ? a : 0) - 0.5;
|
||||
const max = b || a || Number.MAX_SAFE_INTEGER;
|
||||
|
|
|
|||
|
|
@ -95,6 +95,8 @@ spec:
|
|||
value: {{ .Values.global.jwtSecret }}
|
||||
- name: JWT_SPOT_SECRET
|
||||
value: {{ .Values.global.jwtSpotSecret }}
|
||||
- name: TOKEN_SECRET
|
||||
value: {{ .Values.global.tokenSecret }}
|
||||
ports:
|
||||
{{- range $key, $val := .Values.service.ports }}
|
||||
- name: {{ $key }}
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@ global:
|
|||
assistJWTSecret: "{{ randAlphaNum 20}}"
|
||||
jwtSecret: "{{ randAlphaNum 20}}"
|
||||
jwtSpotSecret: "{{ randAlphaNum 20}}"
|
||||
tokenSecret: "{{randAlphaNum 20}}"
|
||||
# In case of multiple nodes in the kubernetes cluster,
|
||||
# we'll have to create an RWX PVC for shared components.
|
||||
# If it's a single node, we'll use hostVolume, which is the default for the community/oss edition.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
## 16.1.0
|
||||
|
||||
- new `privateMode` option to hide all possible data from tracking
|
||||
|
||||
## 16.0.3
|
||||
|
||||
- better handling for local svg spritemaps
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ const config = {
|
|||
moduleNameMapper: {
|
||||
'(.+)\\.js': '$1',
|
||||
},
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsConfig: {
|
||||
target: 'es2020',
|
||||
lib: ['DOM', 'ES2022'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@openreplay/tracker",
|
||||
"description": "The OpenReplay tracker main package",
|
||||
"version": "16.0.3",
|
||||
"version": "16.1.0",
|
||||
"keywords": [
|
||||
"logging",
|
||||
"replay"
|
||||
|
|
|
|||
|
|
@ -357,6 +357,9 @@ export default abstract class Observer {
|
|||
if (name === 'href' || value.length > 1e5) {
|
||||
value = ''
|
||||
}
|
||||
if (['alt', 'placeholder'].includes(name) && this.app.sanitizer.privateMode) {
|
||||
value = value.replaceAll(/./g, '*')
|
||||
}
|
||||
this.app.attributeSender.sendSetAttribute(id, name, value)
|
||||
}
|
||||
|
||||
|
|
@ -389,7 +392,7 @@ export default abstract class Observer {
|
|||
{
|
||||
acceptNode: (node) => {
|
||||
if (this.app.nodes.getID(node) !== undefined) {
|
||||
this.app.debug.warn('! Node is already bound', node)
|
||||
this.app.debug.info('! Node is already bound', node)
|
||||
}
|
||||
return isIgnored(node) || this.app.nodes.getID(node) !== undefined
|
||||
? NodeFilter.FILTER_REJECT
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type App from './index.js'
|
||||
import { stars, hasOpenreplayAttribute } from '../utils.js'
|
||||
import { isElementNode } from './guards.js'
|
||||
import { isElementNode, isTextNode } from './guards.js'
|
||||
|
||||
export enum SanitizeLevel {
|
||||
Plain,
|
||||
|
|
@ -32,31 +32,46 @@ export interface Options {
|
|||
*
|
||||
* */
|
||||
domSanitizer?: (node: Element) => SanitizeLevel
|
||||
/**
|
||||
* private by default mode that will mask all elements not marked by data-openreplay-unmask
|
||||
* */
|
||||
privateMode?: boolean
|
||||
}
|
||||
|
||||
export const stringWiper = (input: string) =>
|
||||
input
|
||||
.trim()
|
||||
.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, '█')
|
||||
.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*')
|
||||
|
||||
export default class Sanitizer {
|
||||
private readonly obscured: Set<number> = new Set()
|
||||
private readonly hidden: Set<number> = new Set()
|
||||
private readonly options: Options
|
||||
public readonly privateMode: boolean
|
||||
private readonly app: App
|
||||
|
||||
constructor(params: { app: App; options?: Partial<Options> }) {
|
||||
this.app = params.app
|
||||
this.options = Object.assign(
|
||||
{
|
||||
obscureTextEmails: true,
|
||||
obscureTextNumbers: false,
|
||||
},
|
||||
params.options,
|
||||
)
|
||||
const defaultOptions: Options = {
|
||||
obscureTextEmails: true,
|
||||
obscureTextNumbers: false,
|
||||
privateMode: false,
|
||||
domSanitizer: undefined,
|
||||
}
|
||||
this.privateMode = params.options?.privateMode ?? false
|
||||
this.options = Object.assign(defaultOptions, params.options)
|
||||
}
|
||||
|
||||
handleNode(id: number, parentID: number, node: Node) {
|
||||
if (this.options.privateMode) {
|
||||
if (isElementNode(node) && !hasOpenreplayAttribute(node, 'unmask')) {
|
||||
return this.obscured.add(id)
|
||||
}
|
||||
if (isTextNode(node) && !hasOpenreplayAttribute(node.parentNode as Element, 'unmask')) {
|
||||
return this.obscured.add(id)
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
this.obscured.has(parentID) ||
|
||||
(isElementNode(node) &&
|
||||
|
|
|
|||
|
|
@ -108,9 +108,13 @@ export default function (app: App, opts: Partial<Options>): void {
|
|||
return
|
||||
}
|
||||
|
||||
const sendConsoleLog = app.safe((level: string, args: unknown[]): void =>
|
||||
app.send(ConsoleLog(level, printf(args))),
|
||||
)
|
||||
const sendConsoleLog = app.safe((level: string, args: unknown[]): void => {
|
||||
let logMsg = printf(args)
|
||||
if (app.sanitizer.privateMode) {
|
||||
logMsg = logMsg.replaceAll(/./g, '*')
|
||||
}
|
||||
app.send(ConsoleLog(level, logMsg))
|
||||
})
|
||||
|
||||
let n = 0
|
||||
const reset = (): void => {
|
||||
|
|
|
|||
|
|
@ -205,7 +205,10 @@ export default function (app: App, opts: Partial<Options>): void {
|
|||
inputTime: number,
|
||||
) {
|
||||
const { value, mask } = getInputValue(id, node)
|
||||
const label = getInputLabel(node)
|
||||
let label = getInputLabel(node)
|
||||
if (app.sanitizer.privateMode) {
|
||||
label = label.replaceAll(/./g, '*')
|
||||
}
|
||||
|
||||
app.send(InputChange(id, value, mask !== 0, label, hesitationTime, inputTime))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -230,11 +230,12 @@ export default function (app: App, options?: MouseHandlerOptions): void {
|
|||
const normalizedY = roundNumber(clickY / contentHeight)
|
||||
|
||||
sendMouseMove()
|
||||
const label = getTargetLabel(target)
|
||||
app.send(
|
||||
MouseClick(
|
||||
id,
|
||||
mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0,
|
||||
getTargetLabel(target),
|
||||
app.sanitizer.privateMode ? label.replaceAll(/./g, '*') : label,
|
||||
isClickable(target) && !disableClickmaps ? getSelector(id, target, options) : '',
|
||||
normalizedX,
|
||||
normalizedY,
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export default function (app: App, opts: Partial<Options> = {}) {
|
|||
}
|
||||
|
||||
function sanitize(reqResInfo: RequestResponseData) {
|
||||
if (!options.capturePayload) {
|
||||
if (!options.capturePayload || app.sanitizer.privateMode) {
|
||||
// @ts-ignore
|
||||
delete reqResInfo.request.body
|
||||
delete reqResInfo.response.body
|
||||
|
|
@ -136,18 +136,19 @@ export default function (app: App, opts: Partial<Options> = {}) {
|
|||
if (options.useProxy) {
|
||||
return createNetworkProxy(
|
||||
context,
|
||||
options.ignoreHeaders,
|
||||
app.sanitizer.privateMode ? true : options.ignoreHeaders,
|
||||
setSessionTokenHeader,
|
||||
sanitize,
|
||||
(message) => {
|
||||
if (options.failuresOnly && message.status < 400) {
|
||||
return
|
||||
}
|
||||
const url = app.sanitizer.privateMode ? '************' : message.url
|
||||
app.send(
|
||||
NetworkRequest(
|
||||
message.requestType,
|
||||
message.method,
|
||||
message.url,
|
||||
url,
|
||||
message.request,
|
||||
message.response,
|
||||
message.status,
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ export default function (app: App, opts: Partial<Options>): void {
|
|||
entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0,
|
||||
entry.encodedBodySize || 0,
|
||||
entry.decodedBodySize || 0,
|
||||
entry.name,
|
||||
app.sanitizer.privateMode ? entry.name.replaceAll(/./g, '*') : entry.name,
|
||||
entry.initiatorType,
|
||||
entry.transferSize,
|
||||
// @ts-ignore
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import type App from '../app/index.js'
|
||||
import { getTimeOrigin } from '../utils.js'
|
||||
import { SetPageLocation, SetViewportSize, SetPageVisibility } from '../app/messages.gen.js'
|
||||
import { stringWiper } from '../app/sanitizer.js'
|
||||
|
||||
export default function (app: App): void {
|
||||
let url: string | null, width: number, height: number
|
||||
|
|
@ -11,7 +12,10 @@ export default function (app: App): void {
|
|||
const { URL } = document
|
||||
if (URL !== url) {
|
||||
url = URL
|
||||
app.send(SetPageLocation(url, referrer, navigationStart, document.title))
|
||||
const safeTitle = app.sanitizer.privateMode ? stringWiper(document.title) : document.title
|
||||
const safeUrl = app.sanitizer.privateMode ? stringWiper(url) : url
|
||||
const safeReferrer = app.sanitizer.privateMode ? stringWiper(referrer) : referrer
|
||||
app.send(SetPageLocation(safeUrl, safeReferrer, navigationStart, safeTitle))
|
||||
navigationStart = 0
|
||||
referrer = url
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@ describe('Console logging module', () => {
|
|||
safe: jest.fn((callback) => callback),
|
||||
send: jest.fn(),
|
||||
attachStartCallback: jest.fn(),
|
||||
sanitizer: {
|
||||
privateMode: false,
|
||||
},
|
||||
ticker: {
|
||||
attach: jest.fn(),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { describe, expect, jest, afterEach, beforeEach, test } from '@jest/globa
|
|||
import Sanitizer, { SanitizeLevel, Options, stringWiper } from '../main/app/sanitizer.js'
|
||||
|
||||
describe('stringWiper', () => {
|
||||
test('should replace all characters with █', () => {
|
||||
expect(stringWiper('Sensitive Data')).toBe('██████████████')
|
||||
test('should replace all characters with *', () => {
|
||||
expect(stringWiper('Sensitive Data')).toBe('**************')
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ describe('Sanitizer', () => {
|
|||
element.mockId = 1
|
||||
element.innerText = 'Sensitive Data'
|
||||
const sanitizedText = sanitizer.getInnerTextSecure(element)
|
||||
expect(sanitizedText).toEqual('██████████████')
|
||||
expect(sanitizedText).toEqual('**************')
|
||||
})
|
||||
|
||||
test('should return empty string if node element does not exist', () => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue