♻️ Refactor error handling.

frontend/src/app/main.cljs

@@ -81,7 +81,7 @@
             (rt/initialize-history on-navigate))
 
   (st/emit! udu/fetch-profile)
-  (mf/mount (mf/element ui/app-wrapper) (dom/get-element "app"))
+  (mf/mount (mf/element ui/app) (dom/get-element "app"))
   (mf/mount (mf/element modal) (dom/get-element "modal")))
 
 (defn ^:export init

frontend/src/app/main/data/messages.cljs

@@ -129,3 +129,13 @@
           :actions actions
           :tag tag})))
 
+(defn assign-exception
+  [{:keys [type] :as error}]
+  (us/assert (s/nilable map?) error)
+  (us/assert (s/nilable ::us/keyword) type)
+  (ptk/reify ::assign-exception
+    ptk/UpdateEvent
+    (update [_ state]
+      (if (nil? error)
+        (dissoc state :exception)
+        (assoc state :exception error)))))

frontend/src/app/main/data/workspace/persistence.cljs

@@ -130,13 +130,11 @@
                       (rx/map #(shapes-changes-persisted file-id %))))))
 
             on-error
-            (fn [{:keys [type status] :as error}]
-              (if (and (= :server-error type)
-                       (= 502 status))
+            (fn [{:keys [type] :as error}]
+              (if (or (= :bad-gateway type)
+                      (= :service-unavailable type))
                 (rx/of (update-persistence-status {:status :error :reason type}))
-                (rx/of update-persistence-queue
-                       (update-persistence-status {:status :error :reason type}))))]
-
+                (rx/throw error)))]
 
         (when (= file-id (:id file))
           (->> (rp/mutation :update-file params)
@@ -219,18 +217,7 @@
                    (rp/query :project {:id project-id})
                    (rp/query :file-libraries {:file-id file-id}))
            (rx/first)
-           (rx/map (fn [bundle] (apply bundle-fetched bundle)))
-           (rx/catch (fn [{:keys [type code] :as error}]
-                       (cond
-                         (= :not-found type)
-                         (rx/of (rt/nav' :not-found))
-
-                         (and (= :authentication type)
-                              (= :unauthorized code))
-                         (rx/of (rt/nav' :not-authorized))
-
-                         :else
-                         (throw error))))))))
+           (rx/map (fn [bundle] (apply bundle-fetched bundle)))))))
 
 (defn- bundle-fetched
   [file users project libraries]

frontend/src/app/main/refs.cljs

@@ -31,6 +31,9 @@
 (def profile
   (l/derived :profile st/state))
 
+(def exception
+  (l/derived :exception st/state))
+
 ;; ---- Dashboard refs
 
 (def dashboard-local

frontend/src/app/main/repo.cljs

@@ -15,34 +15,32 @@
    [app.util.http-api :as http]))
 
 (defn- handle-response
-  [response]
+  [{:keys [status body] :as response}]
   (cond
-    (http/success? response)
-    (rx/of (:body response))
+    (= 204 status)
+    (rx/empty)
 
-    (= (:status response) 400)
-    (rx/throw (:body response))
+    (= 502 status)
+    (rx/throw {:type :bad-gateway})
 
-    (= (:status response) 401)
-    (rx/throw {:type :authentication
-               :code :not-authenticated})
-
-    (= (:status response) 403)
-    (rx/throw {:type :authorization
-               :code :not-authorized})
-
-    (= (:status response) 404)
-    (rx/throw (:body response))
+    (= 503 status)
+    (rx/throw {:type :service-unavailable})
 
     (= 0 (:status response))
     (rx/throw {:type :offline})
 
+    (and (= 200 status)
+         (coll? body))
+    (rx/of body)
+
+    (and (>= status 400)
+         (map? body))
+    (rx/throw body)
+
     :else
-    (rx/throw (merge {:type :server-error
-                      :status (:status response)}
-                     (:body response)))))
-
-
+    (rx/throw {:type :unexpected-error
+               :status status
+               :data body})))
 
 (defn send-query!
   [id params]

frontend/src/app/main/store.cljs

@@ -26,6 +26,12 @@
 (defonce state  (ptk/store {:resolve ptk/resolve}))
 (defonce stream (ptk/input-stream state))
 
+(defn ^boolean is-logged?
+  [pdata]
+  (and (some? pdata)
+       (uuid? (:id pdata))
+       (not= uuid/zero (:id pdata))))
+
 (when *assert*
   (defonce debug-subscription
     (->> stream

frontend/src/app/main/ui.cljs

@@ -28,7 +28,7 @@
    [app.main.ui.messages :as msgs]
    [app.main.ui.render :as render]
    [app.main.ui.settings :as settings]
-   [app.main.ui.static :refer [not-found-page not-authorized-page]]
+   [app.main.ui.static :as static]
    [app.main.ui.viewer :refer [viewer-page]]
    [app.main.ui.handoff :refer [handoff]]
    [app.main.ui.workspace :as workspace]
@@ -37,6 +37,7 @@
    [app.util.router :as rt]
    [cuerdas.core :as str]
    [cljs.spec.alpha :as s]
+   [cljs.pprint :refer [pprint]]
    [expound.alpha :as expound]
    [potok.core :as ptk]
    [rumext.alpha :as mf]))
@@ -81,9 +82,6 @@
      :conform {:path-params ::viewer-path-params
                :query-params ::viewer-query-params}}]
 
