Remove all obscure error handling from stores and move it to the display level

packages/builder/src/builderStore/store/frontend.js

@@ -86,8 +86,8 @@ export const getFrontendStore = () => {
         description: application.description,
         appId: application.appId,
         url: application.url,
-        layouts,
+        layouts: layouts || [],
-        screens,
+        screens: screens || [],
         theme: application.theme || "spectrum--light",
         customTheme: application.customTheme,
         hasAppPackage: true,
@@ -109,7 +109,6 @@ export const getFrontendStore = () => {
     theme: {
       save: async theme => {
         const appId = get(store).appId
-        try {
         await API.saveAppMetadata({
           appId,
           metadata: { theme },
@@ -118,15 +117,11 @@ export const getFrontendStore = () => {
           state.theme = theme
           return state
         })
-        } catch (error) {
-          notifications.error("Error updating theme")
-        }
       },
     },
     customTheme: {
       save: async customTheme => {
         const appId = get(store).appId
-        try {
         await API.saveAppMetadata({
           appId,
           metadata: { customTheme },
@@ -135,23 +130,15 @@ export const getFrontendStore = () => {
           state.customTheme = customTheme
           return state
         })
-        } catch (error) {
-          notifications.error("Error updating custom theme")
-        }
       },
     },
     routing: {
       fetch: async () => {
-        try {
+        const response = await API.fetchAppRoutes()
-          const routes = await API.getAppRoutes()
-          console.log(routes)
         store.update(state => {
-            state.routes = routes.routes
+          state.routes = response.routes
           return state
         })
-        } catch (error) {
-          notifications.error("Error fetching app routes")
-        }
       },
     },
     screens: {
@@ -174,26 +161,21 @@ export const getFrontendStore = () => {
         })
       },
       create: async screen => {
-        try {
         const savedScreen = await API.saveScreen(screen)
         store.update(state => {
+          state.screens.push(savedScreen)
           state.selectedScreenId = savedScreen._id
           state.selectedComponentId = savedScreen.props._id
           state.currentFrontEndType = FrontendTypes.SCREEN
           selectedAccessRole.set(savedScreen.routing.roleId)
-            return savedScreen
+          return state
         })
 
         // Refresh routes
         await store.actions.routing.fetch()
         return savedScreen
-        } catch (error) {
-          notifications.error("Error creating screen")
-          return null
-        }
       },
       save: async screen => {
-        try {
         const creatingNewScreen = screen._id === undefined
         const savedScreen = await API.saveScreen(screen)
         store.update(state => {
@@ -214,10 +196,6 @@ export const getFrontendStore = () => {
           store.actions.screens.select(savedScreen._id)
         }
         return savedScreen
-        } catch (error) {
-          notifications.error("Error saving screen")
-          return null
-        }
       },
       delete: async screens => {
         const screensToDelete = Array.isArray(screens) ? screens : [screens]
@@ -241,7 +219,6 @@ export const getFrontendStore = () => {
           )
         })
 
-        try {
         await Promise.all(promises)
         const deletedIds = screensToDelete.map(screen => screen._id)
         store.update(state => {
@@ -255,9 +232,9 @@ export const getFrontendStore = () => {
           }
           return state
         })
-        } catch (error) {
+
-          notifications.error("Error deleting screens")
+        // Refresh routes
-        }
+        await store.actions.routing.fetch()
       },
     },
     preview: {
@@ -291,7 +268,6 @@ export const getFrontendStore = () => {
         })
       },
       save: async layout => {
-        try {
         const creatingNewLayout = layout._id === undefined
         const savedLayout = await API.saveLayout(layout)
         store.update(state => {
@@ -309,10 +285,6 @@ export const getFrontendStore = () => {
           store.actions.layouts.select(savedLayout._id)
         }
         return savedLayout
-        } catch (error) {
-          notifications.error("Error saving layout")
-          return null
-        }
       },
       find: layoutId => {
         if (!layoutId) {
@@ -325,7 +297,6 @@ export const getFrontendStore = () => {
         if (!layout?._id) {
           return
         }
-        try {
         await API.deleteLayout({
           layoutId: layout._id,
           layoutRev: layout._rev,
@@ -338,9 +309,6 @@ export const getFrontendStore = () => {
           state.layouts = state.layouts.filter(x => x._id !== layout._id)
           return state
         })
-        } catch (error) {
-          notifications.error("Failed to delete layout")
-        }
       },
     },
     components: {
@@ -622,11 +590,6 @@ export const getFrontendStore = () => {
         selected._styles.custom = style
         await store.actions.preview.saveSelected()
       },
-      resetStyles: async () => {
-        const selected = get(selectedComponent)
-        selected._styles = { normal: {}, hover: {}, active: {} }
-        await store.actions.preview.saveSelected()
-      },
       updateConditions: async conditions => {
         const selected = get(selectedComponent)
         selected._conditions = conditions

packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { notifications, Select } from "@budibase/bbui"
   import { store } from "builderStore"
   import { get } from "svelte/store"
 
@@ -23,6 +23,7 @@
   ]
 
   const onChangeTheme = async theme => {
+    try {
       await store.actions.theme.save(theme)
       await store.actions.customTheme.save({
         ...get(store).customTheme,
@@ -31,6 +32,9 @@
             ? "var(--spectrum-global-color-gray-50)"
             : "var(--spectrum-global-color-gray-100)",
       })
+    } catch (error) {
+      notifications.error("Error updating theme")
+    }
   }
 </script>
 

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -1,5 +1,11 @@
 <script>
-  import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    ActionButton,
+    MenuItem,
+    Icon,
+    notifications,
+  } from "@budibase/bbui"
   import { store, currentAssetName, selectedComponent } from "builderStore"
   import structure from "./componentStructure.json"
 
@@ -36,7 +42,11 @@
 
   const onItemChosen = async item => {
     if (!item.isCategory) {
+      try {
         await store.actions.components.create(item.component)
+      } catch (error) {
+        notifications.error("Error creating component")
+      }
     }
   }
 </script>

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -146,16 +146,17 @@
     }
   })
 
-  const handleBudibaseEvent = event => {
+  const handleBudibaseEvent = async event => {
     const { type, data } = event.data || event.detail
     if (!type) {
       return
     }
 
+    try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
       } else if (type === "update-prop") {
-      store.actions.components.updateProp(data.prop, data.value)
+        await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
         confirmDeleteComponent(data.id)
       } else if (type === "preview-loaded") {
@@ -180,11 +181,15 @@
         // Cut and paste the component to the new destination
         if (source && destination) {
           store.actions.components.copy(source, true)
-        store.actions.components.paste(destination, data.mode)
+          await store.actions.components.paste(destination, data.mode)
         }
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
+    } catch (error) {
+      console.warn(error)
+      notifications.error("Error handling event from app preview")
+    }
   }
 
   const confirmDeleteComponent = componentId => {
@@ -196,7 +201,7 @@
     try {
       await store.actions.components.delete({ _id: idToDelete })
     } catch (error) {
-      notifications.error(error)
+      notifications.error("Error deleting component")
     }
     idToDelete = null
   }

packages/builder/src/components/design/AppPreview/ThemeEditor.svelte

@@ -9,6 +9,7 @@
     Label,
     Select,
     Button,
+    notifications,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import AppThemeSelect from "./AppThemeSelect.svelte"
@@ -43,15 +44,20 @@
   ]
 
   const updateProperty = property => {
-    return e => {
+    return async e => {
+      try {
         store.actions.customTheme.save({
           ...get(store).customTheme,
           [property]: e.detail,
         })
+      } catch (error) {
+        notifications.error("Error updating custom theme")
+      }
     }
   }
 
   const resetTheme = () => {
+    try {
       const theme = get(store).theme
       store.actions.customTheme.save({
         ...defaultTheme,
@@ -60,6 +66,9 @@
             ? "var(--spectrum-global-color-gray-50)"
             : "var(--spectrum-global-color-gray-100)",
       })
+    } catch (error) {
+      notifications.error("Error saving custom theme")
+    }
   }
 </script>
 

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -29,10 +29,14 @@
     if (currentIndex === 0) {
       return
     }
+    try {
       const newChildren = parent._children.filter(c => c !== component)
       newChildren.splice(currentIndex - 1, 0, component)
       parent._children = newChildren
       store.actions.preview.saveSelected()
+    } catch (error) {
+      notifications.error("Error saving screen")
+    }
   }
 
   const moveDownComponent = () => {
@@ -45,10 +49,14 @@
     if (currentIndex === parent._children.length - 1) {
       return
     }
+    try {
       const newChildren = parent._children.filter(c => c !== component)
       newChildren.splice(currentIndex + 1, 0, component)
       parent._children = newChildren
       store.actions.preview.saveSelected()
+    } catch (error) {
+      notifications.error("Error saving screen")
+    }
   }
 
   const duplicateComponent = () => {
@@ -60,7 +68,7 @@
     try {
       await store.actions.components.delete(component)
     } catch (error) {
-      notifications.error(error)
+      notifications.error("Error deleting component")
     }
   }
 
@@ -70,8 +78,12 @@
   }
 
   const pasteComponent = (mode, preserveBindings = false) => {
+    try {
       // lives in store - also used by drag drop
       store.actions.components.paste(component, mode, preserveBindings)
+    } catch (error) {
+      notifications.error("Error saving component")
+    }
   }
 </script>
 

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -4,6 +4,7 @@
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { capitalise } from "helpers"
+  import { notifications } from "@budibase/bbui"
 
   export let components = []
   export let currentComponent
