chore: remove usage of console.log in primary SPA

src/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": "error"
+  }
+}

src/common/Error/handler.ts

@@ -1,4 +1,5 @@
 import * as Sentry from '@sentry/react'
+import { logger } from '../../logger'
 import { SENTRY_CONFIG } from '../../config/config'
 
 export const initErrorHandler = () => {
@@ -7,7 +8,7 @@ export const initErrorHandler = () => {
     location.search.indexOf('noSentry=true') !== -1 ||
     location.hostname === 'localhost'
   ) {
-    console.log('No error handler for this environment')
+    logger.info('No error handler for this environment')
     return
   }
 

src/logger/index.ts

@@ -1,6 +1,6 @@
 import Logger from 'pino'
 import { createPinoBrowserSend, createWriteStream } from 'pino-logflare'
-import { getConfigurationOption } from 'src/config/config'
+import { getConfigurationOption } from '../config/config'
 
 const logLevel = getConfigurationOption('REACT_APP_LOG_LEVEL', 'info')
 

src/modules/admin/pages/adminUsers.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from 'theme-ui'
 import { useEffect, useState } from 'react'
 import { format } from 'date-fns'
+import { logger } from '../../../logger'
 import Table from '../components/Table/Table'
 import type {
   ITableProps,
@@ -91,7 +92,7 @@ const AdminUsers = observer(() => {
       const index = Fuse.createIndex(fuseOptions.keys, usersdata)
       fuse.setCollection(usersdata, index)
     } catch (error) {
-      console.log({ error })
+      logger.info({ error })
     }
     setLoading(false)
   }

src/pages/Maps/Maps.tsx

@@ -9,6 +9,7 @@ import { Box } from 'theme-ui'
 
 import './styles.css'
 
+import { logger } from '../../logger'
 import type { ILatLng } from 'src/models/maps.models'
 import { GetLocation } from 'src/utils/geolocation'
 import type { Map } from 'react-leaflet'
@@ -68,7 +69,7 @@ class MapsPage extends React.Component<IProps, IState> {
         lng: position.coords.longitude,
       })
     } catch (error) {
-      console.error(error)
+      logger.error(error)
       // do nothing if location cannot be retrieved
     }
   }

src/pages/common/UploadedFile/FirebaseFileUploader.tsx

@@ -47,7 +47,7 @@ export class FirebaseFileUploader extends React.Component<IProps, IState> {
   }
   public handleUploadError = (error: any) => {
     this.setState({ isUploading: false })
-    console.error(error)
+    logger.error(error)
   }
   // on success update progress and pass back complete url to parent component
   public handleUploadSuccess = async (filename: string) => {

src/serviceWorkerRegistration.ts

@@ -1,5 +1,5 @@
 // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim
-
+import { logger } from './logger'
 import { Workbox } from 'workbox-window'
 
 // initial code adapted from create-react-app (v4)
@@ -91,7 +91,7 @@ function checkValidServiceWorker(swUrl: string, callback: RegisterSWCallback) {
       }
     })
     .catch(() => {
-      console.log(
+      logger.info(
         'No internet connection found. App is running in offline mode.',
       )
     })
@@ -104,7 +104,7 @@ export function unregister() {
         registration.unregister()
       })
       .catch((error) => {
-        console.error(error.message)
+        logger.error(error.message)
       })
   }
 }

src/stores/Admin/admin.store.ts

@@ -4,6 +4,7 @@ import { action, observable, makeObservable } from 'mobx'
 import type { IUser, UserRole } from 'src/models/user.models'
 import type { ITag } from 'src/models/tags.model'
 import { functions } from 'src/utils/firebase'
