feat(frontend): Add helper methods for logging/errors

konstfish · Nov 14, 2023 · 9fa0466 · 9fa0466
1 parent a3a957b
commit 9fa0466
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 63 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,6 +5,7 @@ import LogRocket from 'logrocket';
 LogRocket.init('dzh8o1/sudokuharborcom');
 
 import { pb } from './lib/pocketbase'
+import { localStore } from './lib/localstore';
 
 import IconHome from './components/icons/IconHome.vue'
 import IconUser from './components/icons/IconUser.vue'
@@ -38,7 +39,11 @@ export default {
     };
   },
   beforeMount(){
+    console.log('Hello :) View this projects source at https://github.com/konstfish/sudoku')
+
     this.refreshAuth();
+
+    localStore.deleteOldKeys();
   },
   methods: {
     async refreshAuth(){

diff --git a/src/components/Auth.vue b/src/components/Auth.vue
@@ -2,6 +2,8 @@
 import { pb } from '../lib/pocketbase'
 import { extractErrorMessage } from '../lib/helpers'
 
+import { mlog, merr } from '../lib/helpers'
+
 import Modal from './Modal.vue'
 
 import IconUser from './icons/IconUser.vue'
@@ -80,11 +82,11 @@ export default {
             w.location.href = url
           },
         });
-        console.log(authData)
+        mlog(authData)
 
-        console.log(pb.authStore.isValid);
-        console.log(pb.authStore.token);
-        console.log(pb.authStore.model.id);
+        mlog(pb.authStore.isValid);
+        mlog(pb.authStore.token);
+        mlog(pb.authStore.model.id);
     },
 
     async emailSignIn(){
@@ -131,7 +133,7 @@ export default {
         this.infoModalContent = extractErrorMessage(error.data.data)
       }
 
-      console.error(error.data)
+      merr(error.data)
     },
 
     handlePasswordValidation({ password, isValid }) {

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -4,6 +4,8 @@ import { solveBus } from '../lib/solveBus'
 
 import { formatDateExact, formatTime } from '../lib/helpers'
 
+import { mlog, merr } from '../lib/helpers'
+
 import IconCheck from './icons/IconCheck.vue'
 import IconHeart from './icons/IconHeart.vue'
 import IconTrash from './icons/IconTrash.vue'
@@ -130,11 +132,11 @@ export default {
                 requestKey: this.comment.id
             });
 
-            console.log(this.replies)
+            mlog(this.replies)
 
             this.replies = records.items
         }catch(err){
-            console.log(err)
+            mlog(err)
         }
     },
     async submitReply(){
@@ -155,7 +157,7 @@ export default {
                 this.$refs.replies.style.maxHeight = this.$refs.replies.scrollHeight + 200 + "px";
             }, 250);
         }catch(err){
-            console.err(err);
+            merr(err);
         }
     },
     async deleteReply(replyId){
@@ -166,7 +168,7 @@ export default {
 
             this.fetchReplies();
         }catch(err){
-            console.log(err)
+            mlog(err)
         }
     },
     async deleteComment(commentId){
@@ -175,7 +177,7 @@ export default {
 
             solveBus.emit('commentDeleted', commentId);
         }catch(err){
-            console.log(err)
+            mlog(err)
         }
     },
     openReplies(){

diff --git a/src/components/CommentList.vue b/src/components/CommentList.vue
@@ -2,6 +2,8 @@
 import { pb } from '../lib/pocketbase'
 import { solveBus } from '../lib/solveBus' 
 
+import { mlog, merr } from '../lib/helpers'
+
 import Comment from './Comment.vue'
 </script>
 
@@ -71,7 +73,7 @@ export default {
                 sort: "-created"
             });
 
