@@ -75,7 +76,7 @@ export const NoteItem = observer(({ item }: { item: INoteItem }) => {
export const ErrorComp = ({ item }: { item: IError }) => (
-
{item.time}
+
{durationFromMs(item.time)}
{item.name ?
{item.name}
: null}
{safeStr(item.message)}
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
index 838cf1e2b..d3f2772b6 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Duration } from 'luxon';
import { observer } from 'mobx-react-lite';
+import { toJS } from 'mobx'
import { Icon } from 'UI';
import { useStore } from 'App/mstore';
import { INDEXES } from 'App/constants/zindex';
@@ -35,6 +36,8 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
CLICKRAGE: eventsList.filter((item: any) => item.type === 'CLICKRAGE'),
};
+ console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2))
+
const pickEventRadius = (e: React.MouseEvent
) => {
e.stopPropagation();
diff --git a/frontend/app/components/Session_/BugReport/types.ts b/frontend/app/components/Session_/BugReport/types.ts
index 2b3e3a8ad..eb2b2a9d7 100644
--- a/frontend/app/components/Session_/BugReport/types.ts
+++ b/frontend/app/components/Session_/BugReport/types.ts
@@ -1,16 +1,5 @@
import { SeverityLevels } from 'App/mstore/bugReportStore';
-import { SubItem, INoteItem, IError, INetworkReq } from './components/StepsComponents/SubModalItems';
-
-export interface BugReportPdf extends ReportDefaults {
- title: string;
- comment?: string;
- severity: SeverityLevels;
- steps: Step[];
- activity: {
- network: INetworkReq[];
- console: IError[];
- };
-}
+import { SubItem } from './components/StepsComponents/SubModalItems';
export interface ReportDefaults {
author: string;
@@ -25,6 +14,72 @@ export interface ReportDefaults {
};
}
+export interface BugReportPdf extends ReportDefaults {
+ title: string;
+ comment?: string;
+ severity: SeverityLevels;
+ steps: Step[];
+ activity: Activity
+}
+
+export interface Activity {
+ network: NetworkEvent[];
+ console: Exception[];
+ clickRage: ClickRage[];
+};
+
+interface Event {
+ time: number;
+ key: string;
+}
+
+interface NetworkEvent extends Event {
+ decodedBodySize: number | null;
+ duration: number | null;
+ encodedBodySize: number | null;
+ headerSize: number | null;
+ index?: number;
+ method: string;
+ name: string;
+ payload: string;
+ response: string;
+ responseBodySize: number;
+ score: number;
+ status: string;
+ success: boolean;
+ timewidth: number;
+ timings: Record;
+ ttfb: number;
+ type: string;
+ url: string;
+}
+
+interface Exception extends Event {
+ errorId: string;
+ function: string;
+ key: string;
+ message: string;
+ messageId: number;
+ name: string;
+ projectId: number;
+ sessionId: number;
+ source: string;
+ timestamp: number;
+}
+
+interface ClickRage extends Event {
+ type: 'CLICKRAGE';
+ label: string
+ targetContent: string,
+ target: {
+ key: string,
+ path: string,
+ label: string | null
+ },
+ count: number
+}
+
+
export interface EnvData {
Browser: string;
OS: string;
@@ -33,14 +88,13 @@ export interface EnvData {
Resolution: string;
}
-
export interface Step {
key: string;
type: string;
time: number;
details: string;
icon: string;
- substeps?: SubItem[]
+ substeps?: SubItem[];
}
export interface Note {
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 7b66a6bd9..9acdc3a7c 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import cn from 'classnames';
import { CountryFlag, Avatar, TextEllipsis, Label, Icon } from 'UI';
import { useStore } from 'App/mstore';
diff --git a/frontend/app/date.ts b/frontend/app/date.ts
index 59704ad2d..3403abfd6 100644
--- a/frontend/app/date.ts
+++ b/frontend/app/date.ts
@@ -24,6 +24,12 @@ export function durationFromMsFormatted(ms: number): string {
return durationFormatted(Duration.fromMillis(ms || 0));
}
+export function durationFromMs(ms: number): string {
+ const dur = Duration.fromMillis(ms)
+
+ return dur.toFormat('hh:mm:ss')
+}
+
export const durationFormattedFull = (duration: Duration): string => {
if (duration.as('minutes') < 1) { // show in seconds
let d = duration.toFormat('s');
diff --git a/frontend/app/mstore/bugReportStore.ts b/frontend/app/mstore/bugReportStore.ts
index 1f6b20ceb..69685ef62 100644
--- a/frontend/app/mstore/bugReportStore.ts
+++ b/frontend/app/mstore/bugReportStore.ts
@@ -1,5 +1,5 @@
import { makeAutoObservable } from 'mobx';
-import { BugReportPdf, ReportDefaults, Step } from 'Components/Session_/BugReport/types';
+import { BugReportPdf, ReportDefaults, Step, Activity } from 'Components/Session_/BugReport/types';
import { SubItem } from 'App/components/Session_/BugReport/components/StepsComponents/SubModalItems';
export enum SeverityLevels {
@@ -77,13 +77,27 @@ export default class BugReportStore {
this.bugReport = Object.assign(this.bugReport || {}, defaults);
}
+ composeReport(activity: Activity) {
+ const reportObj = {
+ title: this.reportTitle,
+ comment: this.comment,
+ severity: this.severity,
+ steps: this.chosenEventSteps,
+ activity
+ }
+ this.bugReport = Object.assign(this.bugReport, reportObj)
+
+ console.log(JSON.stringify(this.bugReport, undefined, 2))
+ return this.bugReport
+ }
+
setDefaultSteps(steps: Step[]) {
this.sessionEventSteps = steps;
}
setSteps(steps: Step[]) {
this.chosenEventSteps = steps.map(step => ({ ...step, substeps: undefined }));
- this.pickedSubItems = undefined;
+ this.pickedSubItems = new Map();
}
removeStep(step: Step) {
@@ -107,7 +121,7 @@ export default class BugReportStore {
}
isSubItemChecked(item: SubItem) {
- return this.pickedSubItems.has(item.key)
+ return this.pickedSubItems?.get(item.key) !== undefined
}
saveSubItems() {