diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index b1ecb327f2..5da9d158a3 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -913,6 +913,21 @@ const EditorComponent = (props) => {
       const paramDiff = computeComponentPropertyDiff(appDefinitionDiff, appDefinition, appDiffOptions);
       const updateDiff = computeAppDiff(paramDiff, currentPageId, appDiffOptions, currentLayout);
 
+      if (updateDiff['error']) {
+        const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
+        const isPlatformMac = platform.toLowerCase().indexOf('mac') > -1;
+        const toastMessage = `Unable to save changes! ${isPlatformMac ? '(⌘ + Z to undo)' : '(ctrl + Z to undo)'}`;
+
+        toast(toastMessage, {
+          icon: '🚫',
+        });
+
+        return updateEditorState({
+          saveError: true,
+          isUpdatingEditorStateInProcess: false,
+        });
+      }
+
       updateAppVersion(appId, editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion)
         .then(() => {
           const _editingVersion = {
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 52752760c7..9c54fc3e29 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1184,56 +1184,61 @@ a more efficient approach, precomputing the parent component types and using
 conditional checks for better performance and error handling.*/
 
 export function computeComponentState(components = {}) {
-  let componentState = {};
-  const currentComponents = getCurrentState().components;
+  try {
+    let componentState = {};
+    const currentComponents = getCurrentState().components;
 
-  // Precompute parent component types
-  const parentComponentTypes = {};
-  Object.keys(components).forEach((key) => {
-    const { component } = components[key];
-    parentComponentTypes[key] = component.component;
-  });
+    // Precompute parent component types
+    const parentComponentTypes = {};
+    Object.keys(components).forEach((key) => {
+      const { component } = components[key];
+      parentComponentTypes[key] = component.component;
+    });
 
-  Object.keys(components).forEach((key) => {
-    if (!components[key]) return;
+    Object.keys(components).forEach((key) => {
+      if (!components[key]) return;
 
-    const { component } = components[key];
-    const componentMeta = componentTypes.find((comp) => component.component === comp.component);
+      const { component } = components[key];
+      const componentMeta = componentTypes.find((comp) => component.component === comp.component);
 
-    const existingComponentName = Object.keys(currentComponents).find((comp) => currentComponents[comp].id === key);
-    const existingValues = currentComponents[existingComponentName];
+      const existingComponentName = Object.keys(currentComponents).find((comp) => currentComponents[comp].id === key);
+      const existingValues = currentComponents[existingComponentName];
 
-    if (component.parent) {
-      const parentComponentType = parentComponentTypes[component.parent];
+      if (component.parent) {
+        const parentComponentType = parentComponentTypes[component.parent];
 
-      if (parentComponentType !== 'Listview' && parentComponentType !== 'Form') {
+        if (parentComponentType !== 'Listview' && parentComponentType !== 'Form') {
+          componentState[component.name] = {
+            ...componentMeta.exposedVariables,
+            id: key,
+            ...existingValues,
+          };
+        }
+      } else {
         componentState[component.name] = {
           ...componentMeta.exposedVariables,
           id: key,
           ...existingValues,
         };
       }
-    } else {
-      componentState[component.name] = {
-        ...componentMeta.exposedVariables,
-        id: key,
-        ...existingValues,
-      };
-    }
-  });
-
-  useCurrentStateStore.getState().actions.setCurrentState({
-    components: {
-      ...componentState,
-    },
-  });
-
-  return new Promise((resolve) => {
-    useEditorStore.getState().actions.updateEditorState({
-      defaultComponentStateComputed: true,
     });
-    resolve();
-  });
+
+    useCurrentStateStore.getState().actions.setCurrentState({
+      components: {
+        ...componentState,
+      },
+    });
+
+    return new Promise((resolve) => {
+      useEditorStore.getState().actions.updateEditorState({
+        defaultComponentStateComputed: true,
+      });
+      resolve();
+    });
+  } catch (error) {
+    console.log(error);
+    return Promise.reject(error);
+  }
 }
 
 export const getSvgIcon = (key, height = 50, width = 50, iconFile = undefined, styles = {}) => {
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index 14dfd41a7e..db72f51d60 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -47,9 +47,9 @@ const updateType = Object.freeze({
 });
 
 export const computeAppDiff = (appDiff, currentPageId, opts, currentLayout) => {
-  const { updateDiff, type, operation } = updateFor(appDiff, currentPageId, opts, currentLayout);
+  const { updateDiff, type, operation, error } = updateFor(appDiff, currentPageId, opts, currentLayout);
 
-  return { updateDiff, type, operation };
+  return { updateDiff, type, operation, error };
 };
 
 // for table column diffs, we need to compute the diff for each column separately and send the the entire column data
@@ -170,7 +170,11 @@ const updateFor = (appDiff, currentPageId, opts, currentLayout) => {
     const optionsTypes = _.intersection(options, updateTypes);
 
     if (optionsTypes.length > 0) {
-      return processingFunction(appDiff, currentPageId, optionsTypes, currentLayout);
+      try {
+        return processingFunction(appDiff, currentPageId, optionsTypes, currentLayout);
+      } catch (error) {
+        return { error, updateDiff: {}, type: null, operation: null };
+      }
     }
   }