🎉 Add proper error boundaries for main component.

frontend/src/uxbox/main/ui.cljs

@@ -15,12 +15,13 @@
    [lentes.core :as l]
    [potok.core :as ptk]
    [rumext.alpha :as mf]
-   [uxbox.common.exceptions :as ex]
    [uxbox.builtins.icons :as i]
    [uxbox.common.exceptions :as ex]
+   [uxbox.common.exceptions :as ex]
    [uxbox.main.data.auth :refer [logout]]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
+   [uxbox.main.ui.components.error :refer [wrap-catch]]
    [uxbox.main.ui.dashboard :refer [dashboard]]
    [uxbox.main.ui.login :refer [login-page]]
    [uxbox.main.ui.profile.recovery :refer [profile-recovery-page]]
@@ -66,8 +67,15 @@
 
    ["/workspace/:file-id" :workspace]])
 
+(mf/defc app-error
+  [{:keys [error] :as props}]
+  (let [data (ex-data error)]
+    (case (:type data)
+      :not-found [:span "404"]
+      [:span "Internal application errror"])))
 
 (mf/defc app
+  {:wrap [#(wrap-catch % {:fallback app-error})]}
   [props]
   (let [route (mf/deref route-iref)]
     (case (get-in route [:data :name])

frontend/src/uxbox/main/ui/components/error.cljs

@@ -0,0 +1,50 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs S.L
+
+(ns uxbox.main.ui.components.error
+  "A hight order component for error handling."
+  (:require
+   [beicon.core :as rx]
+   [goog.object :as gobj]
+   [rumext.alpha :as mf]))
+
+(defn wrap-catch
+  [component {:keys [fallback on-error]}]
+  (let [constructor
+        (fn [props]
+          (this-as this
+            (unchecked-set this "state" #js {})
+            (.call js/React.Component this props)))
+
+        did-catch
+        (fn [error info]
+          (when (fn? on-error)
+            (on-error error info)))
+
+        derive-state
+        (fn [error]
+          #js {:error error})
+
+        render
+        (fn []
+          (this-as this
+            (let [state (gobj/get this "state")
+                  error (gobj/get state "error")]
+              (if error
+                (mf/element fallback #js {:error error})
+                (mf/element component #js {})))))
+
+        _ (goog/inherits constructor js/React.Component)
+        prototype (unchecked-get constructor "prototype")]
+
+    (unchecked-set constructor "displayName" "ErrorBoundary")
+    (unchecked-set constructor "getDerivedStateFromError" derive-state)
+    (unchecked-set prototype "componentDidCatch" did-catch)
+    (unchecked-set prototype "render" render)
+    constructor))

frontend/src/uxbox/main/ui/workspace.cljs

@@ -123,7 +123,6 @@
     :fn (fn []
           (let [sub (shortcuts/init)]
             #(rx/cancel! sub)))})
-
   (let [file (mf/deref refs/workspace-file)
         page (mf/deref refs/workspace-page)
         layout (mf/deref refs/workspace-layout)]