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