refactor: add client log on task list change

frontend/package.json

@@ -43,6 +43,8 @@
     "immer": "^9.0.2",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
+    "loglevel": "^1.7.1",
+    "loglevel-plugin-remote": "^0.6.8",
     "node-emoji": "^1.10.0",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",

frontend/src/index.tsx

@@ -10,10 +10,24 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
 import weekday from 'dayjs/plugin/weekday';
+import log from 'loglevel';
+import remote from 'loglevel-plugin-remote';
 import cache from './App/cache';
 import App from './App';
 
-// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
+if (process.env.REACT_APP_NODE_ENV === 'production') {
+  remote.apply(log, { format: remote.json });
+  switch (process.env.REACT_APP_LOG_LEVEL) {
+    case 'info':
+      log.setLevel(log.levels.INFO);
+      break;
+    case 'debug':
+      log.setLevel(log.levels.DEBUG);
+      break;
+    default:
+      log.setLevel(log.levels.ERROR);
+  }
+}
 
 enableMapSet();
 
@@ -30,7 +44,6 @@ dayjs.updateLocale('en', {
 });
 
 const client = new ApolloClient({ uri: '/graphql', cache });
-console.log('cloient', client);
 
 ReactDOM.render(
   <ApolloProvider client={client}>

frontend/src/shared/components/Lists/index.tsx

@@ -4,6 +4,7 @@ import List, { ListCards } from 'shared/components/List';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import AddList from 'shared/components/AddList';
+import log from 'loglevel';
 import {
   isPositionChanged,
   getSortedDraggables,
@@ -262,6 +263,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
             id: destination.droppableId,
           },
         };
+        log.debug(
+          `action=move taskId=${droppedTask.id} source=${source.droppableId} dest=${destination.droppableId} oldPos=${droppedTask.position} newPos=${newPosition}`,
+        );
         onTaskDrop(newTask, droppedTask.taskGroup.id);
       }
     }

frontend/src/taskcafe.d.ts

@@ -1,3 +1,5 @@
+declare module 'loglevel-plugin-remote';
+
 interface JWTToken {
   userId: string;
   orgRole: string;

frontend/yarn.lock

@@ -9054,7 +9054,12 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loglevel@^1.6.8:
+loglevel-plugin-remote@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/loglevel-plugin-remote/-/loglevel-plugin-remote-0.6.8.tgz#9234b75520491dc5b1a34abbbba0101f02dd2b39"
+  integrity sha512-EMhWUOAx4/Wtge1bNzYDvvXzv6PLt07emqTjA+Sc8WfViNSYXxe6kWYFyjcqGS6mqNeOqQ3+AG0xuasynHK0XA==
+
+loglevel@^1.6.8, loglevel@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==

internal/route/log.go

@@ -0,0 +1,33 @@
+package route
+
+import (
+	"encoding/json"
+	"net/http"
+
+	log "github.com/sirupsen/logrus"
+)
+
+type ClientLog struct {
+	Level      string `json:"level"`
+	Message    string `json:"message"`
+	Logger     string `json:"logger"`
+	Stacktrace string `json:"stacktrace"`
+	Timestamp  string `json:"timestamp"`
+}
+
+type ClientLogs struct {
+	Logs []ClientLog `json:"logs"`
+}
+
+func (h *TaskcafeHandler) HandleClientLog(w http.ResponseWriter, r *http.Request) {
+	var clientLogs ClientLogs
+	err := json.NewDecoder(r.Body).Decode(&clientLogs)
+	if err != nil {
+		w.WriteHeader(http.StatusBadRequest)
+		log.Debug("bad request body")
+		return
+	}
+	for _, logEntry := range clientLogs.Logs {
+		log.WithField("level", logEntry.Level).WithField("message", logEntry.Message).Info("found log")
+	}
+}

internal/route/route.go

@@ -103,6 +103,7 @@ func NewRouter(dbConnection *sqlx.DB, emailConfig utils.EmailConfig, securityCon
 		mux.Post("/auth/confirm", taskcafeHandler.ConfirmUser)
 		mux.Post("/auth/register", taskcafeHandler.RegisterUser)
 		mux.Get("/settings", taskcafeHandler.PublicSettings)
+		mux.Post("/logger", taskcafeHandler.HandleClientLog)
 	})
 	auth := AuthenticationMiddleware{*repository}
 	r.Group(func(mux chi.Router) {