improve error reporting

Author: roman01la

core/dev/uix/rsc_example/server/core.clj

@@ -86,12 +86,22 @@
                     (rsc/render-to-flight-stream ($ server.root/page {:route route})
                       {:on-chunk on-chunk :result result})))})))
 
+(def error-boundary
+  (uix/create-error-boundary
+    {:derive-error-state (fn [error] {:error error})}
+    (fn [[state] {:keys [children]}]
+      (if-let [error (:error state)]
+        ($ server.root/html-page
+          ($ :h1.text-5xl.text-center "Something went wrong"))
+        children))))
+
 (defn html-handler [request]
   (when-let [route (r/match-by-path router (:uri request))]
     (server/as-channel request
       {:on-open (fn [ch]
                   (let [on-chunk (with-gzip request ch "text/html; charset=utf-8")]
-                    (rsc/render-to-html-stream ($ server.root/page {:route route})
+                    (rsc/render-to-html-stream
+                      ($ error-boundary ($ server.root/page {:route route}))
                       {:on-chunk on-chunk})))})))
 
 (defn rsc-action-handler [request]

core/dev/uix/rsc_example/server/root.clj

@@ -45,22 +45,26 @@
                          :key movie_id}
                    ($ fav-link {:id movie_id})))))))))
 
+(defui html-page [{:keys [children]}]
+  ($ :html {:lang "en"}
+    ($ :head
+      ($ :meta {:charset "utf-8"})
+      ($ :meta {:name "viewport" :content "width=device-width, initial-scale=1"})
+      ($ :meta {:name "description" :content "UIx RSC Demo page"})
+      ($ :title "UIx RSC Demo")
+      ($ :link {:rel :preconnect :href "https://fonts.googleapis.com"})
+      ($ :link {:rel :preconnect :href "https://fonts.gstatic.com"})
+      ;; todo: this url breaks hydration
+      #_($ :link {:rel :stylesheet :href "https://fonts.googleapis.com/css2?family=Boldonse&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif&display=swap"})
+      ($ :link {:rel :stylesheet :href "/rsc-out/main.css"})
+      ($ :script {:src "/rsc-out/rsc.js" :async true}))
+    ($ :body.font-instrumentSans.pb-56
+      ($ header)
+      children
+      ($ favourites))))
+
 (defui page [{:keys [route]}]
   (let [{:keys [path path-params data]} route
         {:keys [component]} data]
-    ($ :html {:lang "en"}
-      ($ :head
-        ($ :meta {:charset "utf-8"})
-        ($ :meta {:name "viewport" :content "width=device-width, initial-scale=1"})
-        ($ :meta {:name "description" :content "UIx RSC Demo page"})
-        ($ :title "UIx RSC Demo")
-        ($ :link {:rel :preconnect :href "https://fonts.googleapis.com"})
-        ($ :link {:rel :preconnect :href "https://fonts.gstatic.com"})
-        ;; todo: this url breaks hydration
-        #_($ :link {:rel :stylesheet :href "https://fonts.googleapis.com/css2?family=Boldonse&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif&display=swap"})
-        ($ :link {:rel :stylesheet :href "/rsc-out/main.css"})
-        ($ :script {:src "/rsc-out/rsc.js" :async true}))
-      ($ :body.font-instrumentSans.pb-56
-        ($ header)
-        ($ component {:path path :params path-params})
-        ($ favourites)))))
+    ($ html-page
+       ($ component {:path path :params path-params}))))

core/src/uix/core.clj

