From f0f61a5a4931245ee145c800123faf6721aeb989 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Mon, 26 Aug 2024 13:28:09 +0300
Subject: [PATCH 01/16] Add debounce cancel

---
 .../@apostrophecms/ui/ui/apos/utils/index.js  |  28 +++-
 test/utils.js                                 | 120 ++++++++++++++++++
 2 files changed, 145 insertions(+), 3 deletions(-)

diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index 21a32ac9c4..926cdb0401 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -1,10 +1,15 @@
 module.exports = {
-  debounce(fn, delay) {
+  debounce(fn, delay, options = {}) {
+    const canceledRejection = new Error('debounce:canceled');
     let timer;
+    let canceled = false;
     let previousDone = true;
 
     const setTimer = (res, rej, args, delay) => {
       return setTimeout(() => {
+        if (canceled) {
+          return rej(canceledRejection);
+        }
         if (!previousDone) {
           clearTimeout(timer);
           timer = setTimer(res, rej, args, delay);
@@ -15,7 +20,12 @@ module.exports = {
         const returned = fn.apply(this, args);
         if (returned instanceof Promise) {
           return returned
-            .then(res)
+            .then((result) => {
+              if (canceled) {
+                return rej(canceledRejection);
+              }
+              res(result);
+            })
             .catch(rej)
             .finally(() => {
               previousDone = true;
@@ -27,12 +37,24 @@ module.exports = {
       }, delay);
     };
 
-    return (...args) => {
+    function wrapper(...args) {
       return new Promise((resolve, reject) => {
+        if (canceled) {
+          // eslint-disable-next-line prefer-promise-reject-errors
+          return reject(canceledRejection);
+        }
         clearTimeout(timer);
         timer = setTimer(resolve, reject, args, delay);
       });
     };
+
+    wrapper.cancel = () => {
+      canceled = true;
+      clearTimeout(timer);
+      timer = null;
+    };
+
+    return wrapper;
   },
 
   throttle(fn, delay) {
diff --git a/test/utils.js b/test/utils.js
index a66cafdf84..236b243ca4 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -441,6 +441,126 @@ describe('Utils', function() {
 
     });
 
+    it('should cancel debounced calls (sync)', async function () {
+      let calledSync = [];
+
+      function syncFn(num) {
+        calledSync.push(num);
+        return 'test';
+      };
+
+      const debouncedSync = debounce(syncFn, 50);
+
+      debouncedSync(1);
+      await wait(200);
+      debouncedSync(2);
+      debouncedSync(3);
+      debouncedSync.cancel();
+      assert.deepEqual(calledSync, [ 1 ], 'should cancel all calls after the first call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync(3);
+      debouncedSync.cancel();
+      await wait(200);
+      assert.deepEqual(calledSync, [], 'should cancel all calls when canceled after the 3rd call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync.cancel();
+      debouncedSync(3);
+      await wait(100);
+      assert.deepEqual(calledSync, [], 'should cancel all calls when canceled after the 2nd call');
+      calledSync = [];
+
+      debouncedSync(1);
+      debouncedSync(2);
+      debouncedSync.cancel();
+      await wait(100);
+      debouncedSync(3);
+      await wait(100);
+      assert.deepEqual(
+        calledSync,
+        [],
+        'should cancel all calls when canceled and called again after some time'
+      );
+    });
+
+    it('should cancel debounced calls (async)', async function () {
+      let calledAsync = [];
+
+      async function asyncFn(num, time = 50) {
+        await wait(50);
+        calledAsync.push(num);
+        // Keep all console.debug around to easy debug - ensure
+        // all promises are awaited before the test ends.
+        console.debug('calledAsync', num);
+        return 'async';
+      }
+
+      const debouncedAsync = debounce(asyncFn, 50);
+
+      debouncedAsync(1);
+      await wait(100);
+      debouncedAsync(2);
+      debouncedAsync(3);
+      debouncedAsync.cancel();
+      await wait(200);
+      assert.deepEqual(calledAsync, [ 1 ], 'should cancel all calls after the first call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync(3);
+      debouncedAsync.cancel();
+      await wait(200);
+      assert.deepEqual(calledAsync, [], 'should cancel all calls when canceled after the 3rd call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync.cancel();
+      debouncedAsync(3);
+      await wait(200);
+      assert.deepEqual(calledAsync, [], 'should cancel all calls when canceled after the 2nd call');
+      calledAsync = [];
+
+      debouncedAsync(1);
+      debouncedAsync(2);
+      debouncedAsync.cancel();
+      await wait(200);
+      debouncedAsync(3);
+      await wait(100);
+      assert.deepEqual(
+        calledAsync,
+        [],
+        'should cancel all calls when canceled and called again after some time'
+      );
+    });
+
+    it('should reject ongoing promises after canceling debounced calls', async function () {
+      const calledAsync = [];
+      async function asyncFn(num, time = 50) {
+        await wait(time);
+        calledAsync.push(num);
+        console.debug('unstoppable async call', num);
+        return 'async';
+      }
+
+      const debouncedAsync = debounce(asyncFn, 50);
+      const promise = debouncedAsync(1, 300);
+      await wait(100);
+      debouncedAsync.cancel();
+
+      await assert.rejects(promise, {
+        message: 'debounce:canceled'
+      });
+
+      assert.deepEqual(calledAsync, [ 1 ], 'the original promise should always resolve');
+    });
+
     it('can throttle functions', async function () {
       const calledNormal = [];
       const calledAsync = [];

From 5bfb633b33057c7a0a849eca894d8df4bddf7fca Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:15:55 +0300
Subject: [PATCH 02/16] Cancel debouncers, guard against memory leaks

---
 .../ui/apos/components/AposImageCropper.vue   |   6 +-
 .../ui/apos/components/AposMediaManager.vue   |  36 ++++-
 .../ui/apos/components/AposDocsManager.vue    |  33 ++++-
 .../schema/ui/apos/logic/AposInputSlug.js     |  28 ++--
 .../@apostrophecms/ui/ui/apos/utils/index.js  | 135 +++++++++---------
 package.json                                  |   3 +-
 test/utils.js                                 |  16 +--
 7 files changed, 165 insertions(+), 92 deletions(-)

diff --git a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
index b15d19f342..73f5db845a 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import debounce from 'lodash/debounce';
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
 
@@ -129,6 +129,10 @@ export default {
     };
   },
   beforeUnmount() {
+    this.onScreenResizeDebounced.cancel();
+    this.handleCropperChangeDebounced.cancel();
+    this.setCropperCoordinatesDebounced.cancel();
+    this.updateFocalPointCoordinatesDebounced.cancel();
     this.$refs.focalPoint.removeEventListener('mousedown', this.onFocalPointMouseDown);
     window.removeEventListener('resize', this.onScreenResizeDebounced);
   },
diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index 3cc2c41bdb..f6837d83ed 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -125,10 +125,10 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { createId } from '@paralleldrive/cuid2';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
-import { createId } from '@paralleldrive/cuid2';
 
 const DEBOUNCE_TIMEOUT = 500;
 
@@ -143,6 +143,7 @@ export default {
   emits: [ 'archive', 'save', 'search', 'piece-relationship-query' ],
   data() {
     return {
+      mounted: false,
       items: [],
       isFirstLoading: true,
       isLoading: false,
@@ -166,7 +167,7 @@ export default {
         emoji: '🖼'
       },
       cancelDescription: 'apostrophe:discardImageChangesPrompt',
-      debouncedGetMedia: debounce(this.getMedia, DEBOUNCE_TIMEOUT),
+      debouncedGetMedia: null,
       loadObserver: new IntersectionObserver(
         this.handleIntersect,
         {
@@ -243,6 +244,7 @@ export default {
       return this.totalPages > 1 && this.currentPage === this.totalPages;
     }
   },
+
   watch: {
     async checked (newVal, oldVal) {
       this.lastSelected = newVal.at(-1);
@@ -272,8 +274,21 @@ export default {
   },
   created() {
     this.setDefaultFilters();
+    const debouncedGetMedia = debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT);
+    this.debouncedGetMedia = async function (...args) {
+      try {
+        const result = await debouncedGetMedia(...args);
+        return result;
+      } catch (e) {
+        if (e.message !== 'debounce:canceled') {
+          throw e;
+        }
+      }
+    };
+    this.debouncedGetMedia.cancel = debouncedGetMedia.cancel;
   },
   async mounted() {
+    this.mounted = true;
     this.modal.active = true;
     await this.getMedia({ tags: true });
     this.isFirstLoading = false;
@@ -281,7 +296,9 @@ export default {
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
-  unmounted() {
+  beforeUnmount() {
+    this.mounted = false;
+    this.debouncedGetMedia.cancel();
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -296,7 +313,10 @@ export default {
     editorModified (val) {
       this.modified = val;
     },
-    async getMedia (options = {}) {
+    async getMedia(options = {}) {
+      if (!this.mounted) {
+        return;
+      }
       const qs = {
         ...this.filterValues,
         page: this.currentPage,
@@ -329,6 +349,9 @@ export default {
           draft: true
         }
       ));
+      if (!this.mounted) {
+        return;
+      }
 
       if (options.tags) {
         if (filtered) {
@@ -344,6 +367,9 @@ export default {
               draft: true
             }
           ));
+          if (!this.mounted) {
+            return;
+          }
           this.tagList = apiResponse.choices._tags;
         } else {
           this.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index eb178734e4..8f659d4e22 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -84,7 +84,7 @@
               disableUnchecked: maxReached()
             }"
             @select-click="selectAll"
-            @search="onSearch"
+            @search="onSearchSafe"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
@@ -129,7 +129,7 @@ import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsMa
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposDocsManager',
@@ -149,6 +149,7 @@ export default {
   emits: [ 'archive' ],
   data() {
     return {
+      mounted: false,
       modal: {
         active: false,
         triggerFocusRefresh: 0,
@@ -229,7 +230,9 @@ export default {
   },
   created() {
     const DEBOUNCE_TIMEOUT = 500;
-    this.onSearch = debounce(this.search, DEBOUNCE_TIMEOUT);
+    // "mounted" in meaning of "able to mutate the state".
+    this.mounted = true;
+    this.onSearch = debounceAsync(this.search, DEBOUNCE_TIMEOUT);
 
     this.moduleOptions.filters.forEach(filter => {
       this.filterValues[filter.name] = filter.def;
@@ -252,6 +255,10 @@ export default {
     apos.bus.$on('command-menu-manager-create-new', this.create);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
+  onBeforeUnmount() {
+    this.mounted = false;
+    this.onSearch.cancel();
+  },
   unmounted() {
     this.destroyShortcuts();
     apos.bus.$off('content-changed', this.onContentChanged);
@@ -341,6 +348,9 @@ export default {
         ),
         page: this.currentPage
       });
+      if (!this.mounted) {
+        return;
+      }
 
       this.currentPage = currentPage;
       this.totalPages = pages;
@@ -350,6 +360,9 @@ export default {
     },
     async getAllPiecesTotal () {
       const { count: total } = await this.request({ count: 1 });
+      if (!this.mounted) {
+        return;
+      }
 
       this.setAllPiecesSelection({
         isSelected: false,
@@ -379,6 +392,9 @@ export default {
       }
     },
     async search(query) {
+      if (!this.mounted) {
+        return;
+      }
       if (query) {
         this.queryExtras.autocomplete = query;
       } else if ('autocomplete' in this.queryExtras) {
@@ -509,6 +525,17 @@ export default {
           this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
         }
       }
+    },
+
+    async onSearchSafe(...args) {
+      try {
+        const result = await this.onSearch(...args);
+        return result;
+      } catch (error) {
+        if (error.message !== 'debounce:canceled') {
+          throw error;
+        }
+      }
     }
   }
 };
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
index 8323f9a4ca..2e0ad0e555 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
@@ -1,10 +1,10 @@
 // NOTE: This is a temporary component, copying AposInputString. Base modules
 // already have `type: 'slug'` fields, so this is needed to avoid distracting
 // errors.
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import sluggo from 'sluggo';
-import debounce from 'debounce-async';
 import { klona } from 'klona';
+import sluggo from 'sluggo';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
   name: 'AposInputSlug',
@@ -12,6 +12,7 @@ export default {
   emits: [ 'return' ],
   data() {
     return {
+      mounted: false,
       conflict: false,
       isArchived: null,
       originalParentSlug: ''
@@ -102,12 +103,22 @@ export default {
     }
   },
   async mounted() {
-    this.debouncedCheckConflict = debounce(() => this.checkConflict(), 250);
+    this.mounted = true;
+    this.debouncedCheckConflict = debounceAsync(() => this.checkConflict(), 250);
     if (this.next.length) {
-      await this.debouncedCheckConflict();
+      try {
+        await this.debouncedCheckConflict();
+      } catch (e) {
+        if (e.message !== 'debounce:canceled') {
+          throw e;
+        }
+      }
     }
     this.originalParentSlug = this.getParentSlug(this.next);
   },
+  onBeforeUnmount() {
+    this.debouncedCheckConflict.cancel();
+  },
   methods: {
     getParentSlug(slug = '') {
       return slug.slice(-1) === '/'
@@ -120,9 +131,7 @@ export default {
       try {
         await this.debouncedCheckConflict();
       } catch (e) {
-        if (e === 'canceled') {
-          // That's fine
-        } else {
+        if (e.message !== 'debounce:canceled') {
           throw e;
         }
       }
@@ -243,6 +252,9 @@ export default {
             },
             draft: true
           });
+          if (!this.mounted) {
+            return;
+          }
           // Still relevant?
           if (slug === this.next) {
             this.conflict = false;
diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index 926cdb0401..b8456add76 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -1,75 +1,80 @@
 module.exports = {
-  debounce(fn, delay, options = {}) {
-    const canceledRejection = new Error('debounce:canceled');
-    let timer;
-    let canceled = false;
-    let previousDone = true;
+  debounceAsync,
+  // BC alias
+  debounce: debounceAsync,
+  throttle
+};
 
-    const setTimer = (res, rej, args, delay) => {
-      return setTimeout(() => {
-        if (canceled) {
-          return rej(canceledRejection);
-        }
-        if (!previousDone) {
-          clearTimeout(timer);
-          timer = setTimer(res, rej, args, delay);
-          return;
-        }
+function debounceAsync(fn, delay, options = {}) {
+  const canceledRejection = new Error('debounce:canceled');
+  let timer;
+  let canceled = false;
+  let previousDone = true;
 
-        previousDone = false;
-        const returned = fn.apply(this, args);
-        if (returned instanceof Promise) {
-          return returned
-            .then((result) => {
-              if (canceled) {
-                return rej(canceledRejection);
-              }
-              res(result);
-            })
-            .catch(rej)
-            .finally(() => {
-              previousDone = true;
-            });
-        }
+  const setTimer = (res, rej, args, delay) => {
+    return setTimeout(() => {
+      if (canceled) {
+        return rej(canceledRejection);
+      }
+      if (!previousDone) {
+        clearTimeout(timer);
+        timer = setTimer(res, rej, args, delay);
+        return;
+      }
 
-        previousDone = true;
-        res(returned);
-      }, delay);
-    };
+      previousDone = false;
+      const returned = fn.apply(this, args);
+      if (returned instanceof Promise) {
+        return returned
+          .then((result) => {
+            if (canceled) {
+              return rej(canceledRejection);
+            }
+            res(result);
+          })
+          .catch(rej)
+          .finally(() => {
+            previousDone = true;
+          });
+      }
 
-    function wrapper(...args) {
-      return new Promise((resolve, reject) => {
-        if (canceled) {
-          // eslint-disable-next-line prefer-promise-reject-errors
-          return reject(canceledRejection);
-        }
-        clearTimeout(timer);
-        timer = setTimer(resolve, reject, args, delay);
-      });
-    };
+      previousDone = true;
+      res(returned);
+    }, delay);
+  };
 
-    wrapper.cancel = () => {
-      canceled = true;
+  function wrapper(...args) {
+    return new Promise((resolve, reject) => {
+      if (canceled) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        return reject(canceledRejection);
+      }
       clearTimeout(timer);
-      timer = null;
-    };
+      timer = setTimer(resolve, reject, args, delay);
+    });
+  };
 
-    return wrapper;
-  },
+  wrapper.cancel = () => {
+    canceled = true;
+    clearTimeout(timer);
+    timer = null;
+  };
 
-  throttle(fn, delay) {
-    let inThrottle;
+  return wrapper;
+}
 
-    return (...args) => {
-      return new Promise((resolve) => {
-        if (!inThrottle) {
-          inThrottle = true;
-          setTimeout(() => {
-            inThrottle = false;
-            resolve(fn.apply(this, args));
-          }, delay);
-        }
-      });
-    };
-  }
-};
+function throttle(fn, delay) {
+  let inThrottle;
+
+  return (...args) => {
+    return new Promise((resolve) => {
+      if (!inThrottle) {
+        inThrottle = true;
+        setTimeout(() => {
+          inThrottle = false;
+          resolve(fn.apply(this, args));
+        }, delay);
+      }
+    });
+  };
+}
diff --git a/package.json b/package.json
index 1aee4ba0b4..5881de10bd 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "cors": "^2.8.5",
     "css-loader": "^5.2.4",
     "dayjs": "^1.9.8",
-    "debounce-async": "0.0.2",
     "dompurify": "^2.3.1",
     "express": "^4.16.4",
     "express-bearer-token": "^2.4.0",
@@ -148,4 +147,4 @@
   "browserslist": [
     "ie >= 10"
   ]
-}
\ No newline at end of file
+}
diff --git a/test/utils.js b/test/utils.js
index 236b243ca4..5efcaeb9de 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -1,7 +1,7 @@
 const t = require('../test-lib/test.js');
 const assert = require('assert');
 const _ = require('lodash');
-const { debounce, throttle } = require('../modules/@apostrophecms/ui/ui/apos/utils/index');
+const { debounceAsync, throttle } = require('../modules/@apostrophecms/ui/ui/apos/utils/index');
 
 describe('Utils', function() {
 
@@ -376,10 +376,10 @@ describe('Utils', function() {
       const calledAsyncSlow = [];
       let asyncErrCatched = false;
 
-      const debouncedNormal = debounce(normalFn, 50);
-      const debouncedAsync = debounce(asyncFn, 50);
-      const debouncedAsyncSlow = debounce(asyncSlowFn, 50);
-      const debouncedAsyncErr = debounce(AsyncErrFn, 50);
+      const debouncedNormal = debounceAsync(normalFn, 50);
+      const debouncedAsync = debounceAsync(asyncFn, 50);
+      const debouncedAsyncSlow = debounceAsync(asyncSlowFn, 50);
+      const debouncedAsyncErr = debounceAsync(AsyncErrFn, 50);
 
       debouncedNormal(1);
       debouncedNormal(2);
@@ -449,7 +449,7 @@ describe('Utils', function() {
         return 'test';
       };
 
-      const debouncedSync = debounce(syncFn, 50);
+      const debouncedSync = debounceAsync(syncFn, 50);
 
       debouncedSync(1);
       await wait(200);
@@ -500,7 +500,7 @@ describe('Utils', function() {
         return 'async';
       }
 
-      const debouncedAsync = debounce(asyncFn, 50);
+      const debouncedAsync = debounceAsync(asyncFn, 50);
 
       debouncedAsync(1);
       await wait(100);
@@ -549,7 +549,7 @@ describe('Utils', function() {
         return 'async';
       }
 
-      const debouncedAsync = debounce(asyncFn, 50);
+      const debouncedAsync = debounceAsync(asyncFn, 50);
       const promise = debouncedAsync(1, 300);
       await wait(100);
       debouncedAsync.cancel();

From f83e18636d3fc8966fe13c4ff8a360fe666c67e0 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:19:58 +0300
Subject: [PATCH 03/16] Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8fb7eb286..92138d4d96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Registering duplicate icon is no longer breaking the build.
 * Fix widget focus state so that the in-context Add Content menu stays visible during animation
 * Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI
+* Fix unhandled promise rejections and guard against potential memory leaks, remove 3rd party `debounce-async` dependency
 
 ### Adds
 

From fbf51e8a4f8f0f6c3d896c03e2f9e5472c598997 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:24:56 +0300
Subject: [PATCH 04/16] Leftover debug

---
 modules/@apostrophecms/ui/ui/apos/utils/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index b8456add76..c5242c88e3 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -46,7 +46,6 @@ function debounceAsync(fn, delay, options = {}) {
   function wrapper(...args) {
     return new Promise((resolve, reject) => {
       if (canceled) {
-        // eslint-disable-next-line prefer-promise-reject-errors
         return reject(canceledRejection);
       }
       clearTimeout(timer);

From ed47ee6fda5b23f87ac326eddb1a1e4331c076d2 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:26:22 +0300
Subject: [PATCH 05/16] Typo

---
 test/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/utils.js b/test/utils.js
index 5efcaeb9de..d6719264c3 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -540,7 +540,7 @@ describe('Utils', function() {
       );
     });
 
-    it('should reject ongoing promises after canceling debounced calls', async function () {
+    it('should reject ongoing promises after debounce cancel', async function () {
       const calledAsync = [];
       async function asyncFn(num, time = 50) {
         await wait(time);

From 2273b070288ac5703b3d518bbc5649959550d20d Mon Sep 17 00:00:00 2001
From: Tom Boutell <tom@apostrophecms.com>
Date: Thu, 29 Aug 2024 06:12:42 -0400
Subject: [PATCH 06/16] WIP on if not canceled approach (#4705)

* WIP on if not canceled approach

* no need for finally block

* Bugs and testing

* fix the skipDelay

* capture the timer

* Finish replace debounce async

---------

Co-authored-by: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
---
 .../ui/apos/components/AposMediaManager.vue   |  65 ++++----
 .../ui/apos/components/AposDocsManager.vue    | 142 +++++++++++-------
 .../schema/ui/apos/logic/AposInputSlug.js     |  53 +++----
 .../@apostrophecms/ui/ui/apos/utils/index.js  |  72 ++++++++-
 test/utils.js                                 | 141 +++++++++++++++++
 5 files changed, 349 insertions(+), 124 deletions(-)

diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index f6837d83ed..9eb3ab2677 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -143,7 +143,6 @@ export default {
   emits: [ 'archive', 'save', 'search', 'piece-relationship-query' ],
   data() {
     return {
-      mounted: false,
       items: [],
       isFirstLoading: true,
       isLoading: false,
@@ -274,30 +273,19 @@ export default {
   },
   created() {
     this.setDefaultFilters();
-    const debouncedGetMedia = debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT);
-    this.debouncedGetMedia = async function (...args) {
-      try {
-        const result = await debouncedGetMedia(...args);
-        return result;
-      } catch (e) {
-        if (e.message !== 'debounce:canceled') {
-          throw e;
-        }
-      }
-    };
-    this.debouncedGetMedia.cancel = debouncedGetMedia.cancel;
+    this.debouncedGetMedia = debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT, {
+      onSuccess: this.appendMedia
+    });
   },
   async mounted() {
-    this.mounted = true;
     this.modal.active = true;
-    await this.getMedia({ tags: true });
-    this.isFirstLoading = false;
-
+    // Do these before any async work or they might get added after they are "removed"
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
+    await this.debouncedGetMedia.skipDelay({ tags: true });
+    this.isFirstLoading = false;
   },
   beforeUnmount() {
-    this.mounted = false;
     this.debouncedGetMedia.cancel();
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
@@ -314,9 +302,7 @@ export default {
       this.modified = val;
     },
     async getMedia(options = {}) {
-      if (!this.mounted) {
-        return;
-      }
+      const result = {};
       const qs = {
         ...this.filterValues,
         page: this.currentPage,
@@ -349,9 +335,6 @@ export default {
           draft: true
         }
       ));
-      if (!this.mounted) {
-        return;
-      }
 
       if (options.tags) {
         if (filtered) {
@@ -367,26 +350,35 @@ export default {
               draft: true
             }
           ));
-          if (!this.mounted) {
-            return;
-          }
-          this.tagList = apiResponse.choices._tags;
+          result.tagList = apiResponse.choices._tags;
         } else {
-          this.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
+          result.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
         }
       }
 
-      this.currentPage = apiResponse.currentPage;
-      this.totalPages = apiResponse.pages;
+      result.currentPage = apiResponse.currentPage;
+      result.totalPages = apiResponse.pages;
+      result.items = [];
       for (const image of apiResponse.results) {
-        this.items.push(image);
+        result.items.push(image);
+      }
+      return result;
+    },
+    async appendMedia({
+      tagList, currentPage, totalPages, items
+    }) {
+      this.tagList = tagList;
+      this.currentPage = currentPage;
+      this.totalPages = totalPages;
+      for (const item of items) {
+        this.items.push(item);
       }
     },
     async refetchMedia(opts) {
       this.isLoading = true;
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia(opts);
+      await this.debouncedGetMedia.skipDelay(opts);
       this.isLoading = false;
       this.modified = false;
       this.updateEditing(null);
@@ -402,11 +394,10 @@ export default {
         dimensions
       });
     },
-    async completeUploading (imgIds) {
+    async completeUploading(imgIds) {
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia();
-
+      await this.debouncedGetMedia.skipDelay();
       if (Array.isArray(imgIds) && imgIds.length && this.items.length === 0) {
         const [ widgetOptions = {} ] = apos.area.widgetOptions;
         const [ width, height ] = widgetOptions.minSize || [];
@@ -577,7 +568,7 @@ export default {
           this.loadRef.scrollIntoView({
             behavior: 'smooth'
           });
-          await this.getMedia();
+          await this.debouncedGetMedia.skipDelay();
           this.isScrollLoading = false;
         }
       }
diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 8f659d4e22..bcaf90797e 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -149,7 +149,7 @@ export default {
   emits: [ 'archive' ],
   data() {
     return {
-      mounted: false,
+      isMounted: false,
       modal: {
         active: false,
         triggerFocusRefresh: 0,
@@ -231,8 +231,10 @@ export default {
   created() {
     const DEBOUNCE_TIMEOUT = 500;
     // "mounted" in meaning of "able to mutate the state".
-    this.mounted = true;
-    this.onSearch = debounceAsync(this.search, DEBOUNCE_TIMEOUT);
+    this.isMounted = true;
+    this.onSearch = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
+      onSuccess: this.search
+    });
 
     this.moduleOptions.filters.forEach(filter => {
       this.filterValues[filter.name] = filter.def;
@@ -247,8 +249,8 @@ export default {
     this.headers = this.computeHeaders();
     // Get the data. This will be more complex in actuality.
     this.modal.active = true;
-    await this.getPieces();
-    await this.getAllPiecesTotal();
+    await this.managePieces();
+    await this.manageAllPiecesTotal();
     this.modal.triggerFocusRefresh++;
 
     apos.bus.$on('content-changed', this.onContentChanged);
@@ -256,7 +258,7 @@ export default {
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
   onBeforeUnmount() {
-    this.mounted = false;
+    this.isMounted = false;
     this.onSearch.cancel();
   },
   unmounted() {
@@ -301,9 +303,9 @@ export default {
       });
     },
     async finishSaved() {
-      await this.getPieces();
+      await this.managePieces();
     },
-    async request (mergeOptions) {
+    async request(mergeOptions) {
       const options = {
         ...this.filterValues,
         ...this.queryExtras,
@@ -332,35 +334,69 @@ export default {
         draft: true
       });
     },
-    async getPieces () {
-      if (this.holdQueries) {
-        return;
-      }
-
-      this.holdQueries = true;
-
+    async requestPieces(page = 1, mergeOptions = {}) {
       const {
         currentPage, pages, results, choices
       } = await this.request({
+        ...mergeOptions,
         ...(
           this.moduleOptions.managerApiProjection &&
           { project: this.moduleOptions.managerApiProjection }
         ),
-        page: this.currentPage
+        page
       });
-      if (!this.mounted) {
+
+      return {
+        currentPage,
+        pages,
+        results,
+        choices
+      };
+    },
+    async requestAllPiecesTotal() {
+      const { count: total } = await this.request({ count: 1 });
+      return total;
+    },
+    async requestData(currentPage = 1) {
+      const pieces = await this.requestPieces(currentPage);
+      const total = await this.requestAllPiecesTotal();
+
+      return {
+        ...pieces,
+        total
+      };
+    },
+    setPieces(data) {
+      this.currentPage = data.currentPage;
+      this.totalPages = data.pages;
+      this.items = data.results;
+      this.filterChoices = data.choices;
+    },
+    async managePieces () {
+      if (this.holdQueries) {
         return;
       }
 
-      this.currentPage = currentPage;
-      this.totalPages = pages;
-      this.items = results;
-      this.filterChoices = choices;
+      this.holdQueries = true;
+
+      const {
+        currentPage, pages, results, choices
+      } = await this.requestPieces(this.currentPage);
+      if (!this.isMounted) {
+        return;
+      }
+
+      this.setPieces({
+        currentPage,
+        pages,
+        results,
+        choices
+      });
       this.holdQueries = false;
     },
-    async getAllPiecesTotal () {
-      const { count: total } = await this.request({ count: 1 });
-      if (!this.mounted) {
+    async manageAllPiecesTotal () {
+      const total = await this.requestAllPiecesTotal();
+      if (!this.isMounted) {
         return;
       }
 
@@ -388,25 +424,41 @@ export default {
     updatePage(num) {
       if (num) {
         this.currentPage = num;
-        this.getPieces();
+        this.managePieces();
       }
     },
-    async search(query) {
-      if (!this.mounted) {
-        return;
-      }
+    // A stateless search handler, only requesting the data.
+    // It's meant to be debounced and used in conjunction with the search
+    // method that actually updates the state.
+    async onSearch(query) {
+      const queryExtras = {};
       if (query) {
-        this.queryExtras.autocomplete = query;
+        queryExtras.autocomplete = query;
       } else if ('autocomplete' in this.queryExtras) {
-        delete this.queryExtras.autocomplete;
+        queryExtras.autocomplete = undefined;
       } else {
+        return {};
+      }
+      const { total, ...pieces } = await this.requestData(queryExtras);
+
+      return {
+        pieces,
+        total
+      };
+    },
+    async search({ pieces, total }) {
+      // Most probably due to ongoing (holdQueries) requests.
+      if (!pieces) {
         return;
       }
 
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      this.setPieces(pieces);
+      this.setAllPiecesSelection({
+        isSelected: false,
+        total
+      });
     },
     async filter(filter, value) {
       if (this.filterValues[filter] === value) {
@@ -416,8 +468,8 @@ export default {
       this.filterValues[filter] = value;
       this.currentPage = 1;
 
-      await this.getPieces();
-      await this.getAllPiecesTotal();
+      await this.managePieces();
+      await this.manageAllPiecesTotal();
       this.headers = this.computeHeaders();
 
       this.setCheckedDocs([]);
@@ -493,8 +545,8 @@ export default {
             }
           });
           if (action === 'archive') {
-            await this.getPieces();
-            this.getAllPiecesTotal();
+            await this.managePieces();
+            await this.manageAllPiecesTotal();
             this.checked = [];
           }
         } catch (error) {
@@ -512,30 +564,18 @@ export default {
         return item._id;
       });
     },
-
     async onContentChanged({ doc, action }) {
       if (
         !doc ||
         !doc.aposLocale ||
         doc.aposLocale.split(':')[0] === this.modalData.locale
       ) {
-        await this.getPieces();
-        this.getAllPiecesTotal();
+        await this.managePieces();
+        await this.manageAllPiecesTotal();
         if (action === 'archive') {
           this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
         }
       }
-    },
-
-    async onSearchSafe(...args) {
-      try {
-        const result = await this.onSearch(...args);
-        return result;
-      } catch (error) {
-        if (error.message !== 'debounce:canceled') {
-          throw error;
-        }
-      }
     }
   }
 };
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
index 2e0ad0e555..b8129f34e5 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
@@ -12,7 +12,6 @@ export default {
   emits: [ 'return' ],
   data() {
     return {
-      mounted: false,
       conflict: false,
       isArchived: null,
       originalParentSlug: ''
@@ -103,16 +102,11 @@ export default {
     }
   },
   async mounted() {
-    this.mounted = true;
-    this.debouncedCheckConflict = debounceAsync(() => this.checkConflict(), 250);
+    this.debouncedCheckConflict = debounceAsync(this.requestCheckConflict, 250, {
+      ifNotCancelled: this.checkConflict
+    });
     if (this.next.length) {
-      try {
-        await this.debouncedCheckConflict();
-      } catch (e) {
-        if (e.message !== 'debounce:canceled') {
-          throw e;
-        }
-      }
+      await this.debouncedCheckConflict.skipDelay();
     }
     this.originalParentSlug = this.getParentSlug(this.next);
   },
@@ -128,13 +122,7 @@ export default {
     async watchNext() {
       this.next = this.slugify(this.next);
       this.validateAndEmit();
-      try {
-        await this.debouncedCheckConflict();
-      } catch (e) {
-        if (e.message !== 'debounce:canceled') {
-          throw e;
-        }
-      }
+      await this.debouncedCheckConflict();
     },
     validate(value) {
       if (this.conflict) {
@@ -240,7 +228,7 @@ export default {
 
       return updated;
     },
-    async checkConflict() {
+    async requestCheckConflict() {
       let slug;
       try {
         slug = this.next;
@@ -252,34 +240,37 @@ export default {
             },
             draft: true
           });
-          if (!this.mounted) {
-            return;
-          }
+
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = false;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return false;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         }
       } catch (e) {
         // 409: Conflict (slug in use)
         if (e.status === 409) {
           // Still relevant?
           if (slug === this.next) {
-            this.conflict = true;
-            this.validateAndEmit();
-          } else {
-            // Can ignore it, another request
-            // probably already in-flight
+            return true;
           }
+          // Should not happen, another request
+          // already in-flight shouldn't be possible now.
+          return null;
         } else {
           throw e;
         }
       }
     },
+    async checkConflict(result) {
+      if (result === null) {
+        return;
+      }
+      this.conflict = result;
+      this.validateAndEmit();
+    },
     passFocus() {
       this.$refs.input.focus();
     },
diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index c5242c88e3..0c96a2b921 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -5,20 +5,57 @@ module.exports = {
   throttle
 };
 
+// Debounce the async function "fn". For synchronous functions, use _.debounce, not this function.
+//
+// Returns a debounced function that invokes "fn", but no more frequently than every "delay"
+// milliseconds and never while "fn" is already in progress.
+//
+// As always when debouncing, extra calls are discarded, however the most recent call
+// is guaranteed to result in a final invocation if not preempted by a new call, so you may
+// trust that the user's most recent input will eventually be sent etc.
+//
+// ### Avoiding race conditions with onSuccess
+//
+// Race conditions are a challenge. To avoid them, "fn" should have no side effects, and you should
+// pass a synchronous function that accepts the return value of "fn" as the "onSuccess" option.
+// The "onSuccess" function should then implement all needed side effects (e.g. changes to component
+// state, etc) when invoked. The debounced function has no return value when "onSuccess" is used.
+//
+// You can cancel the debounced function and cause any further invocations to be rejected by
+// calling the "cancel()" method attached to it.
+//
+// You can skip the initial delay for a particular invocation by calling the "skipDelay()" method
+// attached to the debounced function, passing any appropriate arguments for "fn" to "skipDelay" instead.
+// This is useful when immediate action is sometimes needed but you still want to use "onSuccess" in
+// a consistent manner and prevent race conditions.
+//
+// ### Detecting Cancellations
+//
+// If "onSuccess" is provided then all invocations of the debounced function resolve with "null",
+// whether or not they succeed, are canceled or reject with an error. In this case any needed error
+// reporting is the responsibility of "fn".
+//
+// If "onSuccess" is not provided, then after cancellation any invocations will be rejected
+// with an error such that "e.name === 'debounce.canceled'". Any other errors are passed through
+// as errors in the debounced function.
+
 function debounceAsync(fn, delay, options = {}) {
   const canceledRejection = new Error('debounce:canceled');
+  canceledRejection.name = 'debounce.canceled';
   let timer;
   let canceled = false;
   let previousDone = true;
+  let skipNextDelay = false;
 
   const setTimer = (res, rej, args, delay) => {
-    return setTimeout(() => {
+    function body() {
       if (canceled) {
         return rej(canceledRejection);
       }
       if (!previousDone) {
         clearTimeout(timer);
-        timer = setTimer(res, rej, args, delay);
+        // At least 100ms delay to let current invocation finish
+        timer = setTimer(res, rej, args, delay || 100);
         return;
       }
 
@@ -40,17 +77,37 @@ function debounceAsync(fn, delay, options = {}) {
 
       previousDone = true;
       res(returned);
-    }, delay);
+    }
+    return setTimeout(body, delay);
   };
 
-  function wrapper(...args) {
-    return new Promise((resolve, reject) => {
+  const wrapper = async (...args) => {
+    const promise = new Promise((resolve, reject) => {
       if (canceled) {
         return reject(canceledRejection);
       }
+      if (skipNextDelay) {
+        skipNextDelay = false;
+        timer = setTimer(resolve, reject, args, 0);
+        return;
+      }
       clearTimeout(timer);
       timer = setTimer(resolve, reject, args, delay);
     });
+
+    try {
+      const result = await promise;
+      if (options.onSuccess) {
+        await options.onSuccess(result);
+        return null;
+      }
+      return promise;
+    } catch (e) {
+      if (e.name !== 'debounce.canceled' || !options.onSuccess) {
+        throw e;
+      }
+      return null;
+    }
   };
 
   wrapper.cancel = () => {
@@ -59,6 +116,11 @@ function debounceAsync(fn, delay, options = {}) {
     timer = null;
   };
 
+  wrapper.skipDelay = (...args) => {
+    skipNextDelay = true;
+    return wrapper(...args);
+  };
+
   return wrapper;
 }
 
diff --git a/test/utils.js b/test/utils.js
index d6719264c3..1525ac3867 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -555,12 +555,153 @@ describe('Utils', function() {
       debouncedAsync.cancel();
 
       await assert.rejects(promise, {
+        name: 'debounce.canceled',
         message: 'debounce:canceled'
       });
 
       assert.deepEqual(calledAsync, [ 1 ], 'the original promise should always resolve');
     });
 
+    it('should NOT INVOKE onSuccess callback and not reject when canceled', async function () {
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 50, {
+        onSuccess: asyncSideEffectFn
+      });
+      const promise = debouncedAsync(1, 300);
+      await wait(100);
+      debouncedAsync.cancel();
+
+      const result = await promise;
+
+      assert.strictEqual(result, null);
+      assert.deepEqual(
+        calledAsync,
+        [],
+        'the side effect should not be called'
+      );
+    });
+
+    it('should invoke onSuccess callback when not canceled', async function () {
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 50, {
+        onSuccess: asyncSideEffectFn
+      });
+      const result = await debouncedAsync(1);
+      await wait(300);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect' ],
+        'the side effect should be called'
+      );
+      assert.strictEqual(result, null);
+    });
+
+    it('should skip the next delay when invoked via skipDelay', async function () {
+      const invoked = [];
+      const calledAsync = [];
+      async function asyncStatelessFn(num, time = 50) {
+        invoked.push(num);
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 300, {
+        onSuccess: asyncSideEffectFn
+      });
+      debouncedAsync.skipDelay(1, 20);
+      await wait(100);
+      debouncedAsync(2);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1 ],
+        'bad invokation of the original function'
+      );
+
+      // Wait for the entire delay time to pass.
+      await wait(500);
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect', 'async 2 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1, 2 ],
+        'bad invokation of the original function after the end of the delay'
+      );
+    });
+
+    it('should bounce skipDelay as well', async function () {
+      const invoked = [];
+      const calledAsync = [];
+
+      async function asyncStatelessFn(num, time = 50) {
+        invoked.push(num);
+        await wait(time);
+        console.debug('asyncStatelessFn:', num);
+        return `async ${num}`;
+      }
+      async function asyncSideEffectFn(result) {
+        await wait(50);
+        console.debug('asyncSideEffectFn:', result);
+        calledAsync.push(result + ' side effect');
+      }
+
+      const debouncedAsync = debounceAsync(asyncStatelessFn, 100, {
+        onSuccess: asyncSideEffectFn
+      });
+      debouncedAsync(1);
+      debouncedAsync.skipDelay(2);
+      debouncedAsync(3);
+      await wait(500);
+
+      assert.deepEqual(
+        calledAsync,
+        [ 'async 1 side effect', 'async 3 side effect' ],
+        'the side effect should be called'
+      );
+      assert.deepEqual(
+        invoked,
+        [ 1, 3 ],
+        'bad invokation of the original function'
+      );
+    });
+
     it('can throttle functions', async function () {
       const calledNormal = [];
       const calledAsync = [];

From 4977048b2d625adc0ee1761afba55cec32a65729 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:35:59 +0300
Subject: [PATCH 07/16] Addres review feedback

---
 .../image/ui/apos/components/AposMediaManager.vue   | 11 +++++++----
 modules/@apostrophecms/ui/ui/apos/utils/index.js    | 13 +++++++------
 test/utils.js                                       |  2 +-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index 9eb3ab2677..98b7931311 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -166,7 +166,9 @@ export default {
         emoji: '🖼'
       },
       cancelDescription: 'apostrophe:discardImageChangesPrompt',
-      debouncedGetMedia: null,
+      debouncedGetMedia: debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT, {
+        onSuccess: this.appendMedia
+      }),
       loadObserver: new IntersectionObserver(
         this.handleIntersect,
         {
@@ -271,12 +273,11 @@ export default {
       }
     }
   },
+
   created() {
     this.setDefaultFilters();
-    this.debouncedGetMedia = debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT, {
-      onSuccess: this.appendMedia
-    });
   },
+
   async mounted() {
     this.modal.active = true;
     // Do these before any async work or they might get added after they are "removed"
@@ -285,11 +286,13 @@ export default {
     await this.debouncedGetMedia.skipDelay({ tags: true });
     this.isFirstLoading = false;
   },
+
   beforeUnmount() {
     this.debouncedGetMedia.cancel();
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
+
   methods: {
     setDefaultFilters() {
       this.moduleOptions.filters.forEach(filter => {
diff --git a/modules/@apostrophecms/ui/ui/apos/utils/index.js b/modules/@apostrophecms/ui/ui/apos/utils/index.js
index 0c96a2b921..6631480e1e 100644
--- a/modules/@apostrophecms/ui/ui/apos/utils/index.js
+++ b/modules/@apostrophecms/ui/ui/apos/utils/index.js
@@ -5,7 +5,7 @@ module.exports = {
   throttle
 };
 
-// Debounce the async function "fn". For synchronous functions, use _.debounce, not this function.
+// Debounce the async function "fn". For synchronous functions, use "lodash/debounce", not this function.
 //
 // Returns a debounced function that invokes "fn", but no more frequently than every "delay"
 // milliseconds and never while "fn" is already in progress.
@@ -21,7 +21,7 @@ module.exports = {
 // The "onSuccess" function should then implement all needed side effects (e.g. changes to component
 // state, etc) when invoked. The debounced function has no return value when "onSuccess" is used.
 //
-// You can cancel the debounced function and cause any further invocations to be rejected by
+// You can cancel the debounced function and cause all ongoing and any further invocations to be rejected by
 // calling the "cancel()" method attached to it.
 //
 // You can skip the initial delay for a particular invocation by calling the "skipDelay()" method
@@ -31,13 +31,14 @@ module.exports = {
 //
 // ### Detecting Cancellations
 //
-// If "onSuccess" is provided then all invocations of the debounced function resolve with "null",
-// whether or not they succeed, are canceled or reject with an error. In this case any needed error
-// reporting is the responsibility of "fn".
-//
 // If "onSuccess" is not provided, then after cancellation any invocations will be rejected
 // with an error such that "e.name === 'debounce.canceled'". Any other errors are passed through
 // as errors in the debounced function.
+//
+// If "onSuccess" is provided then all invocations of the debounced function resolve with "null".
+// If a rejection due to cancelation is detected ("e.name === 'debounce.canceled'") then
+// it will be "muted" internally. Howeever, if any other type of error occurs, it will be passed through,
+// resulting in a rejection of the debounced function.
 
 function debounceAsync(fn, delay, options = {}) {
   const canceledRejection = new Error('debounce:canceled');
diff --git a/test/utils.js b/test/utils.js
index 1525ac3867..35dfcaa083 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -491,7 +491,7 @@ describe('Utils', function() {
     it('should cancel debounced calls (async)', async function () {
       let calledAsync = [];
 
-      async function asyncFn(num, time = 50) {
+      async function asyncFn(num) {
         await wait(50);
         calledAsync.push(num);
         // Keep all console.debug around to easy debug - ensure

From 3d88cc29bc92b71c34d694ae3f47d56afdfa7b4a Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:44:54 +0300
Subject: [PATCH 08/16] Media debounce typo

---
 .../piece-type/ui/apos/components/AposDocsManager.vue       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index bcaf90797e..870a9c1e8b 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -84,7 +84,7 @@
               disableUnchecked: maxReached()
             }"
             @select-click="selectAll"
-            @search="onSearchSafe"
+            @search="onSearchDebounced"
             @page-change="updatePage"
             @filter="filter"
             @batch="handleBatchAction"
@@ -232,7 +232,7 @@ export default {
     const DEBOUNCE_TIMEOUT = 500;
     // "mounted" in meaning of "able to mutate the state".
     this.isMounted = true;
-    this.onSearch = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
+    this.onSearchDebounced = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
       onSuccess: this.search
     });
 
@@ -259,7 +259,7 @@ export default {
   },
   onBeforeUnmount() {
     this.isMounted = false;
-    this.onSearch.cancel();
+    this.onSearchDebounced.cancel();
   },
   unmounted() {
     this.destroyShortcuts();

From 01aac3b9063547d20808e57e8b1d1b1520afc46f Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:47:57 +0300
Subject: [PATCH 09/16] Await all promises

---
 .../piece-type/ui/apos/components/AposDocsManager.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 870a9c1e8b..0f97aea7f6 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -421,10 +421,10 @@ export default {
         docs
       });
     },
-    updatePage(num) {
+    async updatePage(num) {
       if (num) {
         this.currentPage = num;
-        this.managePieces();
+        await this.managePieces();
       }
     },
     // A stateless search handler, only requesting the data.

From c3c70e6a991da83c874f7abaa1801c540f295e4e Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:50:54 +0300
Subject: [PATCH 10/16] Improve docs

---
 .../piece-type/ui/apos/components/AposDocsManager.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 0f97aea7f6..097028b311 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -231,6 +231,7 @@ export default {
   created() {
     const DEBOUNCE_TIMEOUT = 500;
     // "mounted" in meaning of "able to mutate the state".
+    // It is used in async methods that are not handled by debounceAsync.
     this.isMounted = true;
     this.onSearchDebounced = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
       onSuccess: this.search

From 20b9fba5934b6e635e096331f54ce74325bc1c8d Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:53:31 +0300
Subject: [PATCH 11/16] Improve docs

---
 .../piece-type/ui/apos/components/AposDocsManager.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 097028b311..2f381ed03a 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -448,7 +448,7 @@ export default {
       };
     },
     async search({ pieces, total }) {
-      // Most probably due to ongoing (holdQueries) requests.
+      // Most probably due to empty/invalid query.
       if (!pieces) {
         return;
       }

From 8e2350285790c6dc154655102eee35da2e4a44d1 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:58:58 +0300
Subject: [PATCH 12/16] Fix legacy option name

---
 modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
index b8129f34e5..c9c85051fc 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js
@@ -103,7 +103,7 @@ export default {
   },
   async mounted() {
     this.debouncedCheckConflict = debounceAsync(this.requestCheckConflict, 250, {
-      ifNotCancelled: this.checkConflict
+      onSuccess: this.setConflict
     });
     if (this.next.length) {
       await this.debouncedCheckConflict.skipDelay();
@@ -264,7 +264,7 @@ export default {
         }
       }
     },
-    async checkConflict(result) {
+    async setConflict(result) {
       if (result === null) {
         return;
       }

From 14b6461521caf14a181b4274b6dc38ea6a450bb7 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Thu, 29 Aug 2024 14:30:28 +0300
Subject: [PATCH 13/16] Eliminate unhandled rejections

---
 .../ui/apos/components/TheAposContextBar.vue  | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
index 74ddcf42ba..917e125767 100644
--- a/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
+++ b/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue
@@ -720,14 +720,18 @@ export default {
     async updateDraftIsEditable() {
       if (this.context.aposLocale && this.context.aposLocale.endsWith('published') && !this.context._edit) {
         // A contributor might be able to edit the draft
-        const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'draft',
-            aposLocale: this.context.aposLocale.split(':')[0]
-          }
-        });
-        this.draftIsEditable = draftContext && draftContext._edit;
+        try {
+          const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'draft',
+              aposLocale: this.context.aposLocale.split(':')[0]
+            }
+          });
+          this.draftIsEditable = draftContext && draftContext._edit;
+        } catch (e) {
+          console.error(e);
+        }
       }
     },
     async getPublished() {
@@ -735,13 +739,17 @@ export default {
       const manuallyPublished = moduleOptions.localized && !this.autopublish;
       if (manuallyPublished && this.context.lastPublishedAt) {
         const action = window.apos.modules[this.context.type].action;
-        const doc = await apos.http.get(`${action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'published'
-          }
-        });
-        return doc;
+        try {
+          const doc = await apos.http.get(`${action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'published'
+            }
+          });
+          return doc;
+        } catch (error) {
+          console.error(error);
+        }
       }
       return null;
     },

From 2689619ce25b9eaa69a9d5c2a80762dd3a3c4b11 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:01:31 +0300
Subject: [PATCH 14/16] Fix piece manager query

---
 .../piece-type/ui/apos/components/AposDocsManager.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index 2f381ed03a..ee2761342b 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -358,8 +358,8 @@ export default {
       const { count: total } = await this.request({ count: 1 });
       return total;
     },
-    async requestData(currentPage = 1) {
-      const pieces = await this.requestPieces(currentPage);
+    async requestData(currentPage = 1, mergeOptions = {}) {
+      const pieces = await this.requestPieces(currentPage, mergeOptions);
       const total = await this.requestAllPiecesTotal();
 
       return {
@@ -432,7 +432,7 @@ export default {
     // It's meant to be debounced and used in conjunction with the search
     // method that actually updates the state.
     async onSearch(query) {
-      const queryExtras = {};
+      const queryExtras = { ...this.queryExtras };
       if (query) {
         queryExtras.autocomplete = query;
       } else if ('autocomplete' in this.queryExtras) {
@@ -440,7 +440,7 @@ export default {
       } else {
         return {};
       }
-      const { total, ...pieces } = await this.requestData(queryExtras);
+      const { total, ...pieces } = await this.requestData(1, queryExtras);
 
       return {
         pieces,

From de7fab3c3c28e00759e072ebc33901056ea2e042 Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Fri, 30 Aug 2024 13:16:38 +0300
Subject: [PATCH 15/16] Get rid of isMounted

---
 .../ui/apos/components/AposDocsManager.vue       | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
index ee2761342b..c26f6870de 100644
--- a/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
+++ b/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue
@@ -149,7 +149,6 @@ export default {
   emits: [ 'archive' ],
   data() {
     return {
-      isMounted: false,
       modal: {
         active: false,
         triggerFocusRefresh: 0,
@@ -230,9 +229,6 @@ export default {
   },
   created() {
     const DEBOUNCE_TIMEOUT = 500;
-    // "mounted" in meaning of "able to mutate the state".
-    // It is used in async methods that are not handled by debounceAsync.
-    this.isMounted = true;
     this.onSearchDebounced = debounceAsync(this.onSearch, DEBOUNCE_TIMEOUT, {
       onSuccess: this.search
     });
@@ -259,7 +255,6 @@ export default {
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
   onBeforeUnmount() {
-    this.isMounted = false;
     this.onSearchDebounced.cancel();
   },
   unmounted() {
@@ -272,7 +267,6 @@ export default {
     async create() {
       await this.edit(null);
     },
-
     // If pieceOrId is null, a new piece is created
     async edit(pieceOrId) {
       let piece;
@@ -358,8 +352,8 @@ export default {
       const { count: total } = await this.request({ count: 1 });
       return total;
     },
-    async requestData(currentPage = 1, mergeOptions = {}) {
-      const pieces = await this.requestPieces(currentPage, mergeOptions);
+    async requestData(page = 1, mergeOptions = {}) {
+      const pieces = await this.requestPieces(page, mergeOptions);
       const total = await this.requestAllPiecesTotal();
 
       return {
@@ -383,9 +377,6 @@ export default {
       const {
         currentPage, pages, results, choices
       } = await this.requestPieces(this.currentPage);
-      if (!this.isMounted) {
-        return;
-      }
 
       this.setPieces({
         currentPage,
@@ -397,9 +388,6 @@ export default {
     },
     async manageAllPiecesTotal () {
       const total = await this.requestAllPiecesTotal();
-      if (!this.isMounted) {
-        return;
-      }
 
       this.setAllPiecesSelection({
         isSelected: false,

From 0a30ebc6dde5b9678e4309ccfeda4143a3ff731c Mon Sep 17 00:00:00 2001
From: Miro Yovchev <2827783+myovchev@users.noreply.github.com>
Date: Fri, 30 Aug 2024 14:23:04 +0300
Subject: [PATCH 16/16] Fix media tags

---
 .../image/ui/apos/components/AposMediaManager.vue             | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
index 98b7931311..7d7add4c4f 100644
--- a/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
+++ b/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue
@@ -370,7 +370,9 @@ export default {
     async appendMedia({
       tagList, currentPage, totalPages, items
     }) {
-      this.tagList = tagList;
+      if (Array.isArray(tagList)) {
+        this.tagList = tagList;
+      }
       this.currentPage = currentPage;
       this.totalPages = totalPages;
       for (const item of items) {