✨ Improve error handling.

frontend/deps.edn

@@ -13,9 +13,7 @@
   funcool/lentes {:mvn/version "1.4.0-SNAPSHOT"}
   funcool/potok {:mvn/version "2.8.0-SNAPSHOT"}
   funcool/promesa {:mvn/version "5.1.0"}
-  funcool/rumext {:mvn/version "2020.04.01-3"
+  funcool/rumext {:mvn/version "2020.04.02-1"}
-                  :exclusions [cljsjs/react
-                               cljsjs/react-dom]}
   }
  :aliases
  {:dev

frontend/src/uxbox/main/ui.cljs

@@ -20,7 +20,6 @@
    [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]]
@@ -86,60 +85,64 @@
       :not-found [:& not-found-page {:error data}]
       [:span "Internal application errror"])))
 
+(mf/defc app-container
+  {::mf/wrap [#(mf/catch % {:fallback app-error})]}
+  [{:keys [route] :as props}]
+  (case (get-in route [:data :name])
+    :login
+    [:& login-page]
+
+    :profile-register
+    [:& profile-register-page]
+
+    :profile-recovery-request
+    [:& profile-recovery-request-page]
+
+    :profile-recovery
+    [:& profile-recovery-page]
+
+    :viewer
+    (let [index (d/parse-integer (get-in route [:params :path :index]))
+          page-id (uuid (get-in route [:params :path :page-id]))]
+      [:& viewer-page {:page-id page-id
+                       :index index}])
+
+    (:settings-profile
+     :settings-password)
+    [:& settings/settings {:route route}]
+
+    :debug-icons-preview
+    (when *assert*
+      [:& i/debug-icons-preview])
+
+    (:dashboard-search
+     :dashboard-team
+     :dashboard-project
+     :dashboard-library-icons
+     :dashboard-library-icons-index
+     :dashboard-library-images
+     :dashboard-library-images-index
+     :dashboard-library-palettes
+     :dashboard-library-palettes-index)
+    [:& dashboard {:route route}]
+
+    :workspace
+    (let [project-id (uuid (get-in route [:params :path :project-id]))
+          file-id (uuid (get-in route [:params :path :file-id]))
+          page-id (uuid (get-in route [:params :query :page-id]))]
+      [:& workspace/workspace {:project-id project-id
+                               :file-id file-id
+                               :page-id page-id
+                               :key file-id}])
+
+    :not-found
+    [:& not-found-page {}]))
+
 (mf/defc app
-  {:wrap [#(wrap-catch % {:fallback app-error})]}
+  []
-  [props]
   (let [route (mf/deref route-iref)]
     (when route
-      (case (get-in route [:data :name])
+      [:& app-container {:route route :key (get-in route [:data :name])}])))
-        :login
-        (mf/element login-page)
-
-        :profile-register
-        (mf/element profile-register-page)
-
-        :profile-recovery-request
-        (mf/element profile-recovery-request-page)
-
-        :profile-recovery
-        (mf/element profile-recovery-page)
-
-        :viewer
-        (let [index (d/parse-integer (get-in route [:params :path :index]))
-              page-id (uuid (get-in route [:params :path :page-id]))]
-          [:& viewer-page {:page-id page-id
-                           :index index}])
-
-        (:settings-profile
-         :settings-password)
-        (mf/element settings/settings #js {:route route})
-
-        :debug-icons-preview
-        (when *assert*
-          (mf/element i/debug-icons-preview))
-
-        (:dashboard-search
-         :dashboard-team
-         :dashboard-project
-         :dashboard-library-icons
-         :dashboard-library-icons-index
-         :dashboard-library-images
-         :dashboard-library-images-index
-         :dashboard-library-palettes
-         :dashboard-library-palettes-index)
-        (mf/element dashboard #js {:route route})
-
-        :workspace
-        (let [project-id (uuid (get-in route [:params :path :project-id]))
-              file-id (uuid (get-in route [:params :path :file-id]))
-              page-id (uuid (get-in route [:params :query :page-id]))]
-          [:& workspace/workspace {:project-id project-id
-                                   :file-id file-id
-                                   :page-id page-id
-                                   :key file-id}])
-
-        :not-found
-        [:& not-found-page {}]))))
 
 ;; --- Error Handling
 

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

@@ -1,51 +0,0 @@
-;; 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]
-   [cljsjs.react]))
-
-(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))