Clojurians Log v2

I wrap only the top-level component and render an error screen if something goes wrong. That screen has an "Undo" button that, since I'm using re-frame, is somewhat straightforward to implement. But it doesn't reliably work 100% of the time due to event chains.

Love that - thanks for the thought. It occurs to me that it would be possible to mechanize component development so that everything was in an error boundary automatically. In theory, this would hopefully minimize the damage of any misbehaving components. Have you gone down, or considered going down that road?

Very briefly. So far, there's no good reason to do it in my own projects. And adding an extra run-time wrapper to every single component sounds like it might cause or exacerbate performance issues. But I haven't actually done any measurements.

100% understand - we have many projects that are small enough that there's been no reason to think hard about this. For the bigger ones I can tell post-facto that we've just invested more in defensively coding the most dangerous components. The performance implications are something I wondered about too - though since we've gotten better w/ re-frame and understood some of the most common gotchas, performance issues aren't really our problem. Appreciate your thoughts - the 'undo' button idea is nice and gets me thinking. Stay rad.

Most react apps have a top-level error boundary to at least render some message like "this application crashed". Off the top of my head, Next.JS apps by default display a white screen with text instructing to check the browser console. Other React apps I've used before have a similar message but with more UI decorations and a button to reload the app

The official React docs also provide an example of how Facebook wraps components in Messenger in error boundaries. https://legacy.reactjs.org/docs/error-boundaries.html > For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.

So wrapping every single component in an error boundary seems like excessive overhead, but it makes sense to wrap e.g. a component made up of a list of components displaying an avatar, message, and menu button

👍