Tip: Improving devcards experience with error-boundary

[Conaws]

I wanted to share a few tricks that have been very useful to me, but not sure where to do it, so figured I'd post them here.

First: I'm a big user and proponent of devcards, but one challenge I often run into is that when I get an unhandled error in a card, the whole page shuts down and i have to guess at what caused there error.

the lovely error-boundary component from recalcitrant solves this problem nicely -- https://github.com/pesterhazy/recalcitrant

In order to use that error boundary in devcards, you have to go through a bit of ceremony

(defn ops []
(assert false)
[:div "hey"])

(defcard oops
(r/as-element [(fn [] [error-boundary [ops]])]))

not, if you just tried to do (defcard-rg oops [ops]), the error would stop devcards from reloading, and if you refreshed your page you would just get thrown back to your index of all cards

having a little helper function

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

makes it real easy to have devcards that print errors to the console rather than shutting down on you

(defcard safe
(with-boundary [ops])

and you'll load just fine, plus once you fix what causes the error it'll reload right away

[gadfly361]

@Conaws That is a nifty trick!

I think a good way we can get this in to the cookbook would be to add two recipes:

1. a generic devcards recipe showing how to add devcards to a project, and
2. a follow-up recipe showing what you just described with the error boundary

Where 2 tells the reader to do everything in 1 first ... similar to the react-test-utils.

What do you think? And if that does sound reasonable, do you have any interest in making those recipes?

[gadfly361]

Given there is no movement on this, going to close.