Ik had onlangs het genoegen om front-end foutrapportage in te stellen voor een webapplicatie op ona.io. Hier is hoe ik het deed:
Stap 1 :Installeer sentry browser SDK en voeg als volgt een foutgrenscomponent toe:
- Voorbeeld hieronder gebruikt opnieuw frame
(ns your.namespace
(:require ["@sentry/browser" :as Sentry]
["@sentry/tracing" :refer (Integrations)]))
(defn error-boundary
[comp]
(let [error (r/atom nil)]
(r/create-class
{:component-did-catch
(fn [_this e _info]
(let [{:keys [sentry-dsn app-version env]}
@(re-frame/subscribe [::your-configuration-sub])]
(.init Sentry
#js
{:environment env,
:dsn sentry-dsn,
:release app-version,
:integrations #js [(new (.-BrowserTracing Integrations))],
:tracesSampleRate 1.0})
(.captureException Sentry e))),
:get-derived-state-from-error (fn [e] (reset! error e) #js {}),
:reagent-render (fn [comp]
(if @error
[:div.fallback-error-ui
[:p.no-saved-charts-message.alert-danger
[:span.tooltip [:span.tip-info "Reload page"]
[:i.fa.fa-refresh
{:aria-hidden true,
:on-click (click-fn #(.reload (.-location
js/window)))}]]
"An error
Stap 2 :Bronkaarten!
2.1 waarom hebben we ze nodig?
Clojurescript is een compiler voor Clojure die zich richt op JavaScript.
ClojureScript compileert naar JS die vervolgens wordt verkleind en in/door de browser wordt geladen. bronkaarten houden de code aan de clientzijde leesbaar en, nog belangrijker, foutopsporing, zelfs nadat u deze hebt gecombineerd en verkleind, zonder de prestaties te beïnvloeden
2.2 hoe genereer je ze?
Dit hangt af van hoe u uw ClojureScript compileert. Als je shadow-cljs gebruikt, net als ik, is dit proces eenvoudig
Gebruik de volgende shadow-cljs configs (afgekapt):
...
:release
{:build-options
{:ns-aliases {day8.re-frame.tracing day8.re-frame.tracing-stubs}},
:compiler-options {:source-map true}},
...
2.3 waar heb je ze voor nodig?
Als u sentry gebruikt voor foutrapportage, biedt sentry functionaliteit die uw bronkaarten zal gebruiken om foutmeldingen duidelijker voor u te maken
Volg deze stappen om uw bronkaarten naar Sentry te uploaden:
Een wachtpost vrijgeven
voorbeeld bash commando
sentry-cli releases new <release-name>
Zorg ervoor dat sourceMappingURL correct is ingesteld
Uit mijn persoonlijke ervaring heb ik gemerkt dat, zelfs na het uploaden van bronkaarten naar Sentry, je foutmeldingen er soms niet goed uitzien. Het probleem kan het gevolg zijn van sourceMappingURL waarde in uw gegenereerde .js bestanden.
dus ik heb het opgelost met sed :-)
# ensure sourceMappingURL is set correctly
sed -i "s/sourceMappingURL=/sourceMappingURL=$1:\/\/$2\/js\/path\/to\/your\//g" -r resources/public/js/path/to/your/*.js
Duw tot slot je bronkaarten naar de schildwacht
sentry-cli --url https://sentry.io releases --org <org-name> --project <project-name> files <release-name> upload-sourcemaps resources/public/js/<path to your JS files>/ --url-prefix <protocol>://<your server domain>/js/<path to your JS files>/
Vrijgave voltooien
sentry-cli releases finalize <release name>
Resultaat
Zo ziet uw stacktracering eruit op schildwacht