-   ["/not-found" :not-found]
-   ["/not-authorized" :not-authorized]
-
    (when *assert*
      ["/debug/icons-preview" :debug-icons-preview])
 
@@ -100,19 +98,15 @@
 
    ["/workspace/:project-id/:file-id" :workspace]])
 
-(mf/defc app-error
+(mf/defc on-main-error
   [{:keys [error] :as props}]
   (let [data (ex-data error)]
-    (case (:type data)
-      :not-found [:& not-found-page {:error data}]
-      (do
-        (ptk/handle-error error)
-        [:span "Internal application errror"]))))
+    (ptk/handle-error error)
+    [:span "Internal application errror"]))
 
-(mf/defc app
-  {::mf/wrap [#(mf/catch % {:fallback app-error})]}
+(mf/defc main-page
+  {::mf/wrap [#(mf/catch % {:fallback on-main-error})]}
   [{:keys [route] :as props}]
-
   [:& (mf/provider ctx/current-route) {:value route}
    (case (get-in route [:data :name])
      (:auth-login
@@ -189,67 +183,71 @@
                                 :page-id page-id
                                 :layout-name (keyword layout-name)
                                 :key file-id}])
-
-     :not-authorized
-     [:& not-authorized-page]
-
-     :not-found
-     [:& not-found-page]
-
      nil)])
 
-(mf/defc app-wrapper
+(mf/defc app
   []
-  (let [route (mf/deref refs/route)]
-    [:*
-     [:& msgs/notifications]
-     (when route
-       [:& app {:route route}])]))
+  (let [route (mf/deref refs/route)
+        edata (mf/deref refs/exception)]
+    [:& (mf/provider ctx/current-route) {:value route}
+     (if edata
+       [:& static/exception-page {:data edata}]
+       [:*
+        [:& msgs/notifications]
+        (when route
+          [:& main-page {:route route}])])]))
 
 ;; --- Error Handling
 
+;; That are special case server-errors that should be treated
+;; differently.
+(derive :not-found ::exceptional-state)
+(derive :bad-gateway ::exceptional-state)
+(derive :service-unavailable ::exceptional-state)
+
+(defmethod ptk/handle-error ::exceptional-state
+  [{:keys [status] :as error}]
+  (ts/schedule
+   (st/emitf (dm/assign-exception error))))
+
+;; We receive a explicit authentication error; this explicitly clears
+;; all profile data and redirect the user to the login page.
+(defmethod ptk/handle-error :authentication
+  [error]
+  (ts/schedule (st/emitf (logout))))
+
+;; Error that happens on an active bussines model validation does not
+;; passes an validation (example: profile can't leave a team). From
+;; the user perspective a error flash message should be visualized but
+;; user can continue operate on the application.
 (defmethod ptk/handle-error :validation
   [error]
   (ts/schedule
-   (st/emitf (dm/show {:content "Unexpected validation error (server side)."
-                       :type :error
-                       :timeout 5000})))
-  (when-let [explain (:hint-verbose error)]
-    (js/console.group "Server Error")
-    (js/console.error (if (map? error) (pr-str error) error))
-    (js/console.error explain)
-    (js/console.endGroup "Server Error")))
+   (st/emitf
+    (dm/show {:content "Unexpected validation error (server side)."
+              :type :error
+              :timeout 3000})))
 
-(defmethod ptk/handle-error :spec-validation
-  [error]
-  (ts/schedule
-   (st/emitf (dm/show {:content "Unexpected validation error (server side)."
-                       :type :error
-                       :timeout 5000})))
+  ;; Print to the console some debug info.
+  (js/console.group "Server Error")
+  (js/console.info
+   (with-out-str
+     (pprint (dissoc error :explain))))
   (when-let [explain (:explain error)]
-    (js/console.group "Server Error")
-    (js/console.error (if (map? error) (pr-str error) error))
-    (js/console.error explain)
-    (js/console.endGroup "Server Error")))
-
-
-(defmethod ptk/handle-error :authentication
-  [error]
-  (ts/schedule 0 #(st/emit! (logout))))
-
-(defmethod ptk/handle-error :authorization
-  [error]
-  (ts/schedule
-   (st/emitf (dm/show {:content "Not authorized to see this content."
-                       :timeout 2000
-                       :type :error}))))
+    (js/console.error explain))
+  (js/console.endGroup "Server Error"))
 
+;; This is a pure frontend error that can be caused by an active
+;; assertion (assertion that is preserved on production builds). From
+;; the user perspective this should be treated as internal error.
 (defmethod ptk/handle-error :assertion
   [{:keys [data stack message context] :as error}]
   (ts/schedule
-   (st/emitf (dm/show {:content "Internal assertion error."
+   (st/emitf (dm/show {:content "Internal error: assertion."
                        :type :error
-                       :timeout 2000})))
+                       :timeout 3000})))
+
+  ;; Print to the console some debugging info
   (js/console.group message)
   (js/console.info (str/format "ns: '%s'\nname: '%s'\nfile: '%s:%s'"
                                 (:ns context)
@@ -259,48 +257,49 @@
   (js/console.groupCollapsed "Stack Trace")
   (js/console.info stack)
   (js/console.groupEnd "Stack Trace")
-
   (js/console.error (with-out-str (expound/printer data)))
   (js/console.groupEnd message))
 
+;; This happens when the backed server fails to process the
+;; request. This can be caused by an internal assertion or any other
+;; uncontrolled error.
+(defmethod ptk/handle-error :server-error
+  [{:keys [data] :as error}]
+  (ts/schedule
+   (st/emitf (dm/show
+              {:content "Something wrong has happened (on backend)."
+               :type :error
+               :timeout 3000})))
+  (js/console.group "Internal Server Error:")
+  (js/console.error "hint:" (or (:hint data) (:message data)))
+  (js/console.info
+   (with-out-str
+     (pprint (dissoc data :explain))))
+  (when-let [explain (:explain data)]
+    (js/console.error explain))
+  (js/console.groupEnd "Internal Server Error:"))
+
 (defmethod ptk/handle-error :default
   [error]
   (if (instance? ExceptionInfo error)
     (ptk/handle-error (ex-data error))
     (do
-      (js/console.group "Generic Error")
+      (ts/schedule
+       (st/emitf (dm/show
+                  {:content "Something wrong has happened."
+                   :type :error
+                   :timeout 3000})))
+
+      (js/console.group "Internal error:")
       (js/console.log "hint:" (or (ex-message error)
                                   (:hint error)
                                   (:message error)))
       (ex/ignoring
        (js/console.error "repr: " (pr-str error))
+       (js/console.error "data: " (clj->js error))
        (js/console.error "stack:" (.-stack error)))
-      (js/console.groupEnd "Generic error")
-      (ts/schedule (st/emitf (dm/show
-                              {:content "Something wrong has happened."
-                               :type :error
-                               :timeout 3000}))))))
+      (js/console.groupEnd "Internal error:"))))
 
-(defmethod ptk/handle-error :server-error
-  [{:keys [status] :as error}]
-  (cond
-    (= status 429)
-    (ts/schedule
-     (st/emitf (dm/show {:content "Too many requests, wait a little bit and retry."
-                         :type :error
-                         :timeout 5000})))
-
-    :else
-    (ts/schedule
-     (st/emitf (dm/show {:content "Unable to connect to backend, wait a little bit and refresh."
-                         :type :error})))))
-
-
-(defmethod ptk/handle-error :not-found
-  [{:keys [status] :as error}]
-  (ts/schedule
-   (st/emitf (dm/show {:content "Resource not found."
-                       :type :warning}))))
 
 (defonce uncaught-error-handler
   (letfn [(on-error [event]

frontend/src/app/main/ui/static.cljs

@@ -11,27 +11,104 @@
   (:require
    [cljs.spec.alpha :as s]
    [rumext.alpha :as mf]
+   [app.main.ui.context :as ctx]
+   [app.main.data.auth :as da]
+   [app.main.data.messages :as dm]
+   [app.main.store :as st]
+   [app.main.refs :as refs]
+   [cuerdas.core :as str]
+   [app.util.i18n :refer [tr]]
+   [app.util.router :as rt]
    [app.main.ui.icons :as i]))
 
-(mf/defc not-found-page
-  [{:keys [error] :as props}]
-  [:section.not-found-layout
-   [:div.not-found-header i/logo]
-   [:div.not-found-content
-    [:div.message-container
-     [:div.error-img i/icon-empty]
-     [:div.main-message "404"]
-     [:div.desc-message "Oops! Page not found"]
-     [:a.btn-primary.btn-small "Go back"]]]])
+(defn- go-to-dashboard
+  [profile]
+  (let [team-id (:default-team-id profile)]
+    (st/emit! (rt/nav :dashboard-projects {:team-id team-id}))))
 
-(mf/defc not-authorized-page
+(mf/defc not-found
   [{:keys [error] :as props}]
-  [:section.not-found-layout
-   [:div.not-found-header i/logo]
-   [:div.not-found-content
-    [:div.message-container
-     [:div.error-img i/icon-lock]
-     [:div.main-message "403"]
-     [:div.desc-message "Sorry, you are not authorized to access this page."]
-     #_[:a.btn-primary.btn-small "Go back"]]]])
+  (let [profile (mf/deref refs/profile)]
+    [:section.exception-layout
+     [:div.exception-header
+      {:on-click (partial go-to-dashboard profile)}
+      i/logo]
+     [:div.exception-content
+      [:div.container
+       [:div.image i/icon-empty]
+       [:div.main-message (tr "labels.not-found.main-message")]
+       [:div.desc-message (tr "labels.not-found.desc-message")]
+       [:div.sign-info
+        [:span (tr "labels.not-found.auth-info") " " [:b (:email profile)]]
+        [:a.btn-primary.btn-small
+         {:on-click (st/emitf (da/logout))}
+         (tr "labels.sign-out")]]]]]))
+
+(mf/defc bad-gateway
+  [{:keys [error] :as props}]
+  (let [profile (mf/deref refs/profile)]
+    [:section.exception-layout
+     [:div.exception-header
+      {:on-click (partial go-to-dashboard profile)}
+      i/logo]
+     [:div.exception-content
+      [:div.container
+       [:div.image i/icon-empty]
+       [:div.main-message (tr "labels.bad-gateway.main-message")]
+       [:div.desc-message (tr "labels.bad-gateway.desc-message")]
+       [:div.sign-info
+        [:a.btn-primary.btn-small
+         {:on-click (st/emitf #(dissoc % :exception))}
+         (tr "labels.retry")]]]]]))
+
+(mf/defc service-unavailable
+  [{:keys [error] :as props}]
+  (let [profile (mf/deref refs/profile)]
+    [:section.exception-layout
+     [:div.exception-header
+      {:on-click (partial go-to-dashboard profile)}
+      i/logo]
+     [:div.exception-content
+      [:div.container
+       [:div.image i/icon-empty]
+       [:div.main-message (tr "labels.service-unavailable.main-message")]
+       [:div.desc-message (tr "labels.service-unavailable.desc-message")]
+       [:div.sign-info
+        [:a.btn-primary.btn-small
+         {:on-click (st/emitf #(dissoc % :exception))}
+         (tr "labels.retry")]]]]]))
+
+(mf/defc internal-error
+  [props]
+  (let [profile (mf/deref refs/profile)]
+    [:section.exception-layout
+     [:div.exception-header
+      {:on-click (partial go-to-dashboard profile)}
+      i/logo]
+     [:div.exception-content
+      [:div.container
+       [:div.image i/icon-empty]
+       [:div.main-message "Internal Error"]
+       [:div.desc-message "Something bad happended on backend servers. Please retry the operation and if the problem persists, contact with support."]
+       [:div.sign-info
+        [:a.btn-primary.btn-small
+         {:on-click (st/emitf (dm/assign-exception nil))}
+         (tr "labels.retry")]]]]]))
+
+(mf/defc exception-page
+  [{:keys [data] :as props}]
+  (case (:type data)
+    :not-found
+    [:& not-found]
+
+    :bad-gateway
+    [:& bad-gateway]
+
+    :service-unavailable
+    [:& service-unavailable]
+
+    :server-error
+    [:& internal-error]
+
+    nil))
 

frontend/src/app/util/router.cljs

@@ -10,15 +10,15 @@
 (ns app.util.router
   (:refer-clojure :exclude [resolve])
   (:require
+   [app.common.data :as d]
+   [app.config :as cfg]
+   [app.util.browser-history :as bhistory]
+   [app.util.timers :as ts]
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [goog.events :as e]
    [potok.core :as ptk]
-   [reitit.core :as r]
-   [app.common.data :as d]
-   [app.config :as cfg]
-   [app.util.browser-history :as bhistory]
-   [app.util.timers :as ts])
+   [reitit.core :as r])
   (:import
    goog.Uri
    goog.Uri.QueryData))
@@ -92,6 +92,10 @@
 ;; --- Navigate (Event)
 
 (deftype Navigate [id params qparams replace]
+  ptk/UpdateEvent
+  (update [_ state]
+    (dissoc state :exception))
+
   ptk/EffectEvent
   (effect [_ state stream]
     (let [router  (:router state)