change(ui): rewrite error, fix api bugs

frontend/app/api_middleware.js

@@ -41,9 +41,9 @@ export default (store) => (next) => (action) => {
 
 function parseError(e) {
   try {
-    return JSON.parse(e).errors || [];
+    return [...JSON.parse(e).errors] || [];
   } catch {
-    return e;
+    return Array.isArray(e) ? e : [e];
   }
 }
 

frontend/app/duck/errors.js

@@ -56,6 +56,7 @@ const initialState = Map({
 
 function reducer(state = initialState, action = {}) {
 	let updError;
+	console.log(action)
 	switch (action.type) {
 		case EDIT_OPTIONS:
 			return state.mergeIn(["options"], action.instance).set('currentPage', 1);
@@ -66,6 +67,8 @@ function reducer(state = initialState, action = {}) {
 			} else {
 				return state.set("instance", ErrorInfo(action.data));
 			}
+		case failure(FETCH):
+			return state.set("instance", ErrorInfo());
 		case success(FETCH_TRACE):
 			return state.set("instanceTrace", List(action.data.trace)).set('sourcemapUploaded', action.data.sourcemapUploaded);
 		case success(FETCH_LIST):

frontend/app/player/web/WebPlayer.ts

@@ -26,11 +26,12 @@ export default class WebPlayer extends Player {
   private targetMarker: TargetMarker
 
   constructor(protected wpState: Store<typeof WebPlayer.INITIAL_STATE>, session: any, live: boolean) {
+    console.log(session.events, session.resources, session.errors)
     let initialLists = live ? {} : {
       event: session.events.toJSON(),
       stack: session.stackEvents.toJSON(),
       resource: session.resources.toJSON(), // MBTODO: put ResourceTiming in file
-      exceptions: session.errors.toJSON().map(({ time, errorId, name }: any) =>
+      exceptions: session.errors.map(({ time, errorId, name }: any) =>
         Log({
           level: LogLevel.ERROR,
           value: name,

frontend/app/types/session/error.js

@@ -1,32 +0,0 @@
-import Record from 'Types/Record';
-
-
-function getStck0InfoString(stack) {
-  const stack0 = stack[0];
-  if (!stack0) return "";
-  let s = stack0.function || "";
-  if (stack0.url) {
-    s += ` (${stack0.url})`;
-  }
-  return s;
-}
-
-
-export default Record({
-  sessionId: undefined,
-  messageId: undefined,
-  timestamp: undefined,
-  errorId: undefined,
-  projectId: undefined,
-  source: undefined,
-  name: undefined,
-  message: undefined,
-  time: undefined,
-  function: '?',
-}, {
-  fromJS: ({ stack, ...rest }) => ({
-    ...rest,
-    stack0InfoString: getStck0InfoString(stack || []),
-    function: (stack && stack[0] && stack[0].function) || '?',
-  }),
-});

frontend/app/types/session/error.ts

@@ -0,0 +1,48 @@
+import Record from 'Types/Record';
+
+function getStck0InfoString(stack: Stack) {
+  const stack0 = stack[0];
+  if (!stack0) return "";
+  let s = stack0.function || "";
+  if (stack0.url) {
+    s += ` (${stack0.url})`;
+  }
+  return s;
+}
+
+type Stack = { function: string; url: string}[]
+
+export interface IError {
+  sessionId: string
+  messageId: string
+  timestamp: number
+  errorId: string
+  projectId: string
+  source: string
+  name: string
+  message: string
+  time: number
+  function: string
+  stack: Stack
+}
+
+export default class Error {
+  sessionId: IError["sessionId"];
+  messageId: IError["messageId"];
+  timestamp: IError["timestamp"];
+  errorId: IError["errorId"];
+  projectId: IError["projectId"];
+  source: IError["source"];
+  name: IError["name"];
+  message: IError["message"];
+  time: IError["time"];
+  function: IError["function"];
+
+  constructor({ stack, ...rest }: IError) {
+    Object.assign(this, {
+      ...rest,
+      stack0InfoString: getStck0InfoString(stack || []),
+      function: (stack && stack[0] && stack[0].function) || '?',
+    })
+  }
+}

frontend/app/types/session/session.ts

@@ -4,7 +4,7 @@ import { Duration } from 'luxon';
 import SessionEvent, { TYPES } from './event';
 import StackEvent from './stackEvent';
 import Resource from './resource';
-import SessionError from './error';
+import SessionError, { IError } from './error';
 import Issue, { IIssue } from './issue';
 
 const HASH_MOD = 1610612741;
@@ -90,7 +90,7 @@ export default Record(
       backendErrors = 0,
       consoleErrors = 0,
       projectId,
-      errors,
+      errors = [],
       stackEvents = [],
       issues = [],
       sessionId,
@@ -124,7 +124,7 @@ export default Record(
         .concat(List(session.userEvents))
         .sortBy((se) => se.timestamp)
         .map((se) => StackEvent({ ...se, time: se.timestamp - startedAt }));
-      const exceptions = List(errors).map(SessionError);
+      const exceptions = (errors as IError[]).map(e => new SessionError(e));
 
       const issuesList = (issues as IIssue[]).map((i, k) => new Issue({ ...i, time: i.timestamp - startedAt, key: k }));