here's what the error boundary code looks like

(defn error-boundary [comp]
  (js/console.log comp)
  (let [error (r/atom nil)]
    (r/create-class
     {:component-did-catch (fn [this e info]
                             (js/console.log "sending error to sentry")
                             (js/console.log this)
                             (js/console.log e)
                             (js/console.log info))
      :get-derived-state-from-error (fn [e]
                                      (reset! error e)
                                      #js {})
      :reagent-render (fn [comp]
                        (js/console.log "does this render?" error)
                        (if @error
                          [:div
                           "Something went wrong."
                           [:button {:on-click #(reset! error nil)} "Try again (reload page)"]]
                          comp))})))

and the component where I'm using it

(defn dataview-component
  []
  [error-boundary
   [:<> [dataview-menu]
    (let [{path :path, :as match-data} @match]
        (throw (js/Error. "error info"))
      [:div#content.full-page-fixed
       [:div.container-wide
        [:div#dataset-view.cfix
         [:div.tab-container.dataset-tabs [tab-bar path]
          (when match-data
            (let [view (:view (:data match-data))] [view match-data]))]]]])]])

I expected the fallback UI to be rendered but not nothing is rendered

what could I be misssing?

I use the exact same thing but with one potentially crucial difference - my error boundary is not something that can accept a child. But rather, it's the main component itself. In you case, I think if something goes wrong in dataview-component itself, the error boundary will not work - simply because it didn't even have the chance to be turned into an element yet.

Ah, and you do throw in that component - so that's why. I don't think an error boundary would catch anything in that case, as you yourself observe. Try moving its child into its own component and then using something like

[error-boundary [child-that-throws]]

@U2FRKM4TW that worked 😃

the part I don't undestand in your explanation here is > simply because it didn't even have the chance to be turned into an element yet

I wonder if there's documentation or code I can read that would help me understand better when things are turned into elements

For a Hiccup vector to become a React element, Reagent has to get that vector first. And your function simply does not return a vector - it throws immediately. The error boundary component is never encoded in an element, it's never instantiated. So it can't catch anything.

uuuh... that makes perfect sense, thanks

Well, the best starting point is to read React's documentation on the difference between components, elements, and instances. Once that understanding is achieved, perhaps Reagent documentation has something about turning Hiccup into elements. I've been using Reagent for quite some time now so at this point I more often just read the source code itself.

'reading source code itself' 😂 ... I wonder how long it'll take for me to get there

Not long at all if you start doing that early. :) Besides its reactive part (stuff in the reagent.ratom namespace), it's rather easy to follow actually.

But definitely go through all the documentation first.

It's documented.

oh you replied very fast I was writing rest of the question here 😄

I am going to check now

Have you read the documentation I mentioned? as-element is, as it states in its docstring, a function to convert a Hiccup vector into a React element. But you're passing a result of a hook call to it, which cannot possibly be a Hiccup vector in this case. You need to create a function component, use a hook there just as you would in React, and then use that function component.

I see. I did read the documentation but I couldn't figure it out. I never used react before clojurescript maybe that why I am failing to figure it out. I'll try as you suggest.

Ah, yeah. Reagent relies on React in more than just its internal workings - it's a semipermeable abstraction, so knowing a fair bit of React will significantly increase your chances of overall success with Reagent. It also has a very nice documentation, so I would definitely recommend reading it when time allows.

thank you 🙂 I'll definitely read it all.