-            console.log(this.currentPage, records.items)
+            mlog(this.currentPage, records.items)
 
             if(pb.authStore.isValid){
                 const userComment = records.items.find(obj => obj.expand.user_id.id === pb.authStore.model.id);
@@ -89,7 +91,7 @@ export default {
 
             this.commentsLoading = false
         }catch(err){
-            console.log(err)
+            merr(err)
         }
     },
     async handleUserComment(){

diff --git a/src/components/CommentSubmission.vue b/src/components/CommentSubmission.vue
@@ -3,6 +3,8 @@ import { pb } from '../lib/pocketbase'
 import { solveBus } from '../lib/solveBus'
 import { extractErrorMessage } from '../lib/helpers'
 
+import { mlog, merr } from '../lib/helpers'
+
 import IconChat from './icons/IconChat.vue'
 import IconReplay from './icons/IconReplay.vue'
 import IconClock from './icons/IconClock.vue'
@@ -125,7 +127,7 @@ export default {
         this.infoModalContent = extractErrorMessage(error.data.data)
       }
 
-      console.error(error.data)
+      merr(error.data)
     },
   }
 };

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
@@ -3,6 +3,8 @@ import { pb } from '../lib/pocketbase'
 
 import { formatDate } from '../lib/helpers'
 
+import { mlog, merr } from '../lib/helpers'
+
 import SudokuBoardListProfile from './SudokuBoardListProfile.vue'
 
 import Modal from './Modal.vue'
