From d2207f1f9d0aab76ac156f665b4ff8ae5d90e7f1 Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Tue, 10 Sep 2024 20:50:53 -0600 Subject: [PATCH] chore: add smi debug --- src/main.ts | 4 +- src/obsidian/vault-explorer-settings-tab.ts | 4 +- src/svelte/app/components/grid-card.svelte | 55 ++++++++++++++++--- ...cial-media-image-cache.ts => smi-cache.ts} | 43 ++++++++++----- 4 files changed, 79 insertions(+), 27 deletions(-) rename src/svelte/app/services/{social-media-image-cache.ts => smi-cache.ts} (67%) diff --git a/src/main.ts b/src/main.ts index 7afa086..1bf609b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -18,7 +18,7 @@ import { moveFocus } from "./focus-utils"; import { PluginEvent } from "./event/types"; import { isVersionLessThan } from "./utils"; import License from "./svelte/shared/services/license"; -import { clearSocialMediaImageCache } from "./svelte/app/services/social-media-image-cache"; +import { clearSMICache } from "./svelte/app/services/smi-cache"; import store from "./svelte/shared/services/store"; import "./styles.css"; @@ -210,7 +210,7 @@ export default class VaultExplorerPlugin extends Plugin { localStorage.removeItem(LOCAL_STORAGE_LICENSE_KEY); } if (isVersionLessThan(loadedVersion, "1.37.1")) { - await clearSocialMediaImageCache(); + await clearSMICache(); } } } diff --git a/src/obsidian/vault-explorer-settings-tab.ts b/src/obsidian/vault-explorer-settings-tab.ts index 8f7e690..57c696e 100644 --- a/src/obsidian/vault-explorer-settings-tab.ts +++ b/src/obsidian/vault-explorer-settings-tab.ts @@ -21,7 +21,7 @@ import ImageSourceApp from "../svelte/image-source-app/index.svelte"; import { PluginEvent } from "src/event/types"; import "./styles.css"; -import { clearSocialMediaImageCache } from "src/svelte/app/services/social-media-image-cache"; +import { clearSMICache } from "src/svelte/app/services/smi-cache"; export default class VaultExplorerSettingsTab extends PluginSettingTab { plugin: VaultExplorerPlugin; @@ -697,7 +697,7 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab { .setClass("mod-destructive") .setButtonText("Clear cache") .onClick(async () => { - await clearSocialMediaImageCache(); + await clearSMICache(); }) ); } diff --git a/src/svelte/app/components/grid-card.svelte b/src/svelte/app/components/grid-card.svelte index 57321f2..caec80b 100644 --- a/src/svelte/app/components/grid-card.svelte +++ b/src/svelte/app/components/grid-card.svelte @@ -18,11 +18,12 @@ import Divider from "src/svelte/shared/components/divider.svelte"; import { fetchSocialMediaImage } from "../services/fetch-social-media-image"; import { - getSocialMediaImageEntry, - isSocialMediaImageEntryExpired, - putSocialMediaImageUrl, - } from "../services/social-media-image-cache"; + getSMICacheEntry, + isSMICacheEntryExpired, + putSMICacheEntry, + } from "../services/smi-cache"; import { CoverImageFit } from "src/types"; + import Logger from "js-logger"; type SocialMediaImageResult = { status: "SUCCESS" | "NOT_FOUND" | "EXPIRED" | "NO_IMAGE"; @@ -134,21 +135,48 @@ } async function handleImageError(event: Event) { + Logger.trace({ + fileName: "grid-card.svelte", + functionName: "handleImageError", + message: "called", + }); + const target = event.target as HTMLImageElement; target.onerror = null; // Prevent infinite loop + Logger.debug( + { + fileName: "grid-card.svelte", + functionName: "handleImageError", + message: "target.src", + }, + { + src: target.src, + }, + ); + let websiteUrl = target.src; if (websiteUrl.endsWith("/")) { websiteUrl = websiteUrl.slice(0, -1); // Remove the trailing slash } + Logger.debug( + { + fileName: "grid-card.svelte", + functionName: "handleImageError", + message: "websiteUrl", + }, + { + websiteUrl, + }, + ); if (loadSocialMediaImage) { const socialUrl = await fetchSocialMediaImage(websiteUrl); if (socialUrl) { - await putSocialMediaImageUrl(websiteUrl, socialUrl); + await putSMICacheEntry(websiteUrl, socialUrl); target.src = socialUrl; } else { - await putSocialMediaImageUrl(websiteUrl, null); + await putSMICacheEntry(websiteUrl, null); } } } @@ -156,13 +184,13 @@ async function getCachedSocialMediaImageUrl( websiteUrl: string, ): Promise { - const entry = await getSocialMediaImageEntry(websiteUrl); + const entry = await getSMICacheEntry(websiteUrl); if (entry) { const { socialMediaImageUrl } = entry; if (socialMediaImageUrl) { - const isExpired = await isSocialMediaImageEntryExpired(entry); + const isExpired = await isSMICacheEntryExpired(entry); if (!isExpired) { return { status: "SUCCESS", url: socialMediaImageUrl }; } else { @@ -179,6 +207,17 @@ $: if (imageUrl) { isImageLoaded = false; getCachedSocialMediaImageUrl(imageUrl).then((result) => { + Logger.debug( + { + fileName: "grid-card.svelte", + functionName: "getCachedSocialMediaImage", + message: "result", + }, + { + result, + }, + ); + const { status, url } = result; if (status === "SUCCESS") { imgSrc = url!; diff --git a/src/svelte/app/services/social-media-image-cache.ts b/src/svelte/app/services/smi-cache.ts similarity index 67% rename from src/svelte/app/services/social-media-image-cache.ts rename to src/svelte/app/services/smi-cache.ts index b00cf15..82798b6 100644 --- a/src/svelte/app/services/social-media-image-cache.ts +++ b/src/svelte/app/services/smi-cache.ts @@ -20,18 +20,16 @@ interface SocialMediaImageDB extends DBSchema { }; } -export const isSocialMediaImageEntryExpired = async ( - entry: SocialMediaImageEntry -) => { +export const isSMICacheEntryExpired = async (entry: SocialMediaImageEntry) => { if (Date.now() - entry.timestamp > ENTRY_EXPIRATION_TIME) { return true; } return false; }; -export const getSocialMediaImageEntry = async (url: string) => { +export const getSMICacheEntry = async (websiteUrl: string) => { const db = await openDatabase(); - const cachedEntry = await db.get(STORE_NAME, url); + const cachedEntry = await db.get(STORE_NAME, websiteUrl); return cachedEntry ?? null; }; @@ -40,22 +38,37 @@ export const getSocialMediaImageEntry = async (url: string) => { * @param url - The URL of the page to cache the social media image for * @param smiUrl - The URL of the social media image */ -export const putSocialMediaImageUrl = async ( - url: string, - socialMediaImageUrl: string | null -) => { +export const putSMICacheEntry = async (url: string, smiUrl: string | null) => { + Logger.trace({ + fileName: "smi-cache.ts", + functionName: "putSMICacheEntry", + message: "called", + }); + + Logger.debug( + { + fileName: "smi-cache.ts", + functionName: "putSMICacheEntry", + message: "putting entry", + }, + { + url, + smiUrl, + } + ); + const db = await openDatabase(); await db.put(STORE_NAME, { url, - socialMediaImageUrl, + socialMediaImageUrl: smiUrl, timestamp: Date.now(), }); }; -export const clearSocialMediaImageCache = async () => { +export const clearSMICache = async () => { Logger.trace({ - fileName: "social-media-image-cache.ts", - functionName: "clearSocialMediaImageCache", + fileName: "smi-cache.ts", + functionName: "clearSMICache", message: "called", }); try { @@ -67,8 +80,8 @@ export const clearSocialMediaImageCache = async () => { const error = err as Error; Logger.error( { - fileName: "social-media-image-cache.ts", - functionName: "clearSocialMediaImageCache", + fileName: "smi-cache.ts", + functionName: "clearSMICache", message: "failed to clear cache", }, error.message