Nedávno jsem měl to potěšení nastavit front-end hlášení chyb pro webovou aplikaci na ona.io. Udělal jsem to takto:
Krok 1 :Nainstalujte sadu SDK sentry browseru a přidejte komponentu hranice chyb následovně:
- V níže uvedeném příkladu je použití nového rámce
(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
Krok 2 :Zdrojové mapy!
2.1 Proč je potřebujeme?
Clojurescript je kompilátor pro Clojure, který cílí na JavaScript.
ClojureScript se zkompiluje do JS, který je poté minifikován a načten v prohlížeči. zdrojové mapy udržují kód na straně klienta čitelný a co je důležitější, laditelný i poté, co jej zkombinujete a minifikujete, aniž by to ovlivnilo výkon
2.2 Jak je generujete?
To závisí na tom, jak kompilujete svůj ClojureScript. Pokud používáte shadow-cljs, podobně jako já, je tento proces jednoduchý
Použijte následující konfigurace shadow-cljs (zkrácené):
...
:release
{:build-options
{:ns-aliases {day8.re-frame.tracing day8.re-frame.tracing-stubs}},
:compiler-options {:source-map true}},
...
2.3 k čemu je potřebujete?
Pokud pro hlášení chyb používáte hlídku, hlídka poskytuje funkce, které budou používat vaše zdrojové mapy k tomu, aby pro vás byly chybové zprávy jasnější
Chcete-li nahrát zdrojové mapy na hlídku, postupujte takto:
Vytvořte propuštění hlídky
příklad příkazu bash
sentry-cli releases new <release-name>
Ujistěte se, že sourceMappingURL je správně nastaveno
Ze své osobní zkušenosti jsem si všiml, že někdy i po nahrání zdrojových map na hlídku nemusí vaše chybové zprávy vypadat správně. Problém může být způsoben sourceMappingURL hodnotu ve vašem vygenerovaném .js soubory.
tak jsem to opravil pomocí 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
Nakonec pošlete své zdrojové mapy hlídce
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>/
Dokončete uvolnění
sentry-cli releases finalize <release name>
Výsledek
Zde je návod, jak může vaše trasování zásobníku vypadat na hlídce
