🎉 Add sentry integration (frontend).

frontend/package.json

@@ -36,6 +36,8 @@
     "shadow-cljs": "2.15.9"
   },
   "dependencies": {
+    "@sentry/browser": "^6.12.0",
+    "@sentry/tracing": "^6.12.0",
     "date-fns": "^2.22.1",
     "draft-js": "^0.11.7",
     "highlight.js": "^11.0.1",

frontend/src/app/config.cljs

@@ -77,6 +77,7 @@
 (def worker-uri           (obj/get global "penpotWorkerURI" "/js/worker.js"))
 (def translations         (obj/get global "penpotTranslations"))
 (def themes               (obj/get global "penpotThemes"))
+(def sentry-dsn           (obj/get global "penpotSentryDsn"))
 
 (def flags                (atom (parse-flags global)))
 (def version              (atom (parse-version global)))

frontend/src/app/main.cljs

@@ -12,6 +12,7 @@
    [app.main.data.events :as ev]
    [app.main.data.messages :as dm]
    [app.main.data.users :as du]
+   [app.main.sentry :as sentry]
    [app.main.store :as st]
    [app.main.ui :as ui]
    [app.main.ui.confirm]
@@ -103,6 +104,7 @@
 
 (defn ^:export init
   []
+  (sentry/init!)
   (i18n/init! cfg/translations)
   (theme/init! cfg/themes)
   (init-ui)

frontend/src/app/main/sentry.cljs

@@ -0,0 +1,59 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.sentry
+  "Sentry integration."
+  (:require
+   ["@sentry/browser" :as sentry]
+   [app.common.exceptions :as ex]
+   [app.common.uuid :as uuid]
+   [app.config :as cf]
+   [app.main.refs :as refs]))
+
+(defn- setup-profile!
+  [profile]
+  (if (or (= uuid/zero (:id profile))
+          (nil? profile))
+    (sentry/setUser nil)
+    (sentry/setUser #js {:id (str (:id profile))})))
+
+(defn init!
+  []
+  (setup-profile! @refs/profile)
+  (when cf/sentry-dsn
+    (sentry/init
+     #js {:dsn cf/sentry-dsn
+          :autoSessionTracking false
+          :attachStacktrace false
+          :release (str "frontend@" (:base @cf/version))
+          :maxBreadcrumbs 20
+          :beforeBreadcrumb (fn [breadcrumb _hint]
+                              (let [category (.-category ^js breadcrumb)]
+                                (if (= category "navigate")
+                                  breadcrumb
+                                  nil)))
+          :tracesSampleRate 1.0})
+
+    (add-watch refs/profile ::profile
+               (fn [_ _ _ profile]
+                 (setup-profile! profile)))
+
+    (add-watch refs/route ::route
+               (fn [_ _ _ route]
+                 (sentry/addBreadcrumb
+                  #js {:category "navigate",
+                       :message (str "path: " (:path route))
+                       :level (.-Info ^js sentry/Severity)})))))
+
+(defn capture-exception
+  [err]
+  (when (ex/ex-info? err)
+    (sentry/setContext "ex-data", (clj->js (ex-data err))))
+  (sentry/captureException err)
+  err)
+
+
+

frontend/src/app/main/ui.cljs

@@ -6,20 +6,16 @@
 
 (ns app.main.ui
   (:require
-   [app.common.exceptions :as ex]
    [app.common.spec :as us]
    [app.config :as cf]
-   [app.main.data.events :as ev]
-   [app.main.data.messages :as dm]
-   [app.main.data.users :as du]
    [app.main.refs :as refs]
-   [app.main.store :as st]
    [app.main.ui.auth :refer [auth]]
    [app.main.ui.auth.verify-token :refer [verify-token]]
    [app.main.ui.components.fullscreen :as fs]
    [app.main.ui.context :as ctx]
    [app.main.ui.cursors :as c]
    [app.main.ui.dashboard :refer [dashboard]]
+   [app.main.ui.errors]
    [app.main.ui.icons :as i]
    [app.main.ui.messages :as msgs]
    [app.main.ui.onboarding]
@@ -28,11 +24,7 @@
    [app.main.ui.static :as static]
    [app.main.ui.viewer :as viewer]
    [app.main.ui.workspace :as workspace]
-   [app.util.timers :as ts]
-   [cljs.pprint :refer [pprint]]
    [cljs.spec.alpha :as s]
-   [cuerdas.core :as str]
-   [expound.alpha :as expound]
    [potok.core :as ptk]
    [rumext.alpha :as mf]))
 
@@ -199,143 +191,3 @@
         [:& 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
-  [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
-  [_]
-  (ts/schedule (st/emitf (du/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."
-              :type :error
-              :timeout 3000})))
-
-  ;; Print to the console some debug info.
-  (js/console.group "Validation Error")
-  (ex/ignoring
-   (js/console.info
-    (with-out-str
-      (pprint (dissoc error :explain))))
-   (when-let [explain (:explain error)]
-     (js/console.error explain)))
-  (js/console.groupEnd "Validation Error"))
-
-;; Error on parsing an SVG
-(defmethod ptk/handle-error :svg-parser
-  [_]
-  (ts/schedule
-   (st/emitf
-    (dm/show {:content "SVG is invalid or malformed"
-              :type :error
-              :timeout 3000}))))
-
-;; 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 hint context] :as error}]
-  (let [message (or message hint)
-        context (str/fmt "ns: '%s'\nname: '%s'\nfile: '%s:%s'"
-                              (:ns context)
-                              (:name context)
-                              (str cf/public-uri "js/cljs-runtime/" (:file context))
-                              (:line context))]
-    (ts/schedule
-     (st/emitf
-      (dm/show {:content "Internal error: assertion."
-                :type :error
-                :timeout 3000})
-      (ptk/event ::ev/event
-                 {::ev/type "exception"
-                  ::ev/name "assertion-error"
-                  :message message
-                  :context context
-                  :trace stack})))
-
-    ;; Print to the console some debugging info
-    (js/console.group message)
-    (js/console.info context)
-    (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 hint] :as error}]
-  (let [hint (or hint (:hint data) (:message data))
-        info (with-out-str (pprint (dissoc data :explain)))
-        expl (:explain data)]
-    (ts/schedule
-     (st/emitf
-      (dm/show {:content "Something wrong has happened (on backend)."
-                :type :error
-                :timeout 3000})
-      (ptk/event ::ev/event
-                 {::ev/type "exception"
-                  ::ev/name "server-error"
-                  :hint hint
-                  :info info
-                  :explain expl})))
-
-    (js/console.group "Internal Server Error:")
-    (js/console.error "hint:" hint)
-    (js/console.info info)
-    (when expl (js/console.error expl))
-    (js/console.groupEnd "Internal Server Error:")))
-
-(defmethod ptk/handle-error :default
-  [error]
-  (if (instance? ExceptionInfo error)
-    (ptk/handle-error (ex-data error))
-    (let [stack (.-stack error)
-          hint  (or (ex-message error)
-                    (:hint error)
-                    (:message error))]
-      (ts/schedule
-       (st/emitf
-        (dm/assign-exception error)
-        (ptk/event ::ev/event
-                   {::ev/type "exception"
-                    ::ev/name "unexpected-error"
-                    :message hint
-                    :trace (.-stack error)})))
-
-      (js/console.group "Internal error:")
-      (js/console.log "hint:" hint)
-      (ex/ignoring
-       (js/console.error (clj->js error))
-       (js/console.error "stack:" stack))
-      (js/console.groupEnd "Internal error:"))))
-
-(defonce uncaught-error-handler
-  (letfn [(on-error [event]
-            (ptk/handle-error (unchecked-get event "error"))
-            (.preventDefault ^js event))]
-    (.addEventListener js/window "error" on-error)
-    (fn []
-      (.removeEventListener js/window "error" on-error))))

