Error Boundary

Problem: When one of your react components throws an error everything collapses and you need to fix the error before you can even reload the page

Solution: Error Boundary

https://github.com/pesterhazy/recalcitrant

I use this a ton in devcards rather than use the defcard-rg macro for reagent components, I use the standard devcard macro and wrap my reagent function in safe

(defn safe [elem]
  (reagent.core/as-element [(fn [] [recalcitrant.core/error-boundary
                         elem])]))


(defcard safe-button 
  (safe [:button {:errors :dont :messup :my :cards} ])

You should also wrap your whole app in this, to an error in one space from breaking the whole thing down this is the main function for one of my apps

(defn reload []
  (reagent/render-component (fn [] [error-boundary
                                   [current-page app-state]
                                   ])
                  (.getElementById js/document "app")))

(defn ^:export main []
  (dev-setup)
  (app-routes)
  (reload))