+import { logger } from '../../logger'
 
 /*********************************************************************************
  *  The admin store contains methods for updating user permissions.
@@ -74,7 +75,7 @@ export class AdminStore extends ModuleStore {
       const email = res.data
       return email
     } catch (error) {
-      console.error(error)
+      logger.error(error)
       return `unable to get user email - ${error.message}`
     }
   }

src/stores/Howto/howto.store.tsx

@@ -287,8 +287,8 @@ export class HowtoStore extends ModuleStore {
         await this.setActiveHowtoBySlug(updated?.slug || '')
       }
     } catch (err) {
-      console.log({ err })
-      console.error(err)
+      logger.info({ err })
+      logger.error(err)
       throw new Error(err)
     }
   }
@@ -420,7 +420,7 @@ export class HowtoStore extends ModuleStore {
         }
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }
@@ -443,7 +443,7 @@ export class HowtoStore extends ModuleStore {
         await this.setActiveHowtoBySlug(howto.slug)
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }

src/stores/Research/research.store.tsx

@@ -300,7 +300,7 @@ export class ResearchStore extends ModuleStore {
           this.activeResearchItem = createdItem
         })
       } catch (error) {
-        console.error(error)
+        logger.error(error)
         throw new Error(error?.message)
       }
     }
@@ -359,7 +359,7 @@ export class ResearchStore extends ModuleStore {
         })
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }
@@ -422,7 +422,7 @@ export class ResearchStore extends ModuleStore {
         }
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }

src/stores/Theme/theme.store.tsx

@@ -4,6 +4,7 @@ import preciousPlasticTheme from 'src/themes/precious-plastic'
 import projectKampTheme from 'src/themes/project-kamp'
 import fixingFashionTheme from 'src/themes/fixing-fashion'
 import { getConfigurationOption } from 'src/config/config'
+import { logger } from '../../logger'
 
 const themeMap = {
   'precious-plastic': preciousPlasticTheme,
@@ -21,7 +22,7 @@ export class ThemeStore {
   constructor() {
     makeAutoObservable(this)
 
-    console.log(`Current theme:`, this.currentTheme)
+    logger.debug(`Current theme:`, this.currentTheme)
   }
 
   @action

src/stores/User/user.store.ts

@@ -381,7 +381,7 @@ export class UserStore extends ModuleStore {
         //TODO: ensure current user is updated
       }
     } catch (err) {
-      console.error(err)
+      logger.error(err)
       throw new Error(err)
     }
   }

src/stores/databaseV2/CollectionReference.tsx

@@ -7,6 +7,7 @@ import type {
 import type { Observer } from 'rxjs'
 import { Observable } from 'rxjs'
 import { DocReference } from './DocReference'
+import { logger } from '../../logger'
 
 export class CollectionReference<T> {
   constructor(private endpoint: string, private clients: DBClients) {}
@@ -58,9 +59,6 @@ export class CollectionReference<T> {
           totals.live = updates.length
           await cacheDB.setBulkDocs(endpoint, updates)
           const allDocs = await cacheDB.getCollection<T>(endpoint)
-          // console.group(`[${endpoint}] docs retrieved`)
-          // console.table(totals)
-          // console.groupEnd()
           obs.next(allDocs)
         })
         // 4. Check for any document deletes, and remove as appropriate
@@ -130,7 +128,7 @@ export class CollectionReference<T> {
           limit,
         })
       } catch (error) {
-        console.error(error)
+        logger.error(error)
         // at least we can say we tried...
       }
     }

src/stores/databaseV2/clients/dexie.tsx

@@ -7,6 +7,7 @@ import type {
 } from '../types'
 import { DB_QUERY_DEFAULTS } from '../utils/db.utils'
 import { DB_ENDPOINTS } from '../endpoints'
+import { logger } from '../../../logger'
 
 /**
  * Update the cache number either when making changes to db architecture
@@ -91,7 +92,7 @@ export class DexieClient implements AbstractDBClient {
       case '>':
         return ref.where(field).below(value)
       default:
-        console.error('no dexie query mapping for ' + operator)
+        logger.error('no dexie query mapping for ' + operator)
         throw new Error(
           'mapping has not been created for dexie query: ' + operator,
         )
@@ -108,7 +109,7 @@ export class DexieClient implements AbstractDBClient {
     // test open db, catch errors for upgrade version not defined or
     // idb not supported
     db.open().catch(async (err) => {
-      console.error(err)
+      logger.error(err)
       // NOTE - invalid state error suggests dexie not supported, so
       // try reloading with cachedb disabled (see db index for implementation)
       if (err.name === Dexie.errnames.InvalidState) {

src/utils/firebase.ts

@@ -5,6 +5,7 @@ import 'firebase/storage'
 import 'firebase/functions'
 import 'firebase/database'
 import { FIREBASE_CONFIG, SITE } from '../config/config'
+import { logger } from '../logger'
 // initialise with config settings, additional firestore config to support future changes
 
 firebase.initializeApp(FIREBASE_CONFIG)
@@ -18,15 +19,15 @@ const functions = firebase.functions()
 
 // use emulators when running on localhost:4000
 if (SITE === 'emulated_site') {
-  console.log(`Connecting to emulated services:`)
+  logger.debug(`Connecting to emulated services:`)
   firestore.useEmulator('localhost', 4003)
-  console.log(`Connecting rtdb on port `, 4006)
+  logger.debug(`Connecting rtdb on port `, 4006)
   rtdb.useEmulator('localhost', 4006)
-  console.log(`Connecting storage on port `, 4007)
+  logger.debug(`Connecting storage on port `, 4007)
   storage.useEmulator('localhost', 4007)
-  console.log(`Connecting auth on port `, 4005)
+  logger.debug(`Connecting auth on port `, 4005)
   auth.useEmulator(`http://localhost:4005`)
-  console.log(`Connecting functions on port `, 4002)
+  logger.debug(`Connecting functions on port `, 4002)
   functions.useEmulator('localhost', 4002)
 }