frontend/src/app/main/ui/dashboard/sidebar.cljs

@@ -10,6 +10,7 @@
    [app.common.spec :as us]
    [app.config :as cf]
    [app.main.data.dashboard :as dd]
+   [app.main.data.events :as ev]
    [app.main.data.messages :as dm]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
@@ -69,7 +70,8 @@
         (mf/use-callback
          (mf/deps item)
          (fn [name]
-           (st/emit! (dd/rename-project (assoc item :name name)))
+           (st/emit! (-> (dd/rename-project (assoc item :name name))
+                         (with-meta {::ev/origin "dashboard:sidebar"})))
            (swap! local assoc :edition? false)))
 
         on-drag-enter

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

@@ -0,0 +1,161 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.errors
+  "Error handling"
+  (:require
+   [app.common.exceptions :as ex]
+   [app.config :as cf]
+   [app.main.data.events :as ev]
+   [app.main.data.messages :as dm]
+   [app.main.data.users :as du]
+   [app.main.sentry :as sentry]
+   [app.main.store :as st]
+   [app.util.timers :as ts]
+   [cljs.pprint :refer [pprint]]
+   [cuerdas.core :as str]
+   [expound.alpha :as expound]
+   [potok.core :as ptk]))
+
+;; --- 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
+  [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
+  [_]
+  (ts/schedule (st/emitf (du/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."
+              :type :error
+              :timeout 3000})))
+
+  ;; Print to the console some debug info.
+  (js/console.group "Validation Error")
+  (ex/ignoring
+   (js/console.info
+    (with-out-str
+      (pprint (dissoc error :explain))))
+   (when-let [explain (:explain error)]
+     (js/console.error explain)))
+  (js/console.groupEnd "Validation Error"))
+
+;; Error on parsing an SVG
+(defmethod ptk/handle-error :svg-parser
+  [_]
+  (ts/schedule
+   (st/emitf
+    (dm/show {:content "SVG is invalid or malformed"
+              :type :error
+              :timeout 3000}))))
+
+;; 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 hint context] :as error}]
+  (let [message (or message hint)
+        context (str/fmt "ns: '%s'\nname: '%s'\nfile: '%s:%s'"
+                              (:ns context)
+                              (:name context)
+                              (str cf/public-uri "js/cljs-runtime/" (:file context))
+                              (:line context))]
+    (ts/schedule
+     (st/emitf
+      (dm/show {:content "Internal error: assertion."
+                :type :error
+                :timeout 3000})
+      (ptk/event ::ev/event
+                 {::ev/type "exception"
+                  ::ev/name "assertion-error"
+                  :message message
+                  :context context
+                  :trace stack})))
+
+    ;; Print to the console some debugging info
+    (js/console.group message)
+    (js/console.info context)
+    (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 hint] :as error}]
+  (let [hint (or hint (:hint data) (:message data))
+        info (with-out-str (pprint (dissoc data :explain)))
+        expl (:explain data)]
+    (ts/schedule
+     (st/emitf
+      (dm/show {:content "Something wrong has happened (on backend)."
+                :type :error
+                :timeout 3000})
+      (ptk/event ::ev/event
+                 {::ev/type "exception"
+                  ::ev/name "server-error"
+                  :hint hint
+                  :info info
+                  :explain expl})))
+
+    (js/console.group "Internal Server Error:")
+    (js/console.error "hint:" hint)
+    (js/console.info info)
+    (when expl (js/console.error expl))
+    (js/console.groupEnd "Internal Server Error:")))
+
+(defmethod ptk/handle-error :default
+  [error]
+  (if (instance? ExceptionInfo error)
+    (-> error sentry/capture-exception ex-data ptk/handle-error)
+    (let [stack (.-stack error)
+          hint  (or (ex-message error)
+                    (:hint error)
+                    (:message error))]
+      (ts/schedule
+       (st/emitf
+        (dm/assign-exception error)
+        (ptk/event ::ev/event
+                   {::ev/type "exception"
+                    ::ev/name "unexpected-error"
+                    :message hint
+                    :trace (.-stack error)})))
+
+      (js/console.group "Internal error:")
+      (js/console.log "hint:" hint)
+      (ex/ignoring
+       (js/console.error (clj->js error))
+       (js/console.error "stack:" stack))
+      (js/console.groupEnd "Internal error:"))))
+
+(defonce uncaught-error-handler
+  (letfn [(on-error [event]
+            (ptk/handle-error (unchecked-get event "error"))
+            (.preventDefault ^js event))]
+    (.addEventListener js/window "error" on-error)
+    (fn []
+      (.removeEventListener js/window "error" on-error))))

