mirror of
https://github.com/penpot/penpot.git
synced 2025-05-23 19:06:13 +02:00
🎉 Add sentry integration (frontend).
This commit is contained in:
Andrey Antukh
Andrés Moya
parent
4275298f19
commit
02025bc70a
8 changed files with 297 additions and 150 deletions
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
59
frontend/src/app/main/sentry.cljs
Normal file
59
frontend/src/app/main/sentry.cljs
Normal file
|
|
@ -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)
|
||||
|
||||
|
||||
|
||||
|
|
@ -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))))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
161
frontend/src/app/main/ui/errors.cljs
Normal file
161
frontend/src/app/main/ui/errors.cljs
Normal file
|
|
@ -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))))
|
||||
Loading…
Add table
Add a link
Reference in a new issue