jsnbuchanan
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

move more logging into the database

Trent Larson 2 weeks ago
parent
eb675a8ad4
commit
6ba1f6ece7
3 changed files with 83 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/App.vue
  2. 17
      src/db/index.ts
  3. 15
      sw_scripts/additional-scripts.js

87
src/App.vue
View File

@ -315,17 +315,17 @@
<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" 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>
<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" 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>
<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" 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>
<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" 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 { Vue, Component } from "vue-facing-decorator";
import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app"; 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 * as libsUtil from "@/libs/util";
import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util"; import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
@ -436,19 +436,21 @@ export default class App extends Vue {
} }
if (pushUrl.startsWith("http://localhost")) { 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 { } else {
let responseData = ""; let responseData = "";
await axios await axios
.get(pushUrl + "/web-push/vapid") .get(pushUrl + "/web-push/vapid")
.then((response: VapidResponse) => { .then((response: VapidResponse) => {
this.b64 = response.data?.vapidKey || ""; this.b64 = response.data?.vapidKey || "";
console.log("Got vapid key:", this.b64); logConsoleAndDb("Got vapid key: " + this.b64);
responseData = JSON.stringify(response.data); responseData = JSON.stringify(response.data);
navigator.serviceWorker?.addEventListener( navigator.serviceWorker?.addEventListener(
"controllerchange", "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, 5000,
); );
await addLogMessage( logConsoleAndDb(
"Error Setting Notifications: web push server response didn't have vapidKey: " + "Error Setting Notifications: web push server response didn't have vapidKey: " +
responseData, responseData,
true,
); );
} }
} }
} catch (error) { } catch (error) {
if (window.location.host.startsWith("localhost")) { 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 { } else {
console.error("Got an error initializing notifications:", error); logConsoleAndDb(
"Got an error initializing notifications: " + JSON.stringify(error),
true,
);
this.$notify( this.$notify(
{ {
group: "alert", group: "alert",
@ -482,10 +490,6 @@ export default class App extends Vue {
}, },
5000, 5000,
); );
await addLogMessage(
"Error Setting Notifications: some error occurred: " +
JSON.stringify(error),
);
} }
} }
// there may be a long pause here on first initialization // there may be a long pause here on first initialization
@ -519,7 +523,9 @@ export default class App extends Vue {
} }
private askPermission(): Promise<NotificationPermission> { private askPermission(): Promise<NotificationPermission> {
console.log("Requesting permission for notifications:", navigator); logConsoleAndDb(
"Requesting permission for notifications: " + JSON.stringify(navigator),
);
if ( if (
!("serviceWorker" in navigator && navigator.serviceWorker?.controller) !("serviceWorker" in navigator && navigator.serviceWorker?.controller)
) { ) {
@ -544,7 +550,9 @@ export default class App extends Vue {
}; };
return this.sendMessageToServiceWorker(message).then((response) => { 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() { public async turnOnNotifications() {
return this.askPermission() return this.askPermission()
.then((permission) => { .then((permission) => {
console.log("Permission granted:", permission); logConsoleAndDb("Permission granted: " + JSON.stringify(permission));
// Call the function and handle promises // Call the function and handle promises
this.subscribeToPush() this.subscribeToPush()
.then(() => { .then(() => {
console.log("Subscribed successfully."); logConsoleAndDb("Subscribed successfully.");
return navigator.serviceWorker?.ready; return navigator.serviceWorker?.ready;
}) })
.then((registration) => { .then((registration) => {
@ -684,7 +692,6 @@ export default class App extends Vue {
const utcHour = const utcHour =
hourNum + Math.round(new Date().getTimezoneOffset() / 60); hourNum + Math.round(new Date().getTimezoneOffset() / 60);
const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24; const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
console.log("utc hour:", utcHour, "final utc:", finalUtcHour);
const minuteNum = libsUtil.numberOrZero(this.minuteInput); const minuteNum = libsUtil.numberOrZero(this.minuteInput);
const utcMinute = const utcMinute =
minuteNum + Math.round(new Date().getTimezoneOffset() % 60); minuteNum + Math.round(new Date().getTimezoneOffset() % 60);
@ -697,13 +704,18 @@ export default class App extends Vue {
...subscription.toJSON(), ...subscription.toJSON(),
}; };
await this.sendSubscriptionToServer(subscriptionWithTime); 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; return subscriptionWithTime;
} else { } else {
throw new Error("Subscription object is not available."); throw new Error("Subscription object is not available.");
} }
}) })
.then(async (subscription: PushSubscriptionWithTime) => { .then(async (subscription: PushSubscriptionWithTime) => {
console.log( logConsoleAndDb(
"Subscription data sent to server and all finished successfully.", "Subscription data sent to server and all finished successfully.",
); );
await libsUtil.sendTestThroughPushServer(subscription, true); await libsUtil.sendTestThroughPushServer(subscription, true);
@ -728,9 +740,10 @@ export default class App extends Vue {
}); });
}) })
.catch((error) => { .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."); alert("Some error occurred setting notification permissions.");
}); });
@ -761,11 +774,19 @@ export default class App extends Vue {
return registration.pushManager.subscribe(options); return registration.pushManager.subscribe(options);
}) })
.then((subscription) => { .then((subscription) => {
console.log("Push subscription successful:", subscription); logConsoleAndDb(
"Push subscription successful: " + JSON.stringify(subscription),
);
resolve(); resolve();
}) })
.catch((error) => { .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 // Inform the user about the issue
alert( alert(
@ -781,7 +802,7 @@ export default class App extends Vue {
private sendSubscriptionToServer( private sendSubscriptionToServer(
subscription: PushSubscriptionWithTime, subscription: PushSubscriptionWithTime,
): Promise<void> { ): Promise<void> {
console.log("About to send subscription...", subscription); logConsoleAndDb("About to send subscription... " + subscription);
return fetch("/web-push/subscribe", { return fetch("/web-push/subscribe", {
method: "POST", method: "POST",
headers: { headers: {
@ -792,7 +813,7 @@ export default class App extends Vue {
if (!response.ok) { if (!response.ok) {
throw new Error("Failed to send subscription to server"); 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) { if (subscription) {
return subscription.unsubscribe(); return subscription.unsubscribe();
} else { } else {
console.log("Subscription object is not available."); logConsoleAndDb("Subscription object is not available.");
return false; return false;
} }
}) })
.catch((error) => { .catch((error) => {
console.error("Push provider server communication failed:", error); logConsoleAndDb(
"Push provider server communication failed: " + JSON.stringify(error),
true,
);
return false; return false;
}); });
@ -827,7 +851,10 @@ export default class App extends Vue {
return response.ok; return response.ok;
}) })
.catch((error) => { .catch((error) => {
console.error("Push server communication failed:", error); logConsoleAndDb(
"Push server communication failed: " + JSON.stringify(error),
true,
);
return false; return false;
}); });

17
src/db/index.ts
View File

@ -132,7 +132,17 @@ export async function updateAccountSettings(
await updateSettings(settings); 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(); await db.open();
const todayKey = new Date().toDateString(); const todayKey = new Date().toDateString();
// only keep one day's worth of logs // 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 // when this is today's first log, clear out everything previous
await db.logs.clear(); 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 });
} }

15
sw_scripts/additional-scripts.js
View File

@ -5,6 +5,7 @@ importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js", "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) { 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 // 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); console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
@ -13,10 +14,18 @@ function logConsoleAndDb(message, arg1, arg2) {
if (appendDailyLog) { if (appendDailyLog) {
let fullMessage = `${new Date().toISOString()} ${message}`; let fullMessage = `${new Date().toISOString()} ${message}`;
if (arg1) { if (arg1) {
fullMessage += `\n${JSON.stringify(arg1)}`; if (typeof arg1 === "string") {
fullMessage += `\n${arg1}`;
} else {
fullMessage += `\n${JSON.stringify(arg1)}`;
}
} }
if (arg2) { 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 // appendDailyLog is injected from safari-notifications.js at build time by the vue.config.js configureWebpack apply plugin
// eslint-disable-next-line no-undef // 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. // This is invoked when the user chooses this as a share_target, mapped to share-target in the manifest.
self.addEventListener("fetch", (event) => { 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); //logConsoleAndDb("Service worker got fetch event.", event);
// Bypass any regular requests not related to Web Share Target // Bypass any regular requests not related to Web Share Target

Write Preview
Loading…
Cancel
Save