frontend/yarn.lock

@@ -45,6 +45,69 @@
     normalize-path "^2.0.1"
     through2 "^2.0.3"
 
+"@sentry/browser@^6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.12.0.tgz#970cd68fa117a1e1336fdb373e3b1fa76cd63e2d"
+  integrity sha512-wsJi1NLOmfwtPNYxEC50dpDcVY7sdYckzwfqz1/zHrede1mtxpqSw+7iP4bHADOJXuF+ObYYTHND0v38GSXznQ==
+  dependencies:
+    "@sentry/core" "6.12.0"
+    "@sentry/types" "6.12.0"
+    "@sentry/utils" "6.12.0"
+    tslib "^1.9.3"
+
+"@sentry/core@6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.12.0.tgz#bc7c5f0785b6a392d9ad47bd9b1fae3f5389996c"
+  integrity sha512-mU/zdjlzFHzdXDZCPZm8OeCw7c9xsbL49Mq0TrY0KJjLt4CJBkiq5SDTGfRsenBLgTedYhe5Z/J8Z+xVVq+MfQ==
+  dependencies:
+    "@sentry/hub" "6.12.0"
+    "@sentry/minimal" "6.12.0"
+    "@sentry/types" "6.12.0"
+    "@sentry/utils" "6.12.0"
+    tslib "^1.9.3"
+
+"@sentry/hub@6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.12.0.tgz#29e323ab6a95e178fb14fffb684aa0e09707197f"
+  integrity sha512-yR/UQVU+ukr42bSYpeqvb989SowIXlKBanU0cqLFDmv5LPCnaQB8PGeXwJAwWhQgx44PARhmB82S6Xor8gYNxg==
+  dependencies:
+    "@sentry/types" "6.12.0"
+    "@sentry/utils" "6.12.0"
+    tslib "^1.9.3"
+
+"@sentry/minimal@6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.12.0.tgz#cbe20e95056cedb9709d7d5b2119ef95206a9f8c"
+  integrity sha512-r3C54Q1KN+xIqUvcgX9DlcoWE7ezWvFk2pSu1Ojx9De81hVqR9u5T3sdSAP2Xma+um0zr6coOtDJG4WtYlOtsw==
+  dependencies:
+    "@sentry/hub" "6.12.0"
+    "@sentry/types" "6.12.0"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.12.0.tgz#a05c8985ee7fed7310b029b147d8f9f14f2a2e67"
+  integrity sha512-u10QHNknPBzbWSUUNMkvuH53sQd5NaBo6YdNPj4p5b7sE7445Sh0PwBpRbY3ZiUUiwyxV59fx9UQ4yVnPGxZQA==
+  dependencies:
+    "@sentry/hub" "6.12.0"
+    "@sentry/minimal" "6.12.0"
+    "@sentry/types" "6.12.0"
+    "@sentry/utils" "6.12.0"
+    tslib "^1.9.3"
+
+"@sentry/types@6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.12.0.tgz#b7395688a79403c6df8d8bb8d81deb8222519853"
+  integrity sha512-urtgLzE4EDMAYQHYdkgC0Ei9QvLajodK1ntg71bGn0Pm84QUpaqpPDfHRU+i6jLeteyC7kWwa5O5W1m/jrjGXA==
+
+"@sentry/utils@6.12.0":
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.12.0.tgz#3de261e8d11bdfdc7add64a3065d43517802e975"
+  integrity sha512-oRHQ7TH5TSsJqoP9Gqq25Jvn9LKexXfAh/OoKwjMhYCGKGhqpDNUIZVgl9DWsGw5A5N5xnQyLOxDfyRV5RshdA==
+  dependencies:
+    "@sentry/types" "6.12.0"
+    tslib "^1.9.3"
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
@@ -4803,6 +4866,11 @@ triple-beam@^1.2.0, triple-beam@^1.3.0:
   resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
   integrity sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==
 
+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"