@@ -62,6 +63,14 @@
     }
     closedNodes = closedNodes
   }
+
+  const onDrop = async () => {
+    try {
+      await dragDropStore.actions.drop()
+    } catch (error) {
+      notifications.error("Error saving component")
+    }
+  }
 </script>
 
 <ul>
@@ -69,7 +78,7 @@
     <li on:click|stopPropagation={() => selectComponent(component)}>
       {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
         <div
-          on:drop={dragDropStore.actions.drop}
+          on:drop={onDrop}
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"
@@ -83,7 +92,7 @@
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:iconClick={() => toggleNodeOpen(component._id)}
-        on:drop={dragDropStore.actions.drop}
+        on:drop={onDrop}
         text={getComponentText(component)}
         withArrow
         indentLevel={level + 1}
@@ -105,7 +114,7 @@
 
       {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
         <div
-          on:drop={dragDropStore.actions.drop}
+          on:drop={onDrop}
           ondragover="return false"
           ondragenter="return false"
           class="drop-item"

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -21,9 +21,9 @@
   const deleteLayout = async () => {
     try {
       await store.actions.layouts.delete(layout)
-      notifications.success(`Layout ${layout.name} deleted successfully.`)
+      notifications.success("Layout deleted successfully")
     } catch (err) {
-      notifications.error(`Error deleting layout: ${err.message}`)
+      notifications.error("Error deleting layout")
     }
   }
 
@@ -32,9 +32,9 @@
       const layoutToSave = cloneDeep(layout)
       layoutToSave.name = name
       await store.actions.layouts.save(layoutToSave)
-      notifications.success(`Layout saved successfully.`)
+      notifications.success("Layout saved successfully")
     } catch (err) {
-      notifications.error(`Error saving layout: ${err.message}`)
+      notifications.error("Error saving layout")
     }
   }
 </script>

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -13,7 +13,6 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      await store.actions.routing.fetch()
       $goto("../")
       notifications.success("Deleted screen successfully.")
     } catch (err) {

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js

@@ -72,7 +72,7 @@ export default function () {
         return state
       })
     },
