[web] Enhance log.debug (#2412)

desktop/src/main/services/ml-clip.ts

@@ -54,17 +54,14 @@ export const computeCLIPTextEmbeddingIfAvailable = async (text: string) => {
     }
 
     const session = sessionOrSkip;
-    const t1 = Date.now();
+    const t = Date.now();
     const tokenizer = getTokenizer();
     const tokenizedText = Int32Array.from(tokenizer.encodeForCLIP(text));
     const feeds = {
         input: new ort.Tensor("int32", tokenizedText, [1, 77]),
     };
-    const t2 = Date.now();
+
     const results = await session.run(feeds);
-    log.debug(
-        () =>
-            `ONNX/CLIP text embedding took ${Date.now() - t1} ms (prep: ${t2 - t1} ms, inference: ${Date.now() - t2} ms)`,
-    );
+    log.debug(() => `ONNX/CLIP text embedding took ${Date.now() - t} ms`);
     return ensure(results.output).data as Float32Array;
 };

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx

@@ -775,7 +775,7 @@ const canvasToFile = async (
     const [originalName] = nameAndExtension(originalFileName);
     const fileName = `${originalName}-edited.${extension}`;
 
-    log.debug(() => ({ a: "canvas => file", blob, type: blob.type, mimeType }));
+    log.debug(() => ["canvas => file", { blob, type: blob.type, mimeType }]);
 
     return new File([blob], fileName);
 };

web/apps/photos/src/components/Upload/Uploader.tsx

@@ -396,9 +396,8 @@ export default function Uploader({
         );
         setImportSuggestion(importSuggestion);
 
-        log.debug(() => "Uploader invoked:");
-        log.debug(() => uploadItemsAndPaths.current);
-        log.debug(() => importSuggestion);
+        log.debug(() => ["Upload request", uploadItemsAndPaths.current]);
+        log.debug(() => ["Import suggestion", importSuggestion]);
 
         const _pickedUploadType = pickedUploadType.current;
         pickedUploadType.current = null;

web/apps/photos/src/services/searchService.ts

@@ -375,7 +375,7 @@ const searchClip = async (
     // TODO-ML: clip-test
     return undefined;
     // const matches = await clipMatches(searchPhrase, ensureElectron());
-    // log.debug(() => ({ t: "clip-scores", matches }));
+    // log.debug(() => ["clip/scores", matches]);
     // return matches;
 };
 

web/apps/photos/src/services/watch.ts

@@ -381,14 +381,14 @@ class FolderWatcher {
         const electron = ensureElectron();
         const watch = this.activeWatch;
 
-        log.debug(() =>
+        log.debug(() => [
+            "watch/allFileUploadsDone",
             JSON.stringify({
-                f: "watch/allFileUploadsDone",
                 uploadItemsWithCollection,
                 collections,
                 watch,
             }),
-        );
+        ]);
 
         const { syncedFiles, ignoredFiles } = this.deduceSyncedAndIgnored(
             uploadItemsWithCollection,

web/packages/accounts/components/Login.tsx

@@ -29,7 +29,7 @@ export const Login: React.FC<LoginProps> = ({ signUp, host }) => {
         try {
             await setLSUser({ email });
             const srpAttributes = await getSRPAttributes(email);
-            log.debug(() => ` srpAttributes: ${JSON.stringify(srpAttributes)}`);
+            log.debug(() => ["srpAttributes", JSON.stringify(srpAttributes)]);
             if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
                 await sendOtt(email);
                 router.push(PAGES.VERIFY);

web/packages/new/photos/services/ml/embedding.ts

@@ -267,7 +267,7 @@ export const putEmbedding = async (
     model: EmbeddingModel,
     embedding: string,
 ) => {
-    log.debug(() => ({ t: `Uploading embedding`, model, embedding }));
+    log.debug(() => ["Uploading embedding", { model, embedding }]);
 
     const { encryptedMetadataB64, decryptionHeaderB64 } =
         await encryptFileMetadata(embedding, enteFile.key);

web/packages/new/photos/services/ml/index.ts

@@ -184,7 +184,7 @@ export const triggerMLSync = () => {
 export const indexNewUpload = (enteFile: EnteFile, uploadItem: UploadItem) => {
     if (!_isMLEnabled) return;
     if (enteFile.metadata.fileType !== FILE_TYPE.IMAGE) return;
-    log.debug(() => ({ t: "ml/liveq", enteFile, uploadItem }));
+    log.debug(() => ["ml/liveq", { enteFile, uploadItem }]);
     void worker().then((w) => w.onUpload(enteFile, uploadItem));
 };
 

web/packages/new/photos/services/ml/worker.ts

@@ -145,13 +145,15 @@ export class MLWorker {
     }
 
     private async tick() {
-        log.debug(() => ({
-            t: "ml/tick",
-            state: this.state,
-            shouldSync: this.shouldPull,
-            liveQ: this.liveQ,
-            idleDuration: this.idleDuration,
-        }));
+        log.debug(() => [
+            "ml/tick",
+            {
+                state: this.state,
+                shouldSync: this.shouldPull,
+                liveQ: this.liveQ,
+                idleDuration: this.idleDuration,
+            },
+        ]);
 
         const scheduleTick = () => void setTimeout(() => this.tick(), 0);
 

web/packages/next/log.ts

@@ -87,7 +87,24 @@ const logInfo = (...params: unknown[]) => {
 };
 
 const logDebug = (param: () => unknown) => {
-    if (isDevBuild) console.log("[debug]", param());
+    if (isDevBuild) {
+        const p = param();
+        // Transform
+        //     log.debug(() => ["tag", {x: y}])
+        //     =>
+        //     console.log("[debug] tag", {x: y})
+        if (Array.isArray(p)) {
+            // tseslint is not happy with us for destructuring any, but this is
+            // non-production dev build only code, so silence it and go ahead.
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const [tag, ...rest] = p;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            console.log(`[debug] ${tag}`, ...rest);
+        } else {
+            /* Let console.log serialize it */
+            console.log("[debug]", p);
+        }
+    }
 };
 
 /**
@@ -139,7 +156,9 @@ export default {
      * message. The provided function will only be called in development builds.
      *
      * The function can return an arbitrary value which is serialized before
-     * being logged.
+     * being logged. As a special case, arrays are spread, which allows one to
+     * write `log.debug(() => ["tag", {x: y}])` and have that be printed as if
+     * it were `console.log("[debug] tag", {x: y})`.
      *
      * This log is NOT written to disk. It is printed to the browser console,
      * but only in development builds.