@@ -137,7 +137,7 @@
             rsc-id (str *ns* "/" fname)]
         `(def ~fname
            (with-meta
-             (core/fn [& ~args-sym]
+             (core/fn ~(symbol (str "comp-" fname)) [& ~args-sym]
                ~(with-props-cond props-cond `(first ~args-sym))
                (let [~args ~args-sym
                      ~(or rest-sym `_#) (dissoc (first ~args-sym) ~@dissoc-ks)]

core/src/uix/rsc.cljc

@@ -2,8 +2,10 @@
   #?(:clj (:refer-clojure :exclude [partial]))
   #?(:cljs (:require-macros [uix.rsc]))
   (:require #?@(:cljs [["@roman01la/react-server-dom-esm/client" :as rsd-client]
+                       [cljs-bean.core :as bean]
                        [clojure.edn :as edn]
                        [clojure.walk :as walk]
+                       [clojure.string :as str]
                        [reitit.core :as r]
                        [reitit.frontend :as rf]
                        [reitit.frontend.easy :as rfe]])
@@ -164,16 +166,49 @@
                             :padding "32px 0 0"}}
              ($ :div {:style {:max-width 800}}
                ($ :div {:style {:color "rgb(206, 17, 38)"
-                                :font-size 21}}
+                                :font-size 21
+                                :margin-bottom 24}}
                   (.-message error))
-               ($ :pre {:style {:font-size 12
-                                :max-height 360
-                                :overflow-y :auto
-                                :background-color "rgba(206, 17, 38, 0.05)"
-                                :margin "24px 0 16px"
-                                :padding 8
-                                :border-radius 5}}
-                  ($ :code (.-stack error)))
+               (let [{:keys [src line start-line frame-line name]} (bean/bean js/__ERROR_SRC)]
+                 ($ :<>
+                   ($ :div {:style {:font-size 12
+                                    :color "#5a5a5a"}}
+                      name)
+                   ($ :pre {:style {:font-size 12
+                                    :max-height 360
+                                    :overflow-y :auto
+                                    :background-color "rgba(206, 17, 38, 0.05)"
+                                    :margin "16px 0"
+                                    :padding "8px 0"
+                                    :border-radius 5}}
+                      ($ :code
+                        (->> (str/split-lines src)
+                             (map-indexed (fn [idx ln]
+                                            (if (= idx line)
+                                              ($ :div {:key idx
+                                                       :style {:background-color "#ff000047"
+                                                               :padding "0 8px"}}
+                                                 (str (+ start-line idx) "  ")
+                                                 ln)
+                                              ($ :div {:key idx
+                                                       :style {:padding "0 8px"}}
+                                                 (str (+ start-line idx) "  ")
+                                                 ln)))))))
+                   ($ :pre {:style {:font-size 12
+                                    :max-height 360
+                                    :overflow-y :auto
+                                    :background-color "rgba(206, 17, 38, 0.05)"
+                                    :margin "24px 0 16px"
+                                    :padding "8px 0"
+                                    :border-radius 5}}
+                      ($ :code
+                         (->> (str/split-lines (.-stack error))
+                              (map-indexed (fn [idx ln]
+                                             ($ :div
+                                                {:key idx
+                                                 :style {:background-color (when (= idx frame-line) "#ff000047")
+                                                         :padding "0 8px"}}
+                                               ln))))))))
                ($ :div {:style {:font-size 12
                                 :color "#5a5a5a"}}
                   "This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.")))
@@ -376,10 +411,13 @@
        (let [done-count (atom 0)
              set-done #(when (== 2 (swap! done-count inc))
                          (on-chunk :done))
+             sb (server.flight/create-state)
+             emit-error #(when (seq (:error-component @sb))
+                           ;; todo: only in dev
+                           (on-chunk (str "<script>window.__ERROR_SRC = " (json/generate-string (:error-component @sb)) ";</script>")))
              handle-chunk #(if (= :done %)
-                             (set-done)
+                             (do (emit-error) (set-done))
                              (on-chunk (str "<script>window.__FLIGHT_DATA.push(" (json/generate-string %) ");</script>")))
-             sb (server.flight/create-state)
              ast (loader/run-with-loader
                    #(server.flight/-unwrap src sb))
              *state (volatile! :state/root)]
@@ -389,6 +427,7 @@
            (on-chunk suspense-cleanup-js))
          (on-chunk "<script>window.__FLIGHT_DATA ||= [];</script>")
          (server.flight/render-to-flight-stream ast {:on-chunk handle-chunk :sb sb :cache *cache*})
+         ;; todo: handle errors in suspended blocks
          (stream-suspended sb handle-chunk set-done
            (fn [to-id element]
              (let [ssb (dom.server/make-static-builder)

dom/src/uix/dom/server/flight.clj

@@ -1,13 +1,15 @@
 (ns uix.dom.server.flight
-  (:require [clojure.string :as str]
+  (:require [clojure.java.io :as io]
+            [clojure.string :as str]
             [clojure.walk :as walk]
             [uix.compiler.attributes :as attrs]
             [uix.core :refer [$ defui]]
             [uix.dom.server :as dom.server]
             [uix.rsc.loader :as loader]
             [cheshire.core :as json]
             [clojure.core.async :as async])
-  (:import [clojure.lang IBlockingDeref IPersistentVector ISeq]))
+  (:import [clojure.lang IBlockingDeref IPersistentVector ISeq RT]
+           (java.io InputStreamReader LineNumberReader PushbackReader)))
 
 (defprotocol FlightRenderer
   (-unwrap [this sb]
@@ -163,6 +165,8 @@
     (keyword? tag) (render-dom-element el sb)
     :else (throw (IllegalArgumentException. (str (type tag) " " tag " is not a valid element type")))))
 
+(defrecord RenderingError [^Throwable error var])
+
 (defn- unwrap-component-element [[tag :as el] sb]
   (let [props (normalize-props el)
         v (try
@@ -171,7 +175,10 @@
                 (tag props)
                 (tag)))
             (catch Throwable e
-              e))]
+              (if-not false ;; dev
+                (throw e)
+                (let [v (-> tag meta :rsc/id symbol resolve)]
+                  (RenderingError. e v)))))]
     (-unwrap v sb)))
 
 (defn- unwrap-fragment-element [[tag attrs & children] sb]
@@ -214,13 +221,82 @@
           :fallback (-unwrap fallback sb)
           :children tags}]))
 
+(defn- source-fn [v]
+  (when-let [filepath (:file (meta v))]
+    (with-open [rdr (LineNumberReader. (io/reader filepath))]
+      (dotimes [_ (dec (:line (meta v)))] (.readLine rdr))
+      (let [text (StringBuilder.)
+            pbr (proxy [PushbackReader] [rdr]
+                  (read [] (let [i (proxy-super read)]
+                             (.append text (char i))
+                             i)))
+            read-opts (if (.endsWith ^String filepath "cljc") {:read-cond :allow} {})]
+        (if (= :unknown *read-eval*)
+          (throw (IllegalStateException. "Unable to read source while *read-eval* is :unknown."))
+          (read read-opts (PushbackReader. pbr)))
+        (str text)))))
+
+(defn- render-error [^RenderingError this sb]
+  (let [{:keys [^Throwable error var]} this
+        st (.getStackTrace error)
+        stack (->> st
+                   (mapv (fn [^java.lang.StackTraceElement frame]
+                           (str/join " "
+                             ["    at"
+                              (str (.getClassName frame)
+                                   " "
+                                   (.getMethodName frame))
+                              (str
+                                "("
+                                (.getFileName frame)
+                                ":"
+                                (.getLineNumber frame)
+                                ")")])))
+                   (into [(str (type error) ": " (ex-message error))])
+                   (str/join "\n"))
+        src (str "E" (json/generate-string
+                       {:digest ""
+                        :name (str (type error))
+                        :message (str (type error) " " (ex-message error))
+                        :stack stack}))
+        id (get-cached-id sb :errors src)
+        component-src (source-fn var)
+        {:keys [line ns name]} (meta var)
+        component-ns (str (-> ns str munge) "$comp_")
+        [frame-line error-line] (reduce
+                                  (fn [[idx _] ^java.lang.StackTraceElement f]
+                                    (if (str/starts-with? (.getClassName f) component-ns)
+                                      (reduced [(inc idx) (.getLineNumber f)])
+                                      [(inc idx) nil]))
+                                  [0 nil]
+                                  st)
+        marker-line-offset (- (or error-line line) line)]
+    (swap! sb assoc :error-component {:src component-src
+                                      :line marker-line-offset
+                                      :start-line line
+                                      :frame-line frame-line
+                                      :name (str ns "/" name)})
+    (str "$L" id)))
+
+(defn- unwrap-error-boundary [[f & args] sb]
+  (let [{:keys [display-name render-fn did-catch derive-error-state]} f
+        props {:children args}]
+    (try
+      (-> (render-fn [nil identity] props)
+          (-unwrap sb))
+      (catch Exception e
+        (when did-catch (did-catch e display-name))
+        (-> (render-fn [(derive-error-state e) identity] props)
+            (-unwrap sb))))))
+
 (defn unwrap-element [[tag :as el] sb]
   (cond
     (client-component? tag) el
     (fn? tag) (unwrap-component-element el sb)
     (= :<> tag) (unwrap-fragment-element el sb)
     (= :uix.core/suspense tag) (unwrap-suspense-element el sb)
     (keyword? tag) (unwrap-dom-element el sb)
+    (and (map? tag) (-> tag meta :uix.core/error-boundary)) (unwrap-error-boundary el sb)
     :else (throw (IllegalArgumentException. (str (type tag) " " tag " is not a valid element type")))))
 
 (extend-protocol FlightRenderer
@@ -252,32 +328,12 @@
   (-render [this sb]
     (-render (str this) sb))
 
-  Throwable
+  RenderingError
   (-unwrap [this sb]
     this)
   (-render [this sb]
-    (let [stack (->> (.getStackTrace this)
-                     (mapv (fn [^java.lang.StackTraceElement frame]
-                             (str/join " "
-                               ["    at"
-                                (str (.getClassName frame)
-                                     " "
-                                     (.getMethodName frame))
-                                (str
-                                  "("
-                                  (.getFileName frame)
-                                  ":"
-                                  (.getLineNumber frame)
-                                  ")")])))
-                     (into [(str (type this) ": " (ex-message this))])
-                     (str/join "\n"))
-          src (str "E" (json/generate-string
-                         {:digest ""
-                          :name (str (type this))
-                          :message (str (type this) " " (ex-message this))
-                          :stack stack}))
-          id (get-cached-id sb :errors src)]
-      (str "$L" id)))
+    ;; todo: only in dev
+    (render-error this sb))
 
   IBlockingDeref
   ;; async values serializer
@@ -314,7 +370,8 @@
          :suspended {}
          :imports {}
          :refs {}
-         :errors {}}))
+         :errors {}
+         :error-component {}}))
 
 (defn- render-result [src result sb]
   (let [id (get-id sb)]