diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx index 255cac92b..f28771c47 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx +++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx @@ -21,17 +21,17 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?: const menuItems = [ { icon: 'quotes', - text: 'Add/Remove Note', + text: 'Notes', onClick: () => bugReportStore.toggleSubStepModal(true, 'note', step.key), }, { icon: 'info-circle', - text: `Add/Remove Error`, + text: `Errors`, onClick: () => bugReportStore.toggleSubStepModal(true, 'error', step.key), }, { icon: 'network', - text: 'Add/Remove Network Request', + text: 'Bad Network Requests', onClick: () => bugReportStore.toggleSubStepModal(true, 'network', step.key), }, ]; @@ -64,7 +64,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?: )} > {/* @ts-ignore */} - + + {/* @ts-ignore */} ); diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx index 136bfe0fc..bf68d0144 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx +++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx @@ -28,7 +28,10 @@ export interface INetworkReq extends Item { export type SubItem = INoteItem | IError | INetworkReq; -const safeStr = (ogStr: string) => (ogStr.length > 60 ? ogStr.slice(0, 60) + '...' : ogStr); +const safeStr = (ogStr: string) => { + if (!ogStr) return '' + return (ogStr.length > 80 ? ogStr.slice(0, 80) + '...' : ogStr) +} export const NetworkComp = ({ item }: { item: INetworkReq }) => (
diff --git a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx index 4c0096697..855ece5eb 100644 --- a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx +++ b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx @@ -20,9 +20,9 @@ function ConsoleRow(props: Props) { return (
{Duration.fromMillis(log.time).toFormat('mm:ss.SSS')}
*/} -
+
{canExpand && ( diff --git a/frontend/app/components/Session_/Network/Network.DEPRECATED.js b/frontend/app/components/Session_/Network/Network.DEPRECATED.js index ce09e94d2..b79307431 100644 --- a/frontend/app/components/Session_/Network/Network.DEPRECATED.js +++ b/frontend/app/components/Session_/Network/Network.DEPRECATED.js @@ -43,11 +43,11 @@ export function renderDuration(r) { if (!r.success) return 'x'; const text = `${Math.round(r.duration)}ms`; - if (!r.isRed() && !r.isYellow()) return text; + if (!r.isRed && !r.isYellow) return text; let tooltipText; let className = 'w-full h-full flex items-center '; - if (r.isYellow()) { + if (r.isYellow) { tooltipText = 'Slower than average'; className += 'warn color-orange'; } else { diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js index d568feacf..8174162c0 100644 --- a/frontend/app/components/Session_/Network/NetworkContent.js +++ b/frontend/app/components/Session_/Network/NetworkContent.js @@ -134,11 +134,11 @@ export function renderDuration(r) { if (!r.success) return 'x'; const text = `${Math.floor(r.duration)}ms`; - if (!r.isRed() && !r.isYellow()) return text; + if (!r.isRed && !r.isYellow) return text; let tooltipText; let className = 'w-full h-full flex items-center '; - if (r.isYellow()) { + if (r.isYellow) { tooltipText = 'Slower than average'; className += 'warn color-orange'; } else { diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx index c7e7912b1..1bcdf7088 100644 --- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx +++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx @@ -37,7 +37,7 @@ function OverviewPanel({ issuesList }: { issuesList: Record[] }) { const fetchPresented = fetchList.length > 0; const resourceList = resourceListUnmap - .filter((r: any) => r.isRed() || r.isYellow()) + .filter((r: any) => r.isRed || r.isYellow) .concat(fetchList.filter((i: any) => parseInt(i.status) >= 400)) .concat(graphqlList.filter((i: any) => parseInt(i.status) >= 400)) diff --git a/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js b/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js index 7403a3fa0..053d2c48e 100644 --- a/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js +++ b/frontend/app/components/Session_/StackEvents/UserEvent/UserEvent.js @@ -20,7 +20,7 @@ export default class UserEvent extends React.PureComponent { getLevelClassname() { const { userEvent } = this.props; - if (userEvent.isRed()) return 'error color-red'; + if (userEvent.isRed) return 'error color-red'; return ''; } @@ -35,7 +35,7 @@ export default class UserEvent extends React.PureComponent { message = typeof message === 'string' ? message : JSON.stringify(message); return (
r.isRed() || r.isYellow()) + .filter((r) => r.isRed || r.isYellow) .concat(fetchList.filter((i) => parseInt(i.status) >= 400)) .concat(graphqlList.filter((i) => parseInt(i.status) >= 400)) diff --git a/frontend/app/components/Session_/TimeTable/TimeTable.tsx b/frontend/app/components/Session_/TimeTable/TimeTable.tsx index 5df7242ec..f4c619d56 100644 --- a/frontend/app/components/Session_/TimeTable/TimeTable.tsx +++ b/frontend/app/components/Session_/TimeTable/TimeTable.tsx @@ -20,7 +20,7 @@ type Durationed = { type CanBeRed = { //+isRed: boolean, - isRed: () => boolean; + isRed: boolean; }; interface Row extends Timed, Durationed, CanBeRed { @@ -171,7 +171,7 @@ export default class TimeTable extends React.PureComponent { key={key} className={cn('border-b border-color-gray-light-shade', stl.row, { [stl.hoverable]: hoverable, - 'error color-red': !!row.isRed && row.isRed(), + 'error color-red': !!row.isRed && row.isRed, 'cursor-pointer': typeof onRowClick === 'function', [stl.activeRow]: activeIndex === index, // [stl.inactiveRow]: !activeIndex || index > activeIndex, @@ -194,7 +194,7 @@ export default class TimeTable extends React.PureComponent { onPrevClick = () => { let prevRedIndex = -1; for (let i = this.state.firstVisibleRowIndex - 1; i >= 0; i--) { - if (this.props.rows[i].isRed()) { + if (this.props.rows[i].isRed) { prevRedIndex = i; break; } @@ -207,7 +207,7 @@ export default class TimeTable extends React.PureComponent { onNextClick = () => { let prevRedIndex = -1; for (let i = this.state.firstVisibleRowIndex + 1; i < this.props.rows.length; i++) { - if (this.props.rows[i].isRed()) { + if (this.props.rows[i].isRed) { prevRedIndex = i; break; } diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx index 11039c9f6..fc818b550 100644 --- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx +++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx @@ -30,9 +30,9 @@ function ConsoleRow(props: Props) { className={cn( 'border-b flex items-center py-2 px-4 overflow-hidden group relative select-none', { - info: !log.isYellow() && !log.isRed(), - warn: log.isYellow(), - error: log.isRed(), + info: !log.isYellow && !log.isRed, + warn: log.isYellow, + error: log.isRed, 'cursor-pointer': clickable, 'cursor-pointer underline decoration-dotted decoration-gray-200': !!log.errorId, } @@ -42,7 +42,7 @@ function ConsoleRow(props: Props) {
-
+
{canExpand && ( diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index d1de4dca7..9339b1e8b 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -109,11 +109,11 @@ export function renderDuration(r: any) { if (!r.success) return 'x'; const text = `${Math.floor(r.duration)}ms`; - if (!r.isRed() && !r.isYellow()) return text; + if (!r.isRed && !r.isYellow) return text; let tooltipText; let className = 'w-full h-full flex items-center '; - if (r.isYellow()) { + if (r.isYellow) { tooltipText = 'Slower than average'; className += 'warn color-orange'; } else { diff --git a/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx b/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx index b32846c5b..1246ca1da 100644 --- a/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx +++ b/frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx @@ -28,7 +28,7 @@ function StackEventRow(props: Props) { return (
boolean; + isRed: boolean; }; interface Row extends Timed, Durationed, CanBeRed { @@ -211,7 +211,7 @@ export default class TimeTable extends React.PureComponent { stl.row, { [stl.hoverable]: hoverable, - 'error color-red': !!row.isRed && row.isRed(), + 'error color-red': row.isRed, 'cursor-pointer': typeof onRowClick === 'function', [stl.activeRow]: activeIndex === index, [stl.inactiveRow]: !activeIndex || index > activeIndex, @@ -240,7 +240,7 @@ export default class TimeTable extends React.PureComponent { onPrevClick = () => { let prevRedIndex = -1; for (let i = this.state.firstVisibleRowIndex - 1; i >= 0; i--) { - if (this.props.rows[i].isRed()) { + if (this.props.rows[i].isRed) { prevRedIndex = i; break; } @@ -253,7 +253,7 @@ export default class TimeTable extends React.PureComponent { onNextClick = () => { let prevRedIndex = -1; for (let i = this.state.firstVisibleRowIndex + 1; i < this.props.rows.length; i++) { - if (this.props.rows[i].isRed()) { + if (this.props.rows[i].isRed) { prevRedIndex = i; break; } diff --git a/frontend/app/player/web/Lists.ts b/frontend/app/player/web/Lists.ts index 0d7353d30..cb12f82bf 100644 --- a/frontend/app/player/web/Lists.ts +++ b/frontend/app/player/web/Lists.ts @@ -58,7 +58,7 @@ export default class Lists { } for (const name of MARKED_LIST_NAMES) { // TODO: provide types - lists[name] = new ListWalkerWithMarks((el) => el.isRed(), initialLists[name]) + lists[name] = new ListWalkerWithMarks((el) => el.isRed, initialLists[name]) } this.lists = lists as ListsObject } diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts index 81df4d3ca..7ba46cf8b 100644 --- a/frontend/app/player/web/WebPlayer.ts +++ b/frontend/app/player/web/WebPlayer.ts @@ -30,12 +30,11 @@ export default class WebPlayer extends Player { event: session.events || [], stack: session.stackEvents || [], resource: session.resources || [], // MBTODO: put ResourceTiming in file - exceptions: session.errors?.map(({ time, errorId, name }: any) => + exceptions: session.errors?.map(({ name, ...rest }: any) => Log({ level: LogLevel.ERROR, value: name, - time, - errorId, + ...rest, }) ) || [], } diff --git a/frontend/app/player/web/types.ts b/frontend/app/player/web/types.ts index 579a26d13..485921ed0 100644 --- a/frontend/app/player/web/types.ts +++ b/frontend/app/player/web/types.ts @@ -16,8 +16,8 @@ export interface ILog { } export const Log = (log: ILog) => ({ - isRed: () => log.level === LogLevel.EXCEPTION || log.level === LogLevel.ERROR, - isYellow: () => log.level === LogLevel.WARN, + isRed: log.level === LogLevel.EXCEPTION || log.level === LogLevel.ERROR, + isYellow: log.level === LogLevel.WARN, ...log }) diff --git a/frontend/app/types/session/resource.ts b/frontend/app/types/session/resource.ts index 170e0713d..c80603c50 100644 --- a/frontend/app/types/session/resource.ts +++ b/frontend/app/types/session/resource.ts @@ -103,15 +103,9 @@ export default class Resource { ttfb: timings && timings.ttfb, timewidth: timings && timings.timewidth, timings, + isRed: !success || resource.score >= RED_BOUND, + isYellow: resource.score < RED_BOUND && resource.score >= YELLOW_BOUND, }) } - - isRed() { - return !this.success || this.score >= RED_BOUND; - } - - isYellow() { - return this.score < RED_BOUND && this.score >= YELLOW_BOUND; - } } diff --git a/frontend/app/types/session/stackEvent.ts b/frontend/app/types/session/stackEvent.ts index 06910e7d4..8ce375fc2 100644 --- a/frontend/app/types/session/stackEvent.ts +++ b/frontend/app/types/session/stackEvent.ts @@ -11,7 +11,7 @@ export const SUMOLOGIC = 'sumologic'; export const typeList = [OPENREPLAY, SENTRY, DATADOG, STACKDRIVER, ROLLBAR, BUGSNAG, CLOUDWATCH, ELASTICSEARCH, SUMOLOGIC]; -export function isRed(event: StackEvent) { +export function isRed(event: IStackEvent) { if (!event.payload) return false; switch (event.source) { case SENTRY: @@ -45,7 +45,7 @@ export interface IStackEvent { source: any; level: string; - isRed: () => boolean; + isRed: boolean; } export default class StackEvent { @@ -58,13 +58,10 @@ export default class StackEvent { level: IStackEvent["level"]; constructor(evt: IStackEvent) { + const event = { ...evt, source: evt.source || OPENREPLAY } Object.assign(this, { - ...evt, - source: evt.source || OPENREPLAY + ...event, + isRed: isRed(event), }); } - - isRed() { - return isRed(this); - } }