frontend: wip forntend logging

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trubudget-frontend",
-"version": "1.26.0",
+  "version": "1.26.0",
   "private": true,
   "repository": {
     "type": "git",
@@ -53,7 +53,9 @@
     "redux": "^3.6.0",
     "redux-debounced": "^0.4.0",
     "redux-immutable": "^4.0.0",
-    "redux-saga": "^1.0.2"
+    "redux-logger": "^3.0.6",
+    "redux-saga": "^1.0.2",
+    "seamless-immutable": "^7.1.4"
   },
   "devDependencies": {
     "@babel/register": "^7.4.4",

frontend/src/index.js

@@ -1,25 +1,22 @@
+import amber from "@material-ui/core/colors/amber";
+import red from "@material-ui/core/colors/deepOrange";
+import grey from "@material-ui/core/colors/grey";
+import blue from "@material-ui/core/colors/indigo";
+import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
+import { ConnectedRouter } from "connected-react-router/immutable";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { createBrowserHistory } from "history";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
-import { ConnectedRouter } from "connected-react-router/immutable";
 import { Route, Switch, withRouter } from "react-router";
-import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
-import { createBrowserHistory } from "history";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-import red from "@material-ui/core/colors/deepOrange";
-import blue from "@material-ui/core/colors/indigo";
-import grey from "@material-ui/core/colors/grey";
-import amber from "@material-ui/core/colors/amber";
-
-import Main from "./pages/Main/Main";
+import withInitialLoading from "./pages/Loading/withInitialLoading";
 import LoginPageContainer from "./pages/Login/LoginPageContainer";
 import PrivateRoute from "./pages/Login/PrivateRoute";
+import Main from "./pages/Main/Main";
 import LiveNotificationContainer from "./pages/Notifications/LiveNotificationContainer";
-
 import configureStore from "./store";
-import withInitialLoading from "./pages/Loading/withInitialLoading";
 
 // setup dayjs
 // if you need to add time to your charts you have to add a dayjs adapter
@@ -28,7 +25,7 @@ dayjs.extend(relativeTime);
 
 const history = createBrowserHistory();
 
-const store = configureStore(history);
+export const store = configureStore(history);
 
 const muiTheme = createMuiTheme({
   palette: {

frontend/src/logging/console.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-console */
+(() => {
+  const _log = console.log;
+  const _error = console.error;
+  const _warning = console.warning;
+
+  console.error = function(errMessage) {
+    _error.apply(console, arguments);
+  };
+
+  console.log = function(logMessage) {
+    // Do something with the log message
+    _log.apply(console, arguments);
+  };
+
+  console.warning = function(warnMessage) {
+    // do something with the warn message
+    _warning.apply(console, arguments);
+  };
+})();

frontend/src/logging/logger.js

@@ -0,0 +1,73 @@
+import axios from "axios";
+import { createLogger } from "redux-logger";
+import { store } from "./../index";
+
+// const api = new Api();
+// api.setAuthorizationHeader(
+//   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJyb290IiwiYWRkcmVzcyI6IjEzcHBYMnNpQTNNWHRBZDdCS0pFeFR6dGNOZFI5OVRIQjZib2FnIiwib3JnYW5pemF0aW9uIjoiS2ZXIiwib3JnYW5pemF0aW9uQWRkcmVzcyI6IjEzcHBYMnNpQTNNWHRBZDdCS0pFeFR6dGNOZFI5OVRIQjZib2FnIiwiZ3JvdXBzIjpbXSwiaWF0IjoxNjM0Nzk0MjY1LCJleHAiOjE2MzQ4MjMwNjV9.aH4BUpofN2oFt9L9_3zIBQ7QNxJLrHL5fXcKf7Ha0-8"
+// );
+let instance = undefined;
+const getToken = () => (store ? store.getState().toJS().login.jwt : "");
+const getUserId = () => "todo";
+
+const createConnection = () => {
+  //if url provided && url is https when not in dev mode
+  instance = axios.create();
+  instance.defaults.baseURL = `http://localhost:3001`;
+};
+
+const setToken = () => {
+  let t = getToken();
+  instance.defaults.headers.common["Authorization"] = t ? `Bearer ${t}` : "";
+};
+
+const logger = createLogger({
+  timestamp: true,
+  logErrors: true,
+  predicate: (getState, action) => predicate(getState, action),
+  stateTransformer: s => stateTransformer(s),
+  diff: true,
+  errorTransformer: error => errorTransformer(error)
+});
+const stateTransformer = s => s;
+
+const predicate = (getState, action) => {
+  createLogMsg({
+    service: "FRONTEND",
+    what: "Error", //todo: this should be trace
+    why: {
+      action: action,
+      prevState: stateTransformer(getState())
+    }
+  });
+  //if (process.env.loglevel == "trace") return true;
+  return false;
+};
+
+const errorTransformer = error => {
+  createLogMsg({
+    service: "FRONTEND",
+    what: "Error",
+    why: error
+  });
+  return error;
+};
+
+export const createLogMsg = async log => {
+  const msg = {
+    ...log,
+    when: new Date().toString(),
+    who: getUserId()
+  };
+  if (instance) {
+    if (
+      instance.defaults.headers.common["Authorization"] === "" ||
+      instance.defaults.headers.common["Authorization"] === undefined
+    )
+      setToken();
+    instance.post("/api", { ...msg });
+  }
+};
+
+createConnection();
+export default logger;

frontend/src/store.js

@@ -2,23 +2,23 @@
  * Create the store with asynchronously loaded reducers
  */
 
-import { createStore, applyMiddleware, compose } from "redux";
-import { fromJS } from "immutable";
 import { routerMiddleware } from "connected-react-router";
-import createSagaMiddleware from "redux-saga";
+import { fromJS } from "immutable";
+import { applyMiddleware, compose, createStore } from "redux";
 import createDebounce from "redux-debounced";
-
+import createSagaMiddleware from "redux-saga";
+import { loadState, persistState } from "./localStorage";
+import reduxLogger from "./logging/logger";
 import createReducer from "./reducers";
 import rootSaga from "./sagas";
-import { loadState, persistState } from "./localStorage";
 
 const sagaMiddleware = createSagaMiddleware();
 
 export default function configureStore(history) {
   // Create the store with two middlewares
   // 1. sagaMiddleware: Makes redux-sagas work
   // 2. routerMiddleware: Syncs the location/URL path to the state
-  const middlewares = [sagaMiddleware, createDebounce(), routerMiddleware(history)];
+  const middlewares = [sagaMiddleware, createDebounce(), routerMiddleware(history), reduxLogger];
 
   const enhancers = [applyMiddleware(...middlewares)];