From 6a34a94bc5de69ebb8ae720976745ee8fbeed001 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:33 +0000
Subject: [PATCH 1/7] fix: add missing error handling

---
 packages/nc-gui/composables/useExtensions.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index fb23d0cfb1..7825c259d4 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -345,7 +345,9 @@ export const useExtensions = createSharedComposable(() => {
     () => base.value?.id,
     (baseId) => {
       if (baseId && !baseExtensions.value[baseId]) {
-        loadExtensionsForBase(baseId)
+        loadExtensionsForBase(baseId).catch((e) => {
+          console.error(e)
+        })
       }
     },
     {

From 3ca9222b78d217c976baf10fb75bebfc4f3719df Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:33 +0000
Subject: [PATCH 2/7] fix: ResizeObserver bug and missing error handler

---
 packages/nc-gui/app.vue                       | 21 ++++++++++++
 packages/nc-gui/composables/useViewColumns.ts | 34 +++++++++++--------
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index cb78700e70..f51a70eaaf 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -96,6 +96,27 @@ onMounted(() => {
     refreshCommandPalette()
   })
 })
+
+// ref: https://github.com/vuejs/vue-cli/issues/7431#issuecomment-1793385162
+// Stop error resizeObserver
+const debounce = (callback: (...args: any[]) => void, delay: number) => {
+  let tid: any
+  return function (...args: any[]) {
+    const ctx = self
+    tid && clearTimeout(tid)
+    tid = setTimeout(() => {
+      callback.apply(ctx, args)
+    }, delay)
+  }
+}
+
+const _ = (window as any).ResizeObserver
+;(window as any).ResizeObserver = class ResizeObserver extends _ {
+  constructor(callback: (...args: any[]) => void) {
+    callback = debounce(callback, 20)
+    super(callback)
+  }
+}
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index 1de81319a5..235a1b6bba 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -434,23 +434,27 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
           scope: defineViewScope({ view: view.value }),
         })
       }
+try {
+  // sync with server if allowed
+  if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
+    await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+      ...props,
+    })
+  }
 
-      // sync with server if allowed
-      if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
-        await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
-          ...props,
-        })
-      }
+  if (gridViewCols.value?.[id]) {
+    Object.assign(gridViewCols.value[id], {
+      ...gridViewCols.value[id],
+      ...props,
+    })
+  } else {
+    // fallback to reload
+    await loadViewColumns()
+  }
+}catch (e) {
+
+}
 
-      if (gridViewCols.value?.[id]) {
-        Object.assign(gridViewCols.value[id], {
-          ...gridViewCols.value[id],
-          ...props,
-        })
-      } else {
-        // fallback to reload
-        await loadViewColumns()
-      }
     }
 
     watch(

From 53cc525af3684fc3a9552cdb6a3b865fafdf5c8f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:33 +0000
Subject: [PATCH 3/7] fix: exception handling in useExtensions.ts

---
 packages/nc-gui/composables/useExtensions.ts | 21 ++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index 7825c259d4..d69e217f35 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -188,17 +188,22 @@ export const useExtensions = createSharedComposable(() => {
       return
     }
 
-    const { list } = await $api.extensions.list(baseId)
+    try {
+      const { list } = await $api.extensions.list(baseId)
 
-    const extensions = list?.map((ext: any) => new Extension(ext))
+      const extensions = list?.map((ext: any) => new Extension(ext))
 
-    if (baseExtensions.value[baseId]) {
-      baseExtensions.value[baseId].extensions = extensions || baseExtensions.value[baseId].extensions
-    } else {
-      baseExtensions.value[baseId] = {
-        extensions: extensions || [],
-        expanded: false,
+      if (baseExtensions.value[baseId]) {
+        baseExtensions.value[baseId].extensions = extensions || baseExtensions.value[baseId].extensions
+      } else {
+        baseExtensions.value[baseId] = {
+          extensions: extensions || [],
+          expanded: false,
+        }
       }
+    } catch (e) {
+      console.log(e)
+      // TODO: Handle error
     }
   }
 

From 42d1dee7ae335e033335a8a90284d31ac2dd2b05 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:34 +0000
Subject: [PATCH 4/7] refactor: review comments

---
 packages/nc-gui/composables/useExtensions.ts  |  1 -
 packages/nc-gui/composables/useViewColumns.ts | 39 +++++++++----------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index d69e217f35..664fc881ce 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -203,7 +203,6 @@ export const useExtensions = createSharedComposable(() => {
       }
     } catch (e) {
       console.log(e)
-      // TODO: Handle error
     }
   }
 
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index 235a1b6bba..fb9a4ed516 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -434,27 +434,26 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
           scope: defineViewScope({ view: view.value }),
         })
       }
