Add local logging

common/src/logging.ts

@@ -0,0 +1,62 @@
+import {IS_LOCAL} from "common/hosting/constants"
+
+class Logger {
+  private readonly isLocal: boolean;
+
+  constructor(isLocal = false) {
+    this.isLocal = isLocal;
+  }
+
+  private getCallerFrame(skip = 2): string | undefined {
+    // Create an Error to get stack trace
+    const err = new Error();
+    if (!err.stack) return undefined;
+
+    const lines = err.stack.split("\n");
+
+    // skip frames (0: Error, 1: Logger method, 2+: caller)
+    return lines[skip]?.trim();
+  }
+
+  trace(...args: any[]) {
+    // Does not seem to really work. Was trying to show the real file where the log was called from.
+    if (!this.isLocal) return;
+
+    const caller = this.getCallerFrame(3); // skip Logger frames
+    if (caller) {
+      console.log("Trace:", ...args, "\nCalled from:", caller);
+    } else {
+      console.trace(...args);
+    }
+  }
+
+  log(...args: any[]) {
+    if (this.isLocal) console.log(...args);
+  }
+
+  info(...args: any[]) {
+    if (this.isLocal) console.info(...args);
+  }
+
+  warn(...args: any[]) {
+    if (this.isLocal) console.warn(...args);
+  }
+
+  error(...args: any[]) {
+    if (this.isLocal) console.error(...args);
+  }
+
+  debug(...args: any[]) {
+    if (this.isLocal) console.debug(...args);
+  }
+
+  table(...args: any[]) {
+    if (this.isLocal) console.table(...args);
+  }
+
+  group(...args: any[]) {
+    if (this.isLocal) console.group(...args);
+  }
+}
+
+export const logger = new Logger(IS_LOCAL)

web/components/filters/use-filters.ts

@@ -6,6 +6,7 @@ import {debounce, isEqual} from "lodash";
 import {wantsKidsDatabase, wantsKidsDatabaseToWantsKidsFilter, wantsKidsToHasKidsFilter} from "common/wants-kids";
 import {FilterFields, initialFilters, OriginLocation} from "common/filters";
 import {MAX_INT, MIN_INT} from "common/constants";
+import {logger} from "common/logging";
 
 export const useFilters = (you: Profile | undefined) => {
   const isLooking = useIsLooking()
@@ -14,11 +15,11 @@ export const useFilters = (you: Profile | undefined) => {
     'profile-filters-4'
   )
 
-  // console.log('filters', filters)
+  // logger.log('filters', filters)
 
   const updateFilter = (newState: Partial<FilterFields>) => {
     const updatedState = {...newState}
-    // console.log('updating filters', updatedState)
+    // logger.log('updating filters', updatedState)
     setFilters((prevState) => ({...prevState, ...updatedState}))
   }
 
@@ -84,7 +85,7 @@ export const useFilters = (you: Profile | undefined) => {
     ),
     is_smoker: you?.is_smoker,
   }
-  console.debug(you, yourFilters)
+  logger.debug(you, yourFilters)
 
   const isYourFilters =
     !!you

web/hooks/use-profile.ts

@@ -6,6 +6,7 @@ import {User} from 'common/user'
 import {getProfileRow, Profile, ProfileRow} from 'common/profiles/profile'
 import {db} from 'web/lib/supabase/db'
 import {usePersistentLocalState} from 'web/hooks/use-persistent-local-state'
+import {logger} from "common/logging";
 
 export const useProfile = () => {
   const user = useUser()
@@ -15,7 +16,7 @@ export const useProfile = () => {
 
   const refreshProfile = () => {
     if (user) {
-      console.debug('Refreshing profile in useProfile for', user?.username, profile);
+      logger.debug('Refreshing profile in useProfile for', user?.username, profile);
       getProfileRow(user.id, db).then((profile) => {
         if (!profile) setProfile(null)
         else setProfile(profile)

web/pages/signin.tsx

@@ -15,6 +15,7 @@ import Router from "next/router"
 import {PageBase} from "web/components/page-base"
 import {GoogleButton} from "web/components/buttons/sign-up-button"
 import {SEO} from "web/components/SEO"
+import {logger} from "common/logging";
 
 export default function LoginPage() {
   return (
@@ -66,7 +67,7 @@ function RegisterComponent() {
     setError(null)
     try {
       const creds = await firebaseLogin();
-      console.debug('creds', creds)
+      logger.debug('creds', creds)
       if (creds) {
         setIsLoading(true)
         setIsLoadingGoogle(true);
@@ -83,7 +84,7 @@ function RegisterComponent() {
   const handleEmailPasswordSignIn = async (email: string, password: string) => {
     try {
       const creds = await signInWithEmailAndPassword(auth, email, password)
-      console.debug(creds)
+      logger.debug(creds)
     } catch (error) {
       console.error("Error signing in:", error)
       const message = 'Failed to sign in with your email and password'