From 6054aef8e548a4a60c8a241cfb1d32abaa4af61b Mon Sep 17 00:00:00 2001 From: Alex Kaminskii Date: Mon, 12 Dec 2022 15:39:51 +0100 Subject: [PATCH] fix(frontend): correct time adjustment for resources+merge with payloads by name + show body only if present --- .../DevTools/NetworkPanel/NetworkPanel.tsx | 8 +++++--- .../components/FetchTabs/FetchTabs.tsx | 20 +++++++++++-------- .../components/Headers/Headers.tsx | 8 ++++---- frontend/app/player/web/MessageManager.ts | 9 ++++++--- frontend/app/types/session/session.ts | 7 +------ frontend/app/utils/index.ts | 2 +- 6 files changed, 29 insertions(+), 25 deletions(-) diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 34b2bae65..57f2b513f 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -153,10 +153,12 @@ function NetworkPanel() { const activeTab = devTools[INDEX_KEY].activeTab; const activeIndex = devTools[INDEX_KEY].index; - const list = useMemo(() => + const list = useMemo(() => + // TODO: better merge (with body size info) resourceList.filter(res => !fetchList.some(ft => { - if (res.url !== ft.url) { return false } - if (Math.abs(res.time - ft.time) > 200) { return false } // TODO: find good epsilons + // res.url !== ft.url doesn't work on relative URLs appearing within fetchList (to-fix in player) + if (res.name !== ft.name) { return false } + if (Math.abs(res.time - ft.time) > 150) { return false } // TODO: find good epsilons if (Math.abs(res.duration - ft.duration) > 100) { return false } return true })) diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx index 1b49cc1fe..83b6f3767 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx @@ -22,15 +22,17 @@ function FetchTabs(props: Props) { const onTabClick = (tab: string) => setActiveTab(tab); const [jsonRequest, setJsonRequest] = useState(null); const [jsonResponse, setJsonResponse] = useState(null); - const [requestHeaders, setRequestHeaders] = useState(null); - const [responseHeaders, setResponseHeaders] = useState(null); + const [requestHeaders, setRequestHeaders] = useState | null>(null); + const [responseHeaders, setResponseHeaders] = useState | null>(null); useEffect(() => { const { request, response } = resource; try { let jRequest = JSON.parse(request) - setRequestHeaders(jRequest.headers); + if (typeof jRequest.headers === "object") { + setRequestHeaders(jRequest.headers); + } try { let jBody = JSON.parse(jRequest.body) jBody = isValidJSON(jBody) ? jBody : jRequest.body @@ -42,7 +44,9 @@ function FetchTabs(props: Props) { try { let jResponse = JSON.parse(response) - setResponseHeaders(jResponse.headers); + if (typeof jResponse.headers === "object") { + setResponseHeaders(jResponse.headers); + } try { let jBody = JSON.parse(jResponse.body) jBody = isValidJSON(jBody) ? jBody : jResponse.body @@ -66,13 +70,13 @@ function FetchTabs(props: Props) { } size="small" - show={!request} + show={!jsonRequest} // animatedIcon="no-results" >
{ !isValidJSON(jsonRequest) ? ( -
{jsonRequest || request}
+
{jsonRequest}
) : ( )} @@ -91,13 +95,13 @@ function FetchTabs(props: Props) {
} size="small" - show={!response} + show={!jsonResponse} // animatedIcon="no-results" >
{ !isValidJSON(jsonResponse) ? ( -
{jsonResponse || response}
+
{jsonResponse}
) : ( )} diff --git a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx index 78c4a5e64..49bf12676 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/Headers/Headers.tsx @@ -4,8 +4,8 @@ import stl from './headers.module.css'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; interface Props { - requestHeaders: any; - responseHeaders: any; + requestHeaders: Record + responseHeaders: Record } function Headers(props: Props) { return ( @@ -21,7 +21,7 @@ function Headers(props: Props) { show={!props.requestHeaders && !props.responseHeaders} // animatedIcon="no-results" > - {props.requestHeaders && ( + {props.requestHeaders && Object.values(props.requestHeaders).length > 0 && ( <>
Request Headers
@@ -36,7 +36,7 @@ function Headers(props: Props) { )} - {props.responseHeaders && ( + {props.responseHeaders && Object.values(props.responseHeaders).length > 0 && (
Response Headers
{Object.keys(props.responseHeaders).map((h) => ( diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index d58143362..e548f406e 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -228,9 +228,12 @@ export default class MessageManager { let fileReadPromise = this.session.domURL && this.session.domURL.length > 0 ? loadFiles(this.session.domURL, createNewParser()) - : requestEFSDom(this.session.sessionId) - .then(createNewParser(false)) - fileReadPromise.catch(e => { + : Promise.reject() + fileReadPromise + // EFS fallback + .catch(() => requestEFSDom(this.session.sessionId).then(createNewParser(false))) + // old url fallback + .catch(e => { logger.error('Can not get normal session replay file:', e) // back compat fallback to an old mobsUrl return loadFiles(this.session.mobsUrl, createNewParser(false)) diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index 5a472b043..49d5f6962 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -115,12 +115,8 @@ export default Record( .filter(({ type, time }) => type !== TYPES.CONSOLE && time <= durationSeconds); let resources = List(session.resources).map(Resource); - // this code shoud die. - const firstResourceTime = resources - .map((r) => r.time) - .reduce((a, b) => Math.min(a, b), Number.MAX_SAFE_INTEGER); resources = resources - .map((r) => r.set('time', r.time - firstResourceTime)) + .map((r) => r.set('time', Math.max(0, r.time - startedAt))) .sort((r1, r2) => r1.time - r2.time); const missedResources = resources.filter(({ success }) => !success); @@ -171,7 +167,6 @@ export default Record( ), userDisplayName: session.userId || session.userAnonymousId || session.userID || 'Anonymous User', - firstResourceTime, issues: issuesList, sessionId: sessionId || sessionID, userId: session.userId || session.userID, diff --git a/frontend/app/utils/index.ts b/frontend/app/utils/index.ts index 3716787b4..d4b7e956b 100644 --- a/frontend/app/utils/index.ts +++ b/frontend/app/utils/index.ts @@ -17,7 +17,7 @@ export function debounce(callback, wait, context = this) { }; } -export function getResourceName(url = '') { +export function getResourceName(url: string) { return url .split('/') .filter((s) => s !== '')