move more logging into the database

src/App.vue

@@ -315,17 +315,17 @@
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 1 Hour
+                  For 1 Day
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 8 Hours
+                  For 2 Days
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 24 Hours
+                  For 1 Week
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
@@ -384,7 +384,7 @@ import axios from "axios";
 import { Vue, Component } from "vue-facing-decorator";
 
 import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import { addLogMessage, retrieveSettingsForActiveAccount } from "@/db/index";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
 import * as libsUtil from "@/libs/util";
 import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
 
@@ -436,19 +436,21 @@ export default class App extends Vue {
       }
 
       if (pushUrl.startsWith("http://localhost")) {
-        console.log("Not checking for VAPID in this local environment.");
+        logConsoleAndDb("Not checking for VAPID in this local environment.");
       } else {
         let responseData = "";
         await axios
           .get(pushUrl + "/web-push/vapid")
           .then((response: VapidResponse) => {
             this.b64 = response.data?.vapidKey || "";
-            console.log("Got vapid key:", this.b64);
+            logConsoleAndDb("Got vapid key: " + this.b64);
             responseData = JSON.stringify(response.data);
             navigator.serviceWorker?.addEventListener(
               "controllerchange",
               () => {
-                console.log("New service worker is now controlling the page");
+                logConsoleAndDb(
+                  "New service worker is now controlling the page",
+                );
               },
             );
           });
@@ -462,17 +464,23 @@ export default class App extends Vue {
             },
             5000,
           );
