diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index 51322cc14..44b9f3d00 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Log, LEVEL } from 'Types/session/log'; +import { LogLevel } from 'Player'; import BottomBlock from '../BottomBlock'; import { Tabs, Input, Icon, NoContent } from 'UI'; import cn from 'classnames'; @@ -19,11 +19,11 @@ const WARNINGS = 'WARNINGS'; const ERRORS = 'ERRORS'; const LEVEL_TAB = { - [LEVEL.INFO]: INFO, - [LEVEL.LOG]: INFO, - [LEVEL.WARNING]: WARNINGS, - [LEVEL.ERROR]: ERRORS, - [LEVEL.EXCEPTION]: ERRORS, + [LogLevel.INFO]: INFO, + [LogLevel.LOG]: INFO, + [LogLevel.WARNING]: WARNINGS, + [LogLevel.ERROR]: ERRORS, + [LogLevel.EXCEPTION]: ERRORS, }; const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({ text: tab, key: tab })); @@ -36,19 +36,19 @@ function renderWithNL(s = '') { const getIconProps = (level: any) => { switch (level) { - case LEVEL.INFO: - case LEVEL.LOG: + case LogLevel.INFO: + case LogLevel.LOG: return { name: 'console/info', color: 'blue2', }; - case LEVEL.WARN: - case LEVEL.WARNING: + case LogLevel.WARN: + case LogLevel.WARNING: return { name: 'console/warning', color: 'red2', }; - case LEVEL.ERROR: + case LogLevel.ERROR: return { name: 'console/error', color: 'red', @@ -81,16 +81,8 @@ function ConsolePanel() { const jump = (t: number) => player.jump(t) const { logList, exceptionsList, time } = store.get() - const logExceptions = exceptionsList.map(({ time, errorId, name }: any) => - Log({ - level: LEVEL.ERROR, - value: name, - time, - errorId, - }) - ); // @ts-ignore - const logs = logList.concat(logExceptions) + const logs = logList.concat(exceptionsList) const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab }); const onFilterChange = ({ target: { value } }: any) => { diff --git a/frontend/app/player/index.ts b/frontend/app/player/index.ts index 949088e43..55c67fb0b 100644 --- a/frontend/app/player/index.ts +++ b/frontend/app/player/index.ts @@ -1,6 +1,7 @@ export * from './web/assist/AssistManager'; export * from './web/assist/LocalStream'; export * from './web/WebPlayer'; +export * from './web/types'; export * from './create'; export type { MarkedTarget } from './web/TargetMarker' diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index bca4dc34a..fec4fd9cc 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -4,7 +4,7 @@ import logger from 'App/logger'; import Resource, { TYPES } from 'Types/session/resource'; import { TYPES as EVENT_TYPES } from 'Types/session/event'; -import { Log } from 'Types/session/log'; +import { Log } from './types'; import { toast } from 'react-toastify'; @@ -394,12 +394,10 @@ export default class MessageManager { /* Lists: */ case "console_log": if (msg.level === 'debug') break; - this.lists.lists.log.append(Log({ - level: msg.level, - value: msg.value, - time, - index, - })) + this.lists.lists.log.append( + // @ts-ignore : TODO: enums in the message schema + Log(msg) + ) break; case "fetch": this.lists.lists.fetch.append(Resource({ diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts index 78eaa1435..20115d590 100644 --- a/frontend/app/player/web/WebPlayer.ts +++ b/frontend/app/player/web/WebPlayer.ts @@ -1,3 +1,5 @@ +import { Log, LogLevel } from './types' + import type { Store } from '../common/types' import Player, { State as PlayerState } from '../player/Player' @@ -36,7 +38,14 @@ export default class WebPlayer extends Player { event: session.events.toJSON(), stack: session.stackEvents.toJSON(), resource: session.resources.toJSON(), - exceptions: session.errors.toJSON(), + exceptions: session.errors.toJSON().map(({ time, errorId, name }: any) => + Log({ + level: LogLevel.ERROR, + value: name, + time, + errorId, + }) + ), } const screen = new Screen() diff --git a/frontend/app/player/web/types.ts b/frontend/app/player/web/types.ts new file mode 100644 index 000000000..ee185dfbe --- /dev/null +++ b/frontend/app/player/web/types.ts @@ -0,0 +1,22 @@ +export enum LogLevel { + INFO = 'info', + LOG = 'log', + WARNING = 'warning', + WARN = 'warn', + ERROR = 'error', + EXCEPTION = 'exception', +} + +interface ILog { + level: LogLevel + value: string + time: number + index?: number + errorId?: string +} + +export const Log = (log: ILog) => ({ + isRed: () => log.level === LogLevel.EXCEPTION || log.level === LogLevel.ERROR, + isYellow: () => log.level === LogLevel.WARNING || log.level === LogLevel.WARN, + ...log +}) diff --git a/frontend/app/types/run/run.js b/frontend/app/types/run/run.js index b084a25fe..cfe35488e 100644 --- a/frontend/app/types/run/run.js +++ b/frontend/app/types/run/run.js @@ -4,7 +4,6 @@ import Environment from 'Types/environment'; import stepFromJS from './step'; import seleniumStepFromJS from './seleniumStep'; import Resource from '../session/resource'; -import Log from '../session/log'; export const NOT_FETCHED = undefined; export const QUEUED = 'queued'; @@ -45,7 +44,6 @@ class Run extends Record({ finishedAt: undefined, steps: List(), resources: [], - logs: [], seleniumSteps: List(), url_browser_logs: undefined, url_logs: undefined, @@ -148,7 +146,6 @@ function fromJS(run = {}) { .map(r => r.set("time", r.time - firstResourceTime)) .sort((r1, r2) => r1.time - r2.time).toArray() - const logs = List(run.console).map(Log); const screenshotUrl = run.screenshot_url || seleniumSteps.find(({ screenshotUrl }) => !!screenshotUrl, null, {}).screenshotUrl; @@ -163,7 +160,6 @@ function fromJS(run = {}) { lastExecutedString, steps, resources, - logs, seleniumSteps, tags, environment, diff --git a/frontend/app/types/session/log.tsx b/frontend/app/types/session/log.tsx deleted file mode 100644 index 28cabf329..000000000 --- a/frontend/app/types/session/log.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import Record from 'Types/Record'; - -export const INFO = 'info'; -export const LOG = 'log'; -export const WARNING = 'warning'; -export const WARN = 'warn'; -export const ERROR = 'error'; -export const EXCEPTION = 'exception'; -export const LEVEL = { - INFO, - LOG, - WARNING, - WARN, - ERROR, - EXCEPTION, -} - -export function isRed(log) { - return -} - -export default Record({ - level: '', - value: '', - time: undefined, - index: undefined, - errorId: undefined, -}, { - methods: { - isRed() { - return isRed(this); - }, - isYellow() { - return this.level === WARNING || WARN; - } - } -}); - -interface ILog { - level: string - value: string - time: number - index?: number - errorId?: string -} - -export const Log = (log: ILog) => ({ - isRed: () => log.level === EXCEPTION || log.level === ERROR, - isYellow: () => log.level === WARNING || log.level === WARN, - ...log -}) diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index 961b34864..5a472b043 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -2,7 +2,6 @@ import Record from 'Types/Record'; import { List, Map } from 'immutable'; import { Duration } from 'luxon'; import SessionEvent, { TYPES } from './event'; -import Log from './log'; import StackEvent from './stackEvent'; import Resource from './resource'; import SessionError from './error'; @@ -32,7 +31,6 @@ export default Record( startedAt: 0, duration: 0, events: List(), - logs: List(), stackEvents: List(), resources: List(), missedResources: List(), @@ -125,7 +123,6 @@ export default Record( .map((r) => r.set('time', r.time - firstResourceTime)) .sort((r1, r2) => r1.time - r2.time); const missedResources = resources.filter(({ success }) => !success); - const logs = List(session.logs).map(Log); const stackEventsList = List(stackEvents) .concat(List(session.userEvents)) @@ -156,7 +153,6 @@ export default Record( errors: exceptions, siteId: projectId, events, - logs, stackEvents: stackEventsList, resources, missedResources,