@@ -74,12 +76,12 @@ export default {
       try{
         const record = await pb.collection('users').update(pb.authStore.model.id, data);
         if (pb.authStore.isValid) {
-          console.log("refresh auth")
+          mlog("refresh auth")
           await pb.collection('users').authRefresh();
           this.storeUser = pb.authStore.model.username
         }
       }catch(err){
-        console.log(err)
+        merr(err)
       }
     },
     async verifyMail(){

diff --git a/src/components/SudokuBoard.vue b/src/components/SudokuBoard.vue
@@ -2,7 +2,9 @@
 import { pb } from '../lib/pocketbase'
 import { localStore } from '../lib/localstore'
 import { solveBus } from '../lib/solveBus' 
-import { generateRange } from '../lib/helpers'
+
+import { generateRange, mlog, merr } from '../lib/helpers'
+
 
 import { isMobile } from 'mobile-device-detect';
 
@@ -127,7 +129,7 @@ export default {
   },
   beforeMount(){
     if(isMobile){
-        console.log("mobile", isMobile)
+        mlog("mobile", isMobile)
     }
 
     this.initComponent();
@@ -148,14 +150,14 @@ export default {
         this.timerStarted = true
         this.elapsedTime = 0
 
-        console.log("populating board")
+        mlog("populating board")
         this.sudokuBoard = this.createBoard()
 
         if(this.boardId){
-            console.log("fetch board")
+            mlog("fetch board")
             this.fetchBoard();
 
-            console.log("check localstorage")
+            mlog("check localstorage")
             this.checkStorage()
         }
     },
@@ -268,7 +270,7 @@ export default {
     /* pocketbase */
     async postCompletion(){
         if(pb.authStore.isValid){
-            console.log("posting result")
+            mlog("posting result")
 
             const data = {
                 "user_id": pb.authStore.model.id,
@@ -283,7 +285,7 @@ export default {
                 this.sudokuUploaded = true
                 this.updateStorage()
             }catch{
-                console.error("Error loading board")
+                merr("Error loading board")
             }
         }
         this.completedModal = false
@@ -426,7 +428,7 @@ export default {
         }
     },
     async fetchBoard(){
-        console.log(this.boardId)
+        mlog(this.boardId)
         if(this.boardId){
             try{
                 const record = await pb.collection('boards').getOne(this.boardId);
@@ -440,7 +442,7 @@ export default {
                 this.matchSolvedBoard()
                 this.boardLoading = false
             }catch{
-                console.error("Error loading board")
+                merr("Error loading board")
             }
         }
     },
@@ -483,7 +485,7 @@ export default {
     undoStep(){
         if(this.steps.length > 0){
             const step = this.steps.pop()
-            console.log(step);
+            mlog(step);
 
             switch (step.action) {
                 case "note":

diff --git a/src/components/SudokuBoardListProfile.vue b/src/components/SudokuBoardListProfile.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { pb } from '../lib/pocketbase'
 
-import { formatDate, formatTime } from '../lib/helpers'
+import { formatDate, formatTime, mlog, merr } from '../lib/helpers'
 
 import SudokuBoardMin from './SudokuBoardMin.vue';
 import SudokuViewer from './SudokuViewer.vue';
@@ -67,7 +67,7 @@ export default {
           sort: "-created"
       });
 
-      console.log(this.currentPage, records.items)
+      mlog(this.currentPage, records.items)
 
       if(records.items.length == 0){
         this.boardsToLoad = false
@@ -89,7 +89,7 @@ export default {
     },
     showReplay(boardId){
       const temp = this.solvedBoards.find(obj => obj.id === boardId);
-      console.log(this.solvedBoards.find(obj => obj.id === boardId))
+      mlog(this.solvedBoards.find(obj => obj.id === boardId))
       this.boardData = {
         board: temp.expand.board_id.board,
         steps: temp.steps,

diff --git a/src/components/SudokuViewer.vue b/src/components/SudokuViewer.vue
@@ -1,5 +1,7 @@
 <script setup>
 import Timer from './Timer.vue'
+
+import { mlog, merr } from '../lib/helpers'
 </script>
 
 <template>
@@ -59,10 +61,10 @@ export default {
   methods: {
     /* HELPERS */
     initComponent(){
-        console.log("populating board")
+        mlog("populating board")
         this.sudokuBoard = this.createBoard()
 
-        console.log("fetch board")
+        mlog("fetch board")
         this.loadBoards()
     },
     loadBoards(){
@@ -130,7 +132,7 @@ export default {
         this.elapsedTime = this.steps[index].time
         for (let i = 0; i <= index; i++) {
             let step = this.steps[i]
-            console.log(step)
+            mlog(step)
             switch (step.action) {
                 case "note":
                     this.sudokuBoard[step.sectionIndex][step.cellIndex].notes = step.number

diff --git a/src/lib/helpers.js b/src/lib/helpers.js
@@ -18,7 +18,7 @@ export function formatDate(inpDate) {
 
         return `${monthName} ${date.getDate()}, ${date.getFullYear()}`;
     } catch (e) {
-        console.error(e.message);
+        merr(e.message);
         return null;
     }
 }
@@ -42,7 +42,7 @@ export function formatDateExact(inpDate){
 
         return `${monthName} ${date.getDate()}, ${date.getFullYear()} ${hour}:${minute}`;
     } catch (e) {
-        console.error(e.message);
+        merr(e.message);
         return null;
     }
 }
@@ -53,7 +53,7 @@ export function formatTime(inpTime){
         const minutes = Math.floor(inpTime / 60);
         return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
     } catch (e) {
-        console.error(e.message);
+        merr(e.message);
         return null;
     }
 }
@@ -73,10 +73,6 @@ export function getDayRangeQuery(){
 
 export function extractErrorMessage(error) {
     if (error && typeof error === 'object') {
-        if ('message' in error) {
-            return error.message;
-        }
-
         for (let key in error) {
             if (error.hasOwnProperty(key)) {
                 const result = this.extractErrorMessage(error[key]);
@@ -85,7 +81,29 @@ export function extractErrorMessage(error) {
                 }
             }
         }
+
+        if ('message' in error) {
+            return error.message;
+        }
     }
 
     return 'Unknown Error';
-}
+}
+
+export function mlog(...args) {
+    if (process.env.NODE_ENV !== 'production') {
+        const originalTrace = new Error().stack.split('\n');
+        const callerTrace = originalTrace[2] || '';
+
+        console.log(...args, '\n\t', callerTrace.trim());
+    }
+}
+
+export function merr(...args) {
+    if (process.env.NODE_ENV !== 'production') {
+        const originalTrace = new Error().stack.split('\n');
+        const callerTrace = originalTrace[2] || '';
+
+        console.error(...args, '\n\t', callerTrace.trim());
+    }
+}