feat: Add logger.

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@darkobits/env": "^2.0.0",
     "@darkobits/log": "2.0.0-beta.16",
+    "@darkobits/react-kit": "^0.4.1",
     "@darkobits/serverless-kit": "0.2.4",
     "@vanilla-extract/dynamic": "^2.1.1",
     "animate.css": "^4.1.1",
@@ -43,6 +44,7 @@
     "react-bootstrap": "^2.10.2",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
+    "style-object-to-css-string": "^1.1.3",
     "swipe-listener": "^1.3.0",
     "throttle-debounce": "^5.0.0",
     "url-parse-lax": "^4.0.0",

src/web/contexts/Inspirat.tsx

@@ -6,6 +6,7 @@ import useAsyncEffect from 'use-async-effect';
 import { BACKGROUND_ANIMATION_INITIAL_SCALE } from 'web/etc/constants';
 import useQuery from 'web/hooks/use-query';
 import withNamespace from 'web/hooks/use-storage-item';
+import { Logger } from 'web/lib/log';
 import {
   getPhotoCollections,
   getCurrentPhotoFromCollection,
@@ -24,6 +25,7 @@ import {
 
 import type { InspiratPhotoResource } from 'etc/types';
 
+const log = new Logger({ prefix: '🌅 •' });
 
 /**
  * Shape of the object provided by this hook.
@@ -181,10 +183,7 @@ export function InspiratProvider(props: React.PropsWithChildren) {
   // ----- [Callbacks] ---------------------------------------------------------
 
   const buildPhotoUrls = React.useCallback((photo: InspiratPhotoResource) => {
-    if (!photo?.urls) {
-      console.error('BAD PHOTO', photo);
-      throw new Error('[buildPhotoUrls] Got invalid input.', { cause: photo });
-    }
+    if (!photo?.urls) throw new Error('[buildPhotoUrls] Got invalid input.', { cause: photo });
 
     // This is where IMGIX configuration for low and high quality versions of
     // photos is defined.
@@ -230,7 +229,7 @@ export function InspiratProvider(props: React.PropsWithChildren) {
     const timeToUpdate = midnight() - now();
 
     ifDebug(() => {
-      console.debug(`[setPhotoUpdateTimer] Current photo will update in ${prettyMs(timeToUpdate)}.`);
+      log.debug(`Current photo will update in ${prettyMs(timeToUpdate)}.`);
 
       if (!window.debug) window.debug = {};
       Reflect.defineProperty(window.debug, 'expiresIn', {
@@ -239,7 +238,7 @@ export function InspiratProvider(props: React.PropsWithChildren) {
     }, { once: true });
 
     const timeoutHandle = setTimeout(() => {
-      ifDebug(() => console.debug('[setPhotoUpdateTimer] Updating photo.'));
+      ifDebug(() => log.debug('Updating photo.'));
       updatePhotosWithTimer();
     }, timeToUpdate);
 

src/web/etc/service-worker.ts

@@ -1,6 +1,9 @@
 import queryString from 'query-string';
 import { registerSW } from 'virtual:pwa-register';
 
+import { Logger } from 'web/lib/log';
+
+const log = new Logger({ prefix: '💁🏻‍♂️ •' });
 
 /**
  * Note: Hella contains a much more robust implementation of this logic that
@@ -43,23 +46,23 @@ const debug = Object.keys(queryString.parse(location.search)).includes('debug');
 if (import.meta.env.NODE_ENV === 'production') {
   const updateSW = registerSW({
     onRegistered: registration => {
-      if (debug) console.debug('[ServiceWorker] Got event: onRegistered');
+      if (debug) log.debug('Got event: onRegistered');
 
       const doUpdateCheck = () => {
         registration?.update().then(() => {
-          if (debug) console.debug('[ServiceWorker] Update check completed.');
+          if (debug) log.debug('Update check completed.');
           updateCheckTimeout = setTimeout(doUpdateCheck, updateCheckInterval);
         }).catch(() => {
           updateErrorCount += 1;
 
           if (updateErrorCount >= maxUpdateErrors) {
-            if (debug) console.error('[ServiceWorker] Maximum failed update check attempts reached; cancelling further update checks.');
+            if (debug) log.error('Maximum failed update check attempts reached; cancelling further update checks.');
 
             if (updateCheckTimeout) {
               clearTimeout(updateCheckTimeout);
             }
           } else {
-            if (debug) console.error(`[ServiceWorker] Update check failed. ${maxUpdateErrors - updateErrorCount} failed attempts remaining.`);
+            if (debug) log.error(`Update check failed. ${maxUpdateErrors - updateErrorCount} failed attempts remaining.`);
             updateCheckTimeout = setTimeout(doUpdateCheck, updateCheckInterval);
           }
         });
@@ -70,12 +73,12 @@ if (import.meta.env.NODE_ENV === 'production') {
     // Emitted when an error occurs when trying to install or register the
     // service worker.
     onRegisterError: err => {
-      if (debug) console.error('[ServiceWorker] Got event: onRegistrationError', err);
+      if (debug) log.error('Got event: onRegistrationError', err);
     },
     // Emitted when the service worker has downloaded new assets and a page
     // refresh is needed to apply them.
     onNeedRefresh: () => {
-      if (debug) console.debug('[ServiceWorker] Got event: onNeedRefresh; reloading page.');
+      if (debug) log.debug('Got event: onNeedRefresh; reloading page.');
 
       void updateSW().then(() => {
         window.location.reload();
@@ -85,7 +88,7 @@ if (import.meta.env.NODE_ENV === 'production') {
     // been downloaded. This typically is only emitted the first time the
     // service worker is installed and has primed the cache.
     onOfflineReady: () => {
-      if (debug) console.debug('[ServiceWorker] Got event: onOfflineReady');
+      if (debug) log.debug('Got event: onOfflineReady');
     }
   });
 }

src/web/index.tsx

@@ -5,6 +5,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import App from 'web/components/App';
 import 'web/etc/global-styles.css';
 import 'web/etc/service-worker';
+import log from 'web/lib/log';
 
 render('#root', <App />);
-console.debug(`Version ${import.meta.env.GIT_DESC}.`);
+log.debug('🔖 •', import.meta.env.GIT_DESC);