-try {
-  // sync with server if allowed
-  if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
-    await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
-      ...props,
-    })
-  }
-
-  if (gridViewCols.value?.[id]) {
-    Object.assign(gridViewCols.value[id], {
-      ...gridViewCols.value[id],
-      ...props,
-    })
-  } else {
-    // fallback to reload
-    await loadViewColumns()
-  }
-}catch (e) {
-
-}
+      try {
+        // sync with server if allowed
+        if (!isPublic.value && isUIAllowed('viewFieldEdit') && gridViewCols.value[id]?.id) {
+          await $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+            ...props,
+          })
+        }
 
+        if (gridViewCols.value?.[id]) {
+          Object.assign(gridViewCols.value[id], {
+            ...gridViewCols.value[id],
+            ...props,
+          })
+        } else {
+          // fallback to reload
+          await loadViewColumns()
+        }
+      } catch (e) {
+        console.error(e)
+      }
     }
 
     watch(

From e829fd9bb480e8c963b6cae71b5814ea77419256 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:34 +0000
Subject: [PATCH 5/7] fix: handle if target element is null

---
 packages/nc-gui/components/smartsheet/Kanban.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 7a3ef2d309..411f8a9127 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -278,6 +278,8 @@ async function onMove(event: any, stackKey: string) {
 }
 
 const kanbanListScrollHandler = useDebounceFn(async (e: any) => {
+  if (!e.target) return
+
   if (e.target.scrollTop + e.target.clientHeight + INFINITY_SCROLL_THRESHOLD >= e.target.scrollHeight) {
     const stackTitle = e.target.getAttribute('data-stack-title')
     const pageSize = appInfo.value.defaultLimit || 25

From 96f8a915f1298478052161e60de9ff90c5f75c1d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:34 +0000
Subject: [PATCH 6/7] fix: proper null value and exception handling

---
 .../smartsheet/expanded-form/RichComment.vue  |   2 +
 .../nc-gui/composables/useKanbanViewStore.ts  |   2 +-
 .../nc-gui/composables/useSmartsheetStore.ts  |   2 +-
 packages/nc-gui/composables/useViewData.ts    | 105 ++++++++++--------
 packages/nc-gui/store/bases.ts                |  38 ++++---
 5 files changed, 84 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
index 18ca0b8f9f..604b7489ab 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
@@ -96,6 +96,8 @@ const editor = useEditor({
   onBlur: (e) => {
     const targetEl = e?.event.relatedTarget as HTMLElement
 
+    if (!targetEl) return;
+
     if (
       !targetEl?.closest(
         '.comment-bubble-menu, .nc-rich-text-comment, .tippy-box, .nc-comment-save-btn, .rich-text-bottom-bar, .mention, .nc-mention-list, .tippy-content, .nc-comment-rich-editor',
diff --git a/packages/nc-gui/composables/useKanbanViewStore.ts b/packages/nc-gui/composables/useKanbanViewStore.ts
index fb4e9202c7..25f7e2c976 100644
--- a/packages/nc-gui/composables/useKanbanViewStore.ts
+++ b/packages/nc-gui/composables/useKanbanViewStore.ts
@@ -52,7 +52,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       if (!col) return
 
       if (!search.value.query.trim()) return
-      if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+      if (sqlUi.value && ['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
         where = `(${col.title},like,%${search.value.query.trim()}%)`
       } else {
         where = `(${col.title},eq,${search.value.query.trim()})`
diff --git a/packages/nc-gui/composables/useSmartsheetStore.ts b/packages/nc-gui/composables/useSmartsheetStore.ts
index 47aa641322..c487bdff54 100644
--- a/packages/nc-gui/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui/composables/useSmartsheetStore.ts
@@ -46,7 +46,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       if (!col) return
 
       if (!search.value.query.trim()) return
-      if (['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
+      if (sqlUi.value && ['text', 'string'].includes(sqlUi.value.getAbstractType(col)) && col.dt !== 'bigint') {
         where = `(${col.title},like,%${search.value.query.trim()}%)`
       } else {
         where = `(${col.title},eq,${search.value.query.trim()})`
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index f1f0950c97..9787d2b726 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -1,13 +1,22 @@
-import { ViewTypes } from 'nocodb-sdk'
+import {ViewTypes} from 'nocodb-sdk'
 import axios from 'axios'
-import type { Api, ColumnType, FormColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
-import type { ComputedRef, Ref } from 'vue'
-import { NavigateDir } from '#imports'
+import type {
+  Api,
+  ColumnType,
+  FormColumnType,
+  FormType,
+  GalleryType,
+  PaginatedType,
+  TableType,
+  ViewType
+} from 'nocodb-sdk'
+import type {ComputedRef, Ref} from 'vue'
+import {NavigateDir} from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
-    row: { ...row },
-    oldRow: { ...row },
+    row: {...row},
+    oldRow: {...row},
     rowMeta: {},
   }))
 
@@ -16,26 +25,26 @@ export function useViewData(
   viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
-  const { activeTableId, activeTable } = storeToRefs(useTablesStore())
+  const {activeTableId, activeTable} = storeToRefs(useTablesStore())
 
   const meta = computed(() => _meta.value || activeTable.value)
   const metaId = computed(() => _meta.value?.id || activeTableId.value)
 
-  const { t } = useI18n()
+  const {t} = useI18n()
 
   const optimisedQuery = useState('optimisedQuery', () => true)
 
-  const { api, isLoading, error } = useApi()
+  const {api, isLoading, error} = useApi()
 
   const router = useRouter()
 
   const route = router.currentRoute
 
-  const { appInfo, gridViewPageSize } = useGlobal()
+  const {appInfo, gridViewPageSize} = useGlobal()
 
   const appInfoDefaultLimit = gridViewPageSize.value || appInfo.value.defaultLimit || 25
 
-  const _paginationData = ref<PaginatedType>({ page: 1, pageSize: appInfoDefaultLimit })
+  const _paginationData = ref<PaginatedType>({page: 1, pageSize: appInfoDefaultLimit})
 
   const aggCommentCount = ref<{ row_id: string; count: string }[]>([])
 
@@ -51,19 +60,19 @@ export function useViewData(
 
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const { base } = storeToRefs(useBase())
+  const {base} = storeToRefs(useBase())
 
-  const { sharedView, fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
+  const {sharedView, fetchSharedViewData, paginationData: sharedPaginationData} = useSharedView()
 
-  const { $api } = useNuxtApp()
+  const {$api} = useNuxtApp()
 
-  const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+  const {sorts, nestedFilters} = useSmartsheetStoreOrThrow()
 
-  const { isUIAllowed } = useRoles()
+  const {isUIAllowed} = useRoles()
 
   const routeQuery = computed(() => route.value.query as Record<string, string>)
 
-  const { isPaginationLoading } = storeToRefs(useViewsStore())
+  const {isPaginationLoading} = storeToRefs(useViewsStore())
 
   const paginationData = computed({
     get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
@@ -93,7 +102,7 @@ export function useViewData(
   }))
 
   async function syncCount() {
-    const { count } = await $api.dbViewRow.count(
+    const {count} = await $api.dbViewRow.count(
       NOCO,
       base?.value?.id as string,
       metaId.value as string,
@@ -136,21 +145,25 @@ export function useViewData(
     if (isPublic.value) return
 
     const ids = formattedData.value
-      ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
-      ?.map(({ row }) => {
+      ?.filter(({rowMeta: {new: isNew}}) => !isNew)
+      ?.map(({row}) => {
         return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
       })
 
     if (!ids?.length || ids?.some((id) => !id)) return
 
-    aggCommentCount.value = await $api.utils.commentCount({
-      ids,
-      fk_model_id: metaId.value as string,
-    })
+    try {
+      aggCommentCount.value = await $api.utils.commentCount({
+        ids,
+        fk_model_id: metaId.value as string,
+      })
 
-    for (const row of formattedData.value) {
-      const id = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
-      row.rowMeta.commentCount = +(aggCommentCount.value?.find((c: Record<string, any>) => c.row_id === id)?.count || 0)
+      for (const row of formattedData.value) {
+        const id = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
+        row.rowMeta.commentCount = +(aggCommentCount.value?.find((c: Record<string, any>) => c.row_id === id)?.count || 0)
+      }
+    } catch (e) {
+      console.error(e)
     }
   }
 
@@ -173,23 +186,23 @@ export function useViewData(
     try {
       response = !isPublic.value
         ? await api.dbViewRow.list(
-            'noco',
-            base.value.id!,
-            metaId.value!,
-            viewMeta.value!.id!,
-            {
-              ...queryParams.value,
-              ...params,
-              ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-              ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-              where: where?.value,
-              ...(excludePageInfo.value ? { excludeCount: 'true' } : {}),
-            } as any,
-            {
-              cancelToken: controller.value.token,
-            },
-          )
-        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value, where: where?.value })
+          'noco',
+          base.value.id!,
+          metaId.value!,
+          viewMeta.value!.id!,
+          {
+            ...queryParams.value,
+            ...params,
+            ...(isUIAllowed('sortSync') ? {} : {sortArrJson: JSON.stringify(sorts.value)}),
+            ...(isUIAllowed('filterSync') ? {} : {filterArrJson: JSON.stringify(nestedFilters.value)}),
+            where: where?.value,
+            ...(excludePageInfo.value ? {excludeCount: 'true'} : {}),
+          } as any,
+          {
+            cancelToken: controller.value.token,
+          },
+        )
+        : await fetchSharedViewData({sortsArr: sorts.value, filtersArr: nestedFilters.value, where: where?.value})
     } catch (error) {
       // if the request is canceled, then do nothing
       if (error.code === 'ERR_CANCELED') {
@@ -269,7 +282,7 @@ export function useViewData(
   async function loadFormView() {
     if (!viewMeta?.value?.id) return
     try {
-      const { columns, ...view } = await $api.dbView.formRead(viewMeta.value.id)
+      const {columns, ...view} = await $api.dbView.formRead(viewMeta.value.id)
       let order = 1
       const fieldById = (columns || []).reduce((o: Record<string, any>, f: Record<string, any>) => {
         if (order < f.order) {
@@ -289,7 +302,7 @@ export function useViewData(
           fk_column_id: c.id,
           fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id!] ? fieldById[c.id!] : {}),
-          meta: { validators: [], ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta) },
+          meta: {validators: [], ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta)},
           order: (fieldById[c.id!] && fieldById[c.id!].order) || order++,
           id: fieldById[c.id!] && fieldById[c.id!].id,
         }))
diff --git a/packages/nc-gui/store/bases.ts b/packages/nc-gui/store/bases.ts
index 4335ba834a..4345160bb1 100644
--- a/packages/nc-gui/store/bases.ts
+++ b/packages/nc-gui/store/bases.ts
@@ -182,29 +182,33 @@ export const useBases = defineStore('basesStore', () => {
 
   // actions
   const loadProject = async (baseId: string, force = false) => {
-    if (!force && isProjectPopulated(baseId)) return bases.value.get(baseId)
+    try {
+      if (!force && isProjectPopulated(baseId)) return bases.value.get(baseId)
 
-    const _project = await api.base.read(baseId)
+      const _project = await api.base.read(baseId)
 
-    if (!_project) {
-      await navigateTo(`/`)
-      return
-    }
+      if (!_project) {
+        await navigateTo(`/`)
+        return
+      }
 
-    _project.meta = _project?.meta && typeof _project.meta === 'string' ? JSON.parse(_project.meta) : {}
+      _project.meta = _project?.meta && typeof _project.meta === 'string' ? JSON.parse(_project.meta) : {}
 
-    const existingProject = bases.value.get(baseId) ?? ({} as any)
+      const existingProject = bases.value.get(baseId) ?? ({} as any)
 
-    const base = {
-      ...existingProject,
-      ..._project,
-      isExpanded: route.value.params.baseId === baseId || existingProject.isExpanded,
-      // isLoading is managed by Sidebar
-      isLoading: existingProject.isLoading,
-      meta: { ...parseProp(existingProject.meta), ...parseProp(_project.meta) },
-    }
+      const base = {
+        ...existingProject,
+        ..._project,
+        isExpanded: route.value.params.baseId === baseId || existingProject.isExpanded,
+        // isLoading is managed by Sidebar
+        isLoading: existingProject.isLoading,
+        meta: { ...parseProp(existingProject.meta), ...parseProp(_project.meta) },
+      }
 
-    bases.value.set(baseId, base)
+      bases.value.set(baseId, base)
+    } catch (e: any) {
+      await message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const getSqlUi = async (baseId: string, sourceId: string) => {

From 5b3ca9ebf589a61d6e7ec40bf845026564d89ad2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Jul 2024 20:35:34 +0000
Subject: [PATCH 7/7] chore: lint

---
 .../smartsheet/expanded-form/RichComment.vue  |  2 +-
 packages/nc-gui/composables/useViewColumns.ts |  2 +
 packages/nc-gui/composables/useViewData.ts    | 87 +++++++++----------
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
index 604b7489ab..ecd93ddea3 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
@@ -96,7 +96,7 @@ const editor = useEditor({
   onBlur: (e) => {
     const targetEl = e?.event.relatedTarget as HTMLElement
 
-    if (!targetEl) return;
+    if (!targetEl) return
 
     if (
       !targetEl?.closest(
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index fb9a4ed516..48d4c5468c 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -452,6 +452,8 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
           await loadViewColumns()
         }
       } catch (e) {
+        // this could happen if user doesn't have permission to update view columns
+        // todo: find out root cause and handle with isUIAllowed
         console.error(e)
       }
     }
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 9787d2b726..4541488922 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -1,22 +1,13 @@
-import {ViewTypes} from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
 import axios from 'axios'
-import type {
-  Api,
-  ColumnType,
-  FormColumnType,
-  FormType,
-  GalleryType,
-  PaginatedType,
-  TableType,
-  ViewType
-} from 'nocodb-sdk'
-import type {ComputedRef, Ref} from 'vue'
-import {NavigateDir} from '#imports'
+import type { Api, ColumnType, FormColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { ComputedRef, Ref } from 'vue'
+import { NavigateDir } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
-    row: {...row},
-    oldRow: {...row},
+    row: { ...row },
+    oldRow: { ...row },
     rowMeta: {},
   }))
 
@@ -25,26 +16,26 @@ export function useViewData(
   viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
-  const {activeTableId, activeTable} = storeToRefs(useTablesStore())
+  const { activeTableId, activeTable } = storeToRefs(useTablesStore())
 
   const meta = computed(() => _meta.value || activeTable.value)
   const metaId = computed(() => _meta.value?.id || activeTableId.value)
 
-  const {t} = useI18n()
+  const { t } = useI18n()
 
   const optimisedQuery = useState('optimisedQuery', () => true)
 
-  const {api, isLoading, error} = useApi()
+  const { api, isLoading, error } = useApi()
 
   const router = useRouter()
 
   const route = router.currentRoute
 
-  const {appInfo, gridViewPageSize} = useGlobal()
+  const { appInfo, gridViewPageSize } = useGlobal()
 
   const appInfoDefaultLimit = gridViewPageSize.value || appInfo.value.defaultLimit || 25
 
-  const _paginationData = ref<PaginatedType>({page: 1, pageSize: appInfoDefaultLimit})
+  const _paginationData = ref<PaginatedType>({ page: 1, pageSize: appInfoDefaultLimit })
 
   const aggCommentCount = ref<{ row_id: string; count: string }[]>([])
 
@@ -60,19 +51,19 @@ export function useViewData(
 
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const {base} = storeToRefs(useBase())
+  const { base } = storeToRefs(useBase())
 
-  const {sharedView, fetchSharedViewData, paginationData: sharedPaginationData} = useSharedView()
+  const { sharedView, fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
 
-  const {$api} = useNuxtApp()
+  const { $api } = useNuxtApp()
 
-  const {sorts, nestedFilters} = useSmartsheetStoreOrThrow()
+  const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
-  const {isUIAllowed} = useRoles()
+  const { isUIAllowed } = useRoles()
 
   const routeQuery = computed(() => route.value.query as Record<string, string>)
 
-  const {isPaginationLoading} = storeToRefs(useViewsStore())
+  const { isPaginationLoading } = storeToRefs(useViewsStore())
 
   const paginationData = computed({
     get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
@@ -102,7 +93,7 @@ export function useViewData(
   }))
 
   async function syncCount() {
-    const {count} = await $api.dbViewRow.count(
+    const { count } = await $api.dbViewRow.count(
       NOCO,
       base?.value?.id as string,
       metaId.value as string,
@@ -145,8 +136,8 @@ export function useViewData(
     if (isPublic.value) return
 
     const ids = formattedData.value
-      ?.filter(({rowMeta: {new: isNew}}) => !isNew)
-      ?.map(({row}) => {
+      ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
+      ?.map(({ row }) => {
         return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
       })
 
@@ -186,23 +177,23 @@ export function useViewData(
     try {
       response = !isPublic.value
         ? await api.dbViewRow.list(
-          'noco',
-          base.value.id!,
-          metaId.value!,
-          viewMeta.value!.id!,
-          {
-            ...queryParams.value,
-            ...params,
-            ...(isUIAllowed('sortSync') ? {} : {sortArrJson: JSON.stringify(sorts.value)}),
-            ...(isUIAllowed('filterSync') ? {} : {filterArrJson: JSON.stringify(nestedFilters.value)}),
-            where: where?.value,
-            ...(excludePageInfo.value ? {excludeCount: 'true'} : {}),
-          } as any,
-          {
-            cancelToken: controller.value.token,
-          },
-        )
-        : await fetchSharedViewData({sortsArr: sorts.value, filtersArr: nestedFilters.value, where: where?.value})
+            'noco',
+            base.value.id!,
+            metaId.value!,
+            viewMeta.value!.id!,
+            {
+              ...queryParams.value,
+              ...params,
+              ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+              ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+              where: where?.value,
+              ...(excludePageInfo.value ? { excludeCount: 'true' } : {}),
+            } as any,
+            {
+              cancelToken: controller.value.token,
+            },
+          )
+        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value, where: where?.value })
     } catch (error) {
       // if the request is canceled, then do nothing
       if (error.code === 'ERR_CANCELED') {
@@ -282,7 +273,7 @@ export function useViewData(
   async function loadFormView() {
     if (!viewMeta?.value?.id) return
     try {
-      const {columns, ...view} = await $api.dbView.formRead(viewMeta.value.id)
+      const { columns, ...view } = await $api.dbView.formRead(viewMeta.value.id)
       let order = 1
       const fieldById = (columns || []).reduce((o: Record<string, any>, f: Record<string, any>) => {
         if (order < f.order) {
@@ -302,7 +293,7 @@ export function useViewData(
           fk_column_id: c.id,
           fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id!] ? fieldById[c.id!] : {}),
-          meta: {validators: [], ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta)},
+          meta: { validators: [], ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta) },
           order: (fieldById[c.id!] && fieldById[c.id!].order) || order++,
           id: fieldById[c.id!] && fieldById[c.id!].id,
         }))