-          await addLogMessage(
+          logConsoleAndDb(
             "Error Setting Notifications: web push server response didn't have vapidKey: " +
               responseData,
+            true,
           );
         }
       }
     } catch (error) {
       if (window.location.host.startsWith("localhost")) {
-        console.log("Ignoring the error getting VAPID for local development.");
+        logConsoleAndDb(
+          "Ignoring the error getting VAPID for local development.",
+        );
       } else {
-        console.error("Got an error initializing notifications:", error);
+        logConsoleAndDb(
+          "Got an error initializing notifications: " + JSON.stringify(error),
+          true,
+        );
         this.$notify(
           {
             group: "alert",
@@ -482,10 +490,6 @@ export default class App extends Vue {
           },
           5000,
         );
-        await addLogMessage(
-          "Error Setting Notifications: some error occurred: " +
-            JSON.stringify(error),
-        );
       }
     }
     // there may be a long pause here on first initialization
@@ -519,7 +523,9 @@ export default class App extends Vue {
   }
 
   private askPermission(): Promise<NotificationPermission> {
-    console.log("Requesting permission for notifications:", navigator);
+    logConsoleAndDb(
+      "Requesting permission for notifications: " + JSON.stringify(navigator),
+    );
     if (
       !("serviceWorker" in navigator && navigator.serviceWorker?.controller)
     ) {
@@ -544,7 +550,9 @@ export default class App extends Vue {
     };
 
     return this.sendMessageToServiceWorker(message).then((response) => {
-      console.log("Response from service worker:", response);
+      logConsoleAndDb(
+        "Response from service worker: " + JSON.stringify(response),
+      );
     });
   }
 
@@ -647,12 +655,12 @@ export default class App extends Vue {
   public async turnOnNotifications() {
     return this.askPermission()
       .then((permission) => {
-        console.log("Permission granted:", permission);
+        logConsoleAndDb("Permission granted: " + JSON.stringify(permission));
 
         // Call the function and handle promises
         this.subscribeToPush()
           .then(() => {
-            console.log("Subscribed successfully.");
+            logConsoleAndDb("Subscribed successfully.");
             return navigator.serviceWorker?.ready;
           })
           .then((registration) => {
@@ -684,7 +692,6 @@ export default class App extends Vue {
               const utcHour =
                 hourNum + Math.round(new Date().getTimezoneOffset() / 60);
               const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
-              console.log("utc hour:", utcHour, "final utc:", finalUtcHour);
               const minuteNum = libsUtil.numberOrZero(this.minuteInput);
               const utcMinute =
                 minuteNum + Math.round(new Date().getTimezoneOffset() % 60);
@@ -697,13 +704,18 @@ export default class App extends Vue {
                 ...subscription.toJSON(),
               };
               await this.sendSubscriptionToServer(subscriptionWithTime);
+              // To help investigate potential issues with this: https://firebase.google.com/docs/cloud-messaging/migrate-v1
+              logConsoleAndDb(
+                "Subscription data sent to server with endpoint: " +
+                  subscription.endpoint,
+              );
               return subscriptionWithTime;
             } else {
               throw new Error("Subscription object is not available.");
             }
           })
           .then(async (subscription: PushSubscriptionWithTime) => {
-            console.log(
+            logConsoleAndDb(
               "Subscription data sent to server and all finished successfully.",
             );
             await libsUtil.sendTestThroughPushServer(subscription, true);
@@ -728,9 +740,10 @@ export default class App extends Vue {
           });
       })
       .catch((error) => {
-        console.error(
+        logConsoleAndDb(
-          "An error occurred setting notification permissions:",
+          "An error occurred setting notification permissions: " +
-          error,
+            JSON.stringify(error),
+          true,
         );
         alert("Some error occurred setting notification permissions.");
       });
@@ -761,11 +774,19 @@ export default class App extends Vue {
           return registration.pushManager.subscribe(options);
         })
         .then((subscription) => {
-          console.log("Push subscription successful:", subscription);
+          logConsoleAndDb(
+            "Push subscription successful: " + JSON.stringify(subscription),
+          );
           resolve();
         })
         .catch((error) => {
-          console.error("Push subscription failed:", error, options);
+          logConsoleAndDb(
+            "Push subscription failed: " +
+              JSON.stringify(error) +
+              " - " +
+              JSON.stringify(options),
+            true,
+          );
 
           // Inform the user about the issue
           alert(
@@ -781,7 +802,7 @@ export default class App extends Vue {
   private sendSubscriptionToServer(
     subscription: PushSubscriptionWithTime,
   ): Promise<void> {
-    console.log("About to send subscription...", subscription);
+    logConsoleAndDb("About to send subscription... " + subscription);
     return fetch("/web-push/subscribe", {
       method: "POST",
       headers: {
@@ -792,7 +813,7 @@ export default class App extends Vue {
       if (!response.ok) {
         throw new Error("Failed to send subscription to server");
       }
-      console.log("Subscription sent to server successfully.");
+      logConsoleAndDb("Subscription sent to server successfully.");
     });
   }
 
@@ -807,12 +828,15 @@ export default class App extends Vue {
         if (subscription) {
           return subscription.unsubscribe();
         } else {
-          console.log("Subscription object is not available.");
+          logConsoleAndDb("Subscription object is not available.");
           return false;
         }
       })
       .catch((error) => {
-        console.error("Push provider server communication failed:", error);
+        logConsoleAndDb(
+          "Push provider server communication failed: " + JSON.stringify(error),
+          true,
+        );
         return false;
       });
 
@@ -827,7 +851,10 @@ export default class App extends Vue {
         return response.ok;
       })
       .catch((error) => {
-        console.error("Push server communication failed:", error);
+        logConsoleAndDb(
+          "Push server communication failed: " + JSON.stringify(error),
+          true,
+        );
         return false;
       });
 

src/db/index.ts

@@ -132,7 +132,17 @@ export async function updateAccountSettings(
   await updateSettings(settings);
 }
 
-export async function addLogMessage(message: string): Promise<void> {
+// similar method is in the sw_scripts/additional-scripts.js file
+export async function logConsoleAndDb(
+  message: string,
+  isError = false,
+): Promise<void> {
+  if (isError) {
+    console.error(`${new Date().toISOString()} ${message}`);
+  } else {
+    console.log(`${new Date().toISOString()} ${message}`);
+  }
+
   await db.open();
   const todayKey = new Date().toDateString();
   // only keep one day's worth of logs
@@ -141,6 +151,7 @@ export async function addLogMessage(message: string): Promise<void> {
     // when this is today's first log, clear out everything previous
     await db.logs.clear();
   }
-  const fullMessage = (previous && previous.message) || "";
+  const prevMessages = (previous && previous.message) || "";
-  await db.logs.update(todayKey, { message: fullMessage + "\n" + message });
+  const fullMessage = `${prevMessages}\n${new Date().toISOString()} ${message}`;
+  await db.logs.update(todayKey, { message: fullMessage });
 }

sw_scripts/additional-scripts.js

@@ -5,6 +5,7 @@ importScripts(
   "https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js",
 );
 
+// similar method is in the src/db/index.ts file
 function logConsoleAndDb(message, arg1, arg2) {
   // in chrome://serviceworker-internals note that the arg1 and arg2 here will show as "[object Object]" in that page but will show as expandable objects in the console
   console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
@@ -13,10 +14,18 @@ function logConsoleAndDb(message, arg1, arg2) {
   if (appendDailyLog) {
     let fullMessage = `${new Date().toISOString()} ${message}`;
     if (arg1) {
-      fullMessage += `\n${JSON.stringify(arg1)}`;
+      if (typeof arg1 === "string") {
+        fullMessage += `\n${arg1}`;
+      } else {
+        fullMessage += `\n${JSON.stringify(arg1)}`;
+      }
     }
     if (arg2) {
-      fullMessage += `\n${JSON.stringify(arg2)}`;
+      if (typeof arg2 === "string") {
+        fullMessage += `\n${arg2}`;
+      } else {
+        fullMessage += `\n${JSON.stringify(arg2)}`;
+      }
     }
     // appendDailyLog is injected from safari-notifications.js at build time by the vue.config.js configureWebpack apply plugin
     // eslint-disable-next-line no-undef
@@ -133,7 +142,7 @@ self.addEventListener("notificationclick", (event) => {
 
 // This is invoked when the user chooses this as a share_target, mapped to share-target in the manifest.
 self.addEventListener("fetch", (event) => {
-  // Skipping this because we get so many of them, at startup and other times.
+  // Skipping this because we get so many of them, at startup and other times, all with an event of: {isTrusted:true}
   //logConsoleAndDb("Service worker got fetch event.", event);
 
   // Bypass any regular requests not related to Web Share Target