-    drop: () => {
+    drop: async () => {
       const state = get(store)
 
       // Stop if the target and source are the same
@@ -92,7 +92,7 @@ export default function () {
 
       // Cut and paste the component
       frontendStore.actions.components.copy(state.dragged, true)
-      frontendStore.actions.components.paste(
+      await frontendStore.actions.components.paste(
         state.targetComponent,
         state.dropPosition
       )

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -11,7 +11,15 @@
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
+  import {
+    Icon,
+    Modal,
+    Select,
+    Search,
+    Tabs,
+    Tab,
+    notifications,
+  } from "@budibase/bbui"
 
   export let showModal
 
@@ -58,8 +66,12 @@
     selectedAccessRole.set(role)
   }
 
-  onMount(() => {
+  onMount(async () => {
-    store.actions.routing.fetch()
+    try {
+      await store.actions.routing.fetch()
+    } catch (error) {
+      notifications.error("Error fetching routes")
+    }
   })
 </script>
 

packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte

@@ -9,8 +9,8 @@
     try {
       await store.actions.layouts.save({ name })
       notifications.success(`Layout ${name} created successfully`)
-    } catch (err) {
+    } catch (error) {
-      notifications.error(`Error creating layout ${name}.`)
+      notifications.error("Error creating layout")
     }
   }
 </script>

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -2,7 +2,7 @@
   import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, notifications } from "@budibase/bbui"
   import { store, selectedAccessRole, allScreens } from "builderStore"
   import analytics, { Events } from "analytics"
 
@@ -29,6 +29,7 @@
 
   const save = async () => {
     showProgressCircle = true
+    try {
       await createScreens()
       for (let screen of createdScreens) {
         await saveScreens(screen)
@@ -38,6 +39,9 @@
       createdScreens = []
       screenName = ""
       url = ""
+    } catch (error) {
+      notifications.error("Error creating screens")
+    }
     showProgressCircle = false
   }
 
@@ -73,10 +77,14 @@
 
       await store.actions.screens.create(draftScreen)
       if (draftScreen.props._instanceName.endsWith("List")) {
+        try {
           await store.actions.components.links.save(
             draftScreen.routing.route,
             draftScreen.routing.route.split("/")[1]
           )
+        } catch (error) {
+          notifications.error("Error creating link to screen")
+        }
       }
     }
   }

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,6 +1,6 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import { Input, DetailSummary } from "@budibase/bbui"
+  import { Input, DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -40,7 +40,13 @@
     ]
   }
 
-  const updateProp = store.actions.components.updateProp
+  const updateProp = async (key, value) => {
+    try {
+      await store.actions.components.updateProp(key, value)
+    } catch (error) {
+      notifications.error("Error updating component prop")
+    }
+  }
 
   const canRenderControl = setting => {
     const control = getComponentForSettingType(setting?.type)

packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte

@@ -1,5 +1,11 @@
 <script>
-  import { DetailSummary, ActionButton, Drawer, Button } from "@budibase/bbui"
+  import {
+    DetailSummary,
+    ActionButton,
+    Drawer,
+    Button,
+    notifications,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
   import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
 
@@ -14,8 +20,12 @@
     drawer.show()
   }
 
-  const save = () => {
+  const save = async () => {
-    store.actions.components.updateConditions(tempValue)
+    try {
+      await store.actions.components.updateConditions(tempValue)
+    } catch (error) {
+      notifications.error("Error updating conditions")
+    }
     drawer.hide()
   }
 </script>

packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte

@@ -8,6 +8,7 @@
     Layout,
     Body,
     Button,
+    notifications,
   } from "@budibase/bbui"
   import { store } from "builderStore"
 
@@ -21,8 +22,12 @@
     drawer.show()
   }
 
-  const save = () => {
+  const save = async () => {
-    store.actions.components.updateCustomStyle(tempValue)
+    try {
+      await store.actions.components.updateCustomStyle(tempValue)
+    } catch (error) {
+      notifications.error("Error updating custom style")
+    }
     drawer.hide()
   }
 </script>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ActionButton } from "@budibase/bbui"
+  import { ActionButton, notifications } from "@budibase/bbui"
   import { currentAsset, store } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/componentUtils"
   import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
@@ -9,7 +9,7 @@
 
   let confirmResetFieldsDialog
 
-  const resetFormFields = () => {
+  const resetFormFields = async () => {
     const form = findClosestMatchingComponent(
       $currentAsset.props,
       componentInstance._id,
@@ -17,10 +17,14 @@
     )
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
-    store.actions.components.updateProp(
+    try {
+      await store.actions.components.updateProp(
         "_children",
         fields.map(field => field.json())
       )
+    } catch (error) {
+      notifications.error("Error resetting form fields")
+    }
   }
 </script>
 

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -1,7 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { get as deepGet, setWith } from "lodash"
-  import { Input, DetailSummary } from "@budibase/bbui"
+  import { Input, DetailSummary, notifications } from "@budibase/bbui"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
   import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@@ -29,7 +29,12 @@
       }
       return state
     })
+
+    try {
       store.actions.preview.saveSelected()
+    } catch (error) {
+      notifications.error("Error saving settings")
+    }
   }
 
   const screenSettings = [

packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte

@@ -1,6 +1,6 @@
 <script>
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import { DetailSummary } from "@budibase/bbui"
+  import { DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
 
   export let name
@@ -23,6 +23,14 @@
     delete controlProps.control
     return controlProps
   }
+
+  const updateStyle = async (key, val) => {
+    try {
+      await store.actions.components.updateStyle(key, val)
+    } catch (error) {
+      notifications.error("Error updating style")
+    }
+  }
 </script>
 
 <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
@@ -34,7 +42,7 @@
           control={prop.control}
           key={prop.key}
           value={style[prop.key]}
-          onChange={val => store.actions.components.updateStyle(prop.key, val)}
+          onChange={val => updateStyle(prop.key, val)}
           props={getControlProps(prop)}
           {bindings}
         />