mirror of
https://github.com/penpot/penpot.git
synced 2025-02-09 08:38:15 -05:00
✨ Add error boundaries to the app
component.
This commit is contained in:
parent
e7519f3058
commit
6f0d45dfcd
2 changed files with 34 additions and 1 deletions
|
@ -23,12 +23,12 @@
|
||||||
[uxbox.main.ui.profile.register :refer [profile-register-page]]
|
[uxbox.main.ui.profile.register :refer [profile-register-page]]
|
||||||
[uxbox.main.ui.profile.recovery-request :refer [profile-recovery-request-page]]
|
[uxbox.main.ui.profile.recovery-request :refer [profile-recovery-request-page]]
|
||||||
[uxbox.main.ui.profile.recovery :refer [profile-recovery-page]]
|
[uxbox.main.ui.profile.recovery :refer [profile-recovery-page]]
|
||||||
|
|
||||||
[uxbox.main.ui.dashboard :as dashboard]
|
[uxbox.main.ui.dashboard :as dashboard]
|
||||||
[uxbox.main.ui.settings :as settings]
|
[uxbox.main.ui.settings :as settings]
|
||||||
[uxbox.main.ui.shapes]
|
[uxbox.main.ui.shapes]
|
||||||
[uxbox.main.ui.workspace :as workspace]
|
[uxbox.main.ui.workspace :as workspace]
|
||||||
[uxbox.util.data :refer [parse-int uuid-str?]]
|
[uxbox.util.data :refer [parse-int uuid-str?]]
|
||||||
|
[uxbox.util.components :refer [wrap-catch]]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.html.history :as html-history]
|
[uxbox.util.html.history :as html-history]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :refer [tr]]
|
||||||
|
@ -60,7 +60,15 @@
|
||||||
|
|
||||||
["/workspace/:file-id" :workspace]])
|
["/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
|
(mf/defc app
|
||||||
|
{:wrap [#(wrap-catch % app-error)]}
|
||||||
[props]
|
[props]
|
||||||
(let [route (mf/deref route-iref)]
|
(let [route (mf/deref route-iref)]
|
||||||
(case (get-in route [:data :name])
|
(case (get-in route [:data :name])
|
||||||
|
|
|
@ -49,3 +49,28 @@
|
||||||
#(rx/cancel! sub)))
|
#(rx/cancel! sub)))
|
||||||
#js [ob])
|
#js [ob])
|
||||||
state))
|
state))
|
||||||
|
|
||||||
|
(defn wrap-catch
|
||||||
|
([component error-component] (wrap-catch component error-component (constantly nil)))
|
||||||
|
([component error-component on-error]
|
||||||
|
(let [ctor (fn [props]
|
||||||
|
(this-as this
|
||||||
|
(unchecked-set this "state" #js {})
|
||||||
|
(.call js/React.Component this props)))
|
||||||
|
_ (goog/inherits ctor js/React.Component)
|
||||||
|
prot (unchecked-get ctor "prototype")]
|
||||||
|
(unchecked-set ctor "displayName" (str "Catch(" (unchecked-get component "displayName") ")"))
|
||||||
|
(unchecked-set ctor "getDerivedStateFromError" (fn [error] #js {:error error}))
|
||||||
|
(unchecked-set prot "componentDidCatch" (fn [e i] (on-error e i)))
|
||||||
|
(unchecked-set prot "render"
|
||||||
|
(fn []
|
||||||
|
(this-as this
|
||||||
|
(let [state (unchecked-get this "state")
|
||||||
|
error (unchecked-get state "error")]
|
||||||
|
(if error
|
||||||
|
(mf/element error-component #js {:error error})
|
||||||
|
(mf/element component #js {}))))))
|
||||||
|
|
||||||
|
ctor)))
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue