PRO-6477 undhandled promise errors

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
 

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

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,16 +274,31 @@ 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;
 
     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 : [];

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;
+        }
+      }
     }
   }
 };

modules/@apostrophecms/schema/ui/apos/logic/AposInputSlug.js

@@ -1,17 +1,18 @@
 // 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',
   mixins: [ AposInputMixin ],
   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;