Merge pull request #338 from decaf-dev/add-smi-debug

chore: add smi debug

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();
 				}
 			}
 		}

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();
 				})
 		);
 	}

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<SocialMediaImageResult> {
-		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!;

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