From 02025bc70ad7ac5fcdcd45b6b7f3370cd7c8f275 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 20 Sep 2021 14:37:26 +0200 Subject: [PATCH] :tada: Add sentry integration (frontend). --- frontend/package.json | 2 + frontend/src/app/config.cljs | 1 + frontend/src/app/main.cljs | 2 + frontend/src/app/main/sentry.cljs | 59 +++++++ frontend/src/app/main/ui.cljs | 150 +--------------- .../src/app/main/ui/dashboard/sidebar.cljs | 4 +- frontend/src/app/main/ui/errors.cljs | 161 ++++++++++++++++++ frontend/yarn.lock | 68 ++++++++ 8 files changed, 297 insertions(+), 150 deletions(-) create mode 100644 frontend/src/app/main/sentry.cljs create mode 100644 frontend/src/app/main/ui/errors.cljs diff --git a/frontend/package.json b/frontend/package.json index 7325c35ba..f0a0f5008 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/config.cljs b/frontend/src/app/config.cljs index 7e72d8d39..109761883 100644 --- a/frontend/src/app/config.cljs +++ b/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))) diff --git a/frontend/src/app/main.cljs b/frontend/src/app/main.cljs index 9a6842730..386ac5948 100644 --- a/frontend/src/app/main.cljs +++ b/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) diff --git a/frontend/src/app/main/sentry.cljs b/frontend/src/app/main/sentry.cljs new file mode 100644 index 000000000..ad6a1895c --- /dev/null +++ b/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) + + + diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index bcec7a1b7..ca2c29e16 100644 --- a/frontend/src/app/main/ui.cljs +++ b/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)))) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 3f1e7cbd9..827f48265 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/errors.cljs b/frontend/src/app/main/ui/errors.cljs new file mode 100644 index 000000000..9210145fe --- /dev/null +++ b/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)))) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f52d634d1..ffe86a738 100644 --- a/frontend/yarn.lock +++ b/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"