[Glitch] Add more resilience to Emoji IDB upgrades

Port 1dc2abb9f5b430f80e771f214343983919cd543d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/emoji/constants.ts

@@ -26,8 +26,8 @@ export const EMOJI_TYPE_UNICODE = 'unicode';
 export const EMOJI_TYPE_CUSTOM = 'custom';
 
 export const EMOJI_DB_NAME_SHORTCODES = 'shortcodes';
-
 export const EMOJI_DB_SHORTCODE_TEST = '2122'; // 2122 is the trademark sign, which we know has shortcodes in all datasets.
+export const EMOJI_DB_RELOAD_EVENT = 'emojiDbReload';
 
 export const EMOJIS_WITH_DARK_BORDER = [
   '🎱', // 1F3B1

app/javascript/flavours/glitch/features/emoji/database.ts

@@ -2,6 +2,7 @@ import { SUPPORTED_LOCALES } from 'emojibase';
 import type { CompactEmoji, Locale, ShortcodesDataset } from 'emojibase';
 
 import type { ApiCustomEmojiJSON } from '@/flavours/glitch/api_types/custom_emoji';
+import { onceAsync } from '@/flavours/glitch/utils/promises';
 
 import { openEmojiDB } from './db-schema';
 import type { Database } from './db-schema';
@@ -22,8 +23,6 @@ const log = emojiLogger('database');
 
 // Loads the database in a way that ensures it's only loaded once.
 const loadDB = (() => {
-  let dbPromise: Promise<Database> | null = null;
-
   // Actually load the DB.
   async function initDB() {
     const db = await openEmojiDB();
@@ -32,17 +31,14 @@ const loadDB = (() => {
     return db;
   }
 
+  let dbPromise = onceAsync(initDB);
+
   // Loads the database, or returns the existing promise if it hasn't resolved yet.
-  const loadPromise = async (): Promise<Database> => {
-    if (dbPromise) {
-      return dbPromise;
-    }
-    dbPromise = initDB();
-    return dbPromise;
-  };
+  const loadPromise = () => dbPromise();
+
   // Special way to reset the database, used for unit testing.
   loadPromise.reset = () => {
-    dbPromise = null;
+    dbPromise = onceAsync(initDB);
   };
   return loadPromise;
 })();
@@ -335,13 +331,6 @@ export async function clearCache(key: CacheKey) {
   log('Cleared cache for %s', key);
 }
 
-export async function resetDatabase() {
-  const db = await loadDB();
-  const storeNames = [...db.objectStoreNames];
-  await Promise.all(storeNames.map((storeName) => db.clear(storeName)));
-  log(storeNames, 'Reset emoji database stores:');
-}
-
 export async function loadEmojiByHexcode(
   hexcode: string,
   localeString: string,

app/javascript/flavours/glitch/features/emoji/db-schema.test.ts

@@ -0,0 +1,67 @@
+import { IDBFactory } from 'fake-indexeddb';
+
+import { EMOJI_DB_RELOAD_EVENT } from './constants';
+import { openEmojiDB } from './db-schema';
+
+describe('openEmojiDB', () => {
+  afterEach(() => {
+    indexedDB = new IDBFactory();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  describe('versionchange handler', () => {
+    test('dispatches reload event in main thread context', async () => {
+      const dispatchSpy = vi.fn();
+      window.addEventListener(EMOJI_DB_RELOAD_EVENT, dispatchSpy);
+
+      await openEmojiDB();
+
+      // Opening a higher version on the same IDBFactory triggers versionchange
+      // on all existing connections to that database.
+      indexedDB.open('mastodon-emoji', 9999);
+
+      await vi.waitFor(() => {
+        expect(dispatchSpy).toHaveBeenCalledOnce();
+      });
+
+      window.removeEventListener(EMOJI_DB_RELOAD_EVENT, dispatchSpy);
+    });
+
+    test('posts db-blocked message in worker context', async () => {
+      const postMessageSpy = vi.fn();
+      vi.stubGlobal('window', undefined);
+      vi.stubGlobal('self', { postMessage: postMessageSpy });
+
+      await openEmojiDB();
+
+      indexedDB.open('mastodon-emoji', 9999);
+
+      await vi.waitFor(() => {
+        expect(postMessageSpy).toHaveBeenCalledWith({ type: 'db-blocked' });
+      });
+    });
+
+    test('closes all open connections when versionchange fires', async () => {
+      const dispatchSpy = vi.fn();
+      window.addEventListener(EMOJI_DB_RELOAD_EVENT, dispatchSpy);
+
+      const db1 = await openEmojiDB();
+      const db2 = await openEmojiDB();
+
+      // Opening a higher version on the same IDBFactory triggers versionchange
+      // on all existing connections to that database.
+      indexedDB.open('mastodon-emoji', 9999);
+
+      await vi.waitFor(() => {
+        expect(dispatchSpy).toHaveBeenCalledTimes(2);
+      });
+
+      window.removeEventListener(EMOJI_DB_RELOAD_EVENT, dispatchSpy);
+
+      // Both connections should now be closed.
+      expect(() => db1.transaction('etags', 'readonly')).toThrow();
+      expect(() => db2.transaction('etags', 'readonly')).toThrow();
+    });
+  });
+});

app/javascript/flavours/glitch/features/emoji/db-schema.ts

@@ -1,6 +1,6 @@
 import { SUPPORTED_LOCALES } from 'emojibase';
 import type { Locale } from 'emojibase';
-import { openDB } from 'idb';
+import { deleteDB, openDB } from 'idb';
 import type {
   DBSchema,
   IDBPDatabase,
@@ -10,8 +10,13 @@ import type {
   StoreNames,
 } from 'idb';
 
-import { resetDatabase } from './database';
-import type { CustomEmojiData, CacheKey, UnicodeEmojiData } from './types';
+import { EMOJI_DB_RELOAD_EVENT } from './constants';
+import type {
+  CustomEmojiData,
+  CacheKey,
+  UnicodeEmojiData,
+  EmojiWorkerMessage,
+} from './types';
 import { emojiLogger } from './utils';
 
 const log = emojiLogger('database');
@@ -58,72 +63,95 @@ type Transaction<Mode extends IDBTransactionMode = 'versionchange'> =
 
 export type Database = IDBPDatabase<EmojiDB>;
 
+const DATABASE_NAME = 'mastodon-emoji';
 const SCHEMA_VERSION = 4;
 
 export async function openEmojiDB() {
-  const db = await openDB<EmojiDB>('mastodon-emoji', SCHEMA_VERSION, {
-    upgrade(database, oldVersion, newVersion, trx) {
-      if (!database.objectStoreNames.contains('custom')) {
-        database.createObjectStore('custom', {
-          keyPath: 'shortcode',
-          autoIncrement: false,
-        });
-      }
-      maybeAddIndex({ trx, storeName: 'custom', indexName: 'category' });
-      maybeAddIndex({
-        trx,
-        storeName: 'custom',
-        indexName: 'tokens',
-        options: { multiEntry: true },
-      });
-
-      if (!database.objectStoreNames.contains('etags')) {
-        database.createObjectStore('etags');
-      }
-
-      SUPPORTED_LOCALES.forEach((locale) => {
-        createLocaleTable(locale, database, trx);
-      });
-
-      const shortcodeTable = database.objectStoreNames.contains('shortcodes')
-        ? trx.objectStore('shortcodes')
-        : database.createObjectStore('shortcodes', {
-            keyPath: 'hexcode',
+  try {
+    const db = await openDB<EmojiDB>(DATABASE_NAME, SCHEMA_VERSION, {
+      upgrade(database, oldVersion, newVersion, trx) {
+        if (!database.objectStoreNames.contains('custom')) {
+          database.createObjectStore('custom', {
+            keyPath: 'shortcode',
             autoIncrement: false,
           });
-      maybeAddIndex({
-        trx,
-        storeName: 'shortcodes',
-        indexName: 'shortcodes',
-        options: { multiEntry: true },
-      });
-      deleteOldIndexes(shortcodeTable, ['hexcode']);
+        }
+        maybeAddIndex({ trx, storeName: 'custom', indexName: 'category' });
+        maybeAddIndex({
+          trx,
+          storeName: 'custom',
+          indexName: 'tokens',
+          options: { multiEntry: true },
+        });
 
-      void resetDatabase();
+        if (!database.objectStoreNames.contains('etags')) {
+          database.createObjectStore('etags');
+        }
 
-      log(
-        'Upgraded emoji database from version %d to %d',
-        oldVersion,
-        newVersion,
-      );
-    },
-    blocked(currentVersion, blockedVersion) {
-      log(
-        'Emoji database upgrade from version %d to %d is blocked',
-        currentVersion,
-        blockedVersion,
-      );
-    },
-    blocking(currentVersion, blockedVersion) {
-      log(
-        'Emoji database upgrade from version %d is blocking upgrade to %d',
-        currentVersion,
-        blockedVersion,
-      );
-    },
-  });
+        SUPPORTED_LOCALES.forEach((locale) => {
+          createLocaleTable(locale, database, trx);
+        });
 
-  return db;
+        const shortcodeTable = database.objectStoreNames.contains('shortcodes')
+          ? trx.objectStore('shortcodes')
+          : database.createObjectStore('shortcodes', {
+              keyPath: 'hexcode',
+              autoIncrement: false,
+            });
+        maybeAddIndex({
+          trx,
+          storeName: 'shortcodes',
+          indexName: 'shortcodes',
+          options: { multiEntry: true },
+        });
+        deleteOldIndexes(shortcodeTable, ['hexcode']);
+
+        // Reset all database stores.
+        for (const storeName of database.objectStoreNames) {
+          void trx.objectStore(storeName).clear();
+        }
+
+        log(
+          'Upgraded emoji database from version %d to %d',
+          oldVersion,
+          newVersion,
+        );
+      },
+      blocked(currentVersion, blockedVersion) {
+        log(
+          'Emoji database upgrade from version %d to %d is blocked',
+          currentVersion,
+          blockedVersion,
+        );
+      },
+      blocking(currentVersion, blockedVersion) {
+        log(
+          'Emoji database upgrade from version %d is blocking upgrade to %d, closing connection',
+          currentVersion,
+          blockedVersion,
+        );
+        // Close the database connection immediately.
+        db.close();
+
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(new Event(EMOJI_DB_RELOAD_EVENT));
+        } else {
+          self.postMessage({ type: 'db-blocked' } satisfies EmojiWorkerMessage);
+        }
+      },
+    });
+
+    return db;
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'VersionError') {
+      log(
+        'Emoji database version is newer than expected, deleting and recreating',
+      );
+      await deleteDB(DATABASE_NAME);
+      return openEmojiDB();
+    }
+    throw error;
+  }
 }
 
 function maybeAddIndex<StoreName extends StoreNames<EmojiDB>>({

app/javascript/flavours/glitch/features/emoji/index.ts

@@ -1,5 +1,6 @@
 import { initialState } from '@/flavours/glitch/initial_state';
 
+import { EMOJI_DB_RELOAD_EVENT } from './constants';
 import { toSupportedLocale } from './locale';
 import type { EmojiWorkerMessage } from './types';
 import { emojiLogger } from './utils';
@@ -14,6 +15,12 @@ const workerLog = emojiLogger('worker');
 // This is too short, but better to fallback quickly than wait.
 const WORKER_TIMEOUT = 2_000;
 
+// Handle reload events
+window.addEventListener(
+  EMOJI_DB_RELOAD_EVENT,
+  () => void handleEmojiDbReload(),
+);
+
 export async function initializeEmoji() {
   log('initializing emojis');
 
@@ -51,6 +58,8 @@ export async function initializeEmoji() {
         workerLog(message.message);
       } else if (type === 'done' && message.storeName === 'custom') {
         void loadEmojisToStore();
+      } else if (type === 'db-blocked') {
+        window.dispatchEvent(new Event(EMOJI_DB_RELOAD_EVENT));
       }
 
       if (type !== 'ready') {
@@ -131,3 +140,10 @@ async function loadEmojisToStore() {
 
   log('loaded emoji data into store');
 }
+
+async function handleEmojiDbReload() {
+  log('Emoji database reload needed, triggering warning');
+  const { store } = await import('@/flavours/glitch/store');
+  const { needsReload } = await import('@/flavours/glitch/actions/app');
+  store.dispatch(needsReload());
+}

app/javascript/flavours/glitch/features/emoji/loader.ts

@@ -1,6 +1,8 @@
 import { joinShortcodes } from 'emojibase';
 import type { CompactEmoji, Locale, ShortcodesDataset } from 'emojibase';
 
+import { onceAsyncByArgs } from '@/flavours/glitch/utils/promises';
+
 import {
   putEmojiData,
   putCustomEmojiData,
@@ -17,6 +19,12 @@ const log = emojiLogger('loader');
 export async function importEmojiData(localeString: string, shortcodes = true) {
   const locale = toSupportedLocale(localeString);
 
+  return importEmojiDataOnce(locale, shortcodes);
+}
+
+const importEmojiDataOnce = onceAsyncByArgs(importEmojiDataImpl);
+
+async function importEmojiDataImpl(locale: Locale, shortcodes: boolean) {
   log(
     'importing emoji data for locale %s%s',
     locale,
@@ -171,9 +179,7 @@ async function fetchAndCheckEtag({
 
   // Use location.origin as this script may be loaded from a CDN domain.
   const url = new URL(path, location.origin);
-  const response = await fetch(url, {
-    headers,
-  });
+  const response = await fetch(url, { headers });
 
   // If not modified, return null
   if (response.status === 304) {

app/javascript/flavours/glitch/features/emoji/types.ts

@@ -82,6 +82,7 @@ export type ExtraCustomEmojiMap = Record<
 
 export type EmojiWorkerMessage =
   | { type: 'ready' }
+  | { type: 'db-blocked' }
   | {
       type: 'load';
       storeName: string;