Sentry is een foutopsporingsplatform waarmee u problemen in uw productie kunt controleren implementaties. Het ondersteunt de meeste populaire programmeertalen en frameworks.
GitLab is een Git-gebaseerd DevOps-platform om de volledige levenscyclus van softwareontwikkeling te beheren. GitLab kan worden geïntegreerd met Sentry om vastgelegde fouten weer te geven. In dit artikel gebruiken we de twee services om problemen in een React-toepassing voor te blijven.
Installatie starten
GitLab en Sentry hebben beide self-hosted en SaaS-opties. De stappen in deze handleiding zijn van toepassing op beide varianten. We gaan ervan uit dat je al een React-project klaar hebt staan voor gebruik in je GitLab-instantie.
Log in op Sentry en klik op de knop “Create Project” knop in de rechterbovenhoek. Klik op “Reageren” onder de “Kies een platform” rubriek. Hierdoor kan Sentry voorbeeldcodefragmenten aanpassen aan uw project.
Kies wanneer u waarschuwingen wilt ontvangen met behulp van de opties onder “Stel uw standaard waarschuwingsinstellingen in.” Selecteer “Waarschuw mij bij elk nieuw probleem” om een e-mail te ontvangen telkens wanneer een fout wordt geregistreerd. De “Als er meer zijn dan” optie filtert ruis uit die wordt veroorzaakt door dubbele gebeurtenissen in een bepaald tijdvenster.
Geef uw project een naam in de “Projectnaam” veld. Klik op “Project maken” om uw installatie te voltooien.
Schildwacht toevoegen aan uw codebase
Nu moet je Sentry integreren met je React-code. Voeg de Sentry-bibliotheek toe aan de afhankelijkheden van uw project met npm:
npm install @sentry/react
U moet Sentry zo snel mogelijk initialiseren in het JavaScript van uw app. Dit geeft Sentry inzicht in fouten die vroeg in de React-levenscyclus optreden. Voeg het bootstrap-script van Sentry toe vóór uw eerste ReactDOM.render()-aanroep. Dit staat meestal in index.js:
app importeren van "./App.js"; import Reageren van "reageren"; importeer ReactDOM van "react-dom"; import * als Sentry van "@sentry/react"; Sentry.init({ dsn: "mijn-dsn" }); ReactDOM.render(<App />, document.getElementById("react"));
Vervang mijn-dsn door de DSN die Sentry weergeeft op het scherm voor het maken van uw project. De DSN identificeert uw project op unieke wijze, zodat de service gebeurtenissen correct kan toeschrijven.
Fouten vastleggen
Sentry zal automatisch onverwerkte JavaScript-fouten vastleggen en rapporteren. Hoewel het de crash niet kan voorkomen, laat het je weten dat er iets mis is gegaan voordat het gebruikersrapport arriveert.
Hier is een voorbeeld van App.js:
importeren Reageren vanuit "reageren"; standaard exporteren () => { const-gegevens = null; retourneer data.map((val, key) => { <h1 key={key}>{val}</h1>; }); };Deze code is verbroken & #8212;data is ingesteld op null, dus de kaarteigenschap is niet gedefinieerd. We proberen toch data.map() aan te roepen, zodat de app crasht. Je zou een probleem moeten zien verschijnen in Sentry.
Sentry-problemen bevatten zoveel mogelijk gegevens over de fout. U kunt de pagina-URL zien, evenals informatie over het apparaat van de gebruiker. Sentry combineert automatisch dubbele problemen met elkaar. Dit helpt u te zien of een gebeurtenis een eenmalig of een regelmatig voorval was dat meerdere gebruikers treft.
Sentry haalt automatisch JavaScript-bronkaarten op wanneer ze beschikbaar zijn. Als je create-react-app gebruikt, worden bronkaarten automatisch gegenereerd door npm run build. Zorg ervoor dat u ze naar uw webserver kopieert, zodat Sentry ze kan vinden. Je zult mooie stapelsporen zien van de originele broncode in plaats van de versluierde stapel die wordt geproduceerd door de verkleinde build-uitvoer.
U kunt Sentry-fouten markeren als Opgelost of Genegeerd zodra ze zijn afgehandeld . U vindt deze knoppen onder de titel van het nummer en op de overzichtspagina Problemen. Gebruik Opgelost zodra u zeker weet dat een probleem is opgelost. Genegeerd is voor gevallen waarin u niet van plan bent de hoofdoorzaak aan te pakken. Op React-sites kan dit het geval zijn voor fouten die worden veroorzaakt door oude browserversies.
Foutgrenzen
React-foutgrenzen stellen je in staat om een fallback-UI weer te geven wanneer er een fout optreedt in een component. Sentry biedt zijn eigen foutbegrenzingswrapper. Dit genereert een fallback-gebruikersinterface en logt de gedetecteerde fout in Sentry.
import * als Sentry van "sentry"; standaard exporteren () => { const-gegevens = null; retour ( <Sentry.ErrorBoundary fallback={<h1>Er is iets misgegaan.</h1>}> { data.map((val, sleutel) => { <h1 key={key}>{val}</h1>; }); } </Sentry.ErrorBoundary> ); };
U kunt nu een waarschuwing weergeven aan gebruikers wanneer er een fout optreedt. U ontvangt nog steeds het foutenrapport in uw Sentry-project.
GitLab-integratie toevoegen
De integratie van GitLab en Sentry heeft twee kanten. Ten eerste hebben GitLab-projecten een “Error Tracking” functie die uw Sentry-foutlijst weergeeft. U kunt vanuit GitLab fouten markeren als Opgelost of Genegeerd. Het tweede deel omvat het verbinden van Sentry met GitLab. Hierdoor kan Sentry automatisch GitLab-problemen maken wanneer een nieuwe fout wordt geregistreerd.
Laten we eerst eens kijken naar GitLab's Error Tracking-scherm. U moet een Sentry API-sleutel maken. Klik op uw gebruikersnaam in de linkerbovenhoek van uw Sentry-gebruikersinterface en vervolgens op de API-sleutels in het menu. Klik op 'Nieuwe token maken'. in de rechterbovenhoek.
Voeg de volgende tokenbereiken toe:
- alerts:read
- alerts:write
- event:admin
- event:read
- event:write
- project:read
Hierdoor kan GitLab lezen en update je Sentry-fouten.
Ga vervolgens naar je GitLab-project. Klik op Instellingen in het zijmenu en vervolgens op Bewerkingen. Vouw de “Error tracking” sectie. Plak uw Sentry-verificatietoken in de “Auth Token” veld en druk op “Verbinden.” Als u een zelf-gehoste Sentry-instantie gebruikt, moet u ook de “Sentry API URI” aanpassen. veld dat overeenkomt met de URI van uw server.
Het “project” vervolgkeuzelijst wordt gevuld met een lijst met uw Sentry-projecten. Selecteer het juiste project en druk op “Wijzigingen opslaan.” U bent nu klaar om Error Tracking in GitLab te gebruiken.
Klik op Bewerkingen > Foutopsporing in de linkerzijbalk. U ziet uw Sentry-foutlijst. Het wordt standaard gefilterd op Onopgeloste problemen. Dit kan worden gewijzigd met behulp van de vervolgkeuzelijsten in de rechterbovenhoek. Klik op een fout om de gedetailleerde stacktracering te zien zonder GitLab te verlaten. Er zijn knoppen om een GitLab-probleem te negeren, op te lossen en te converteren naar een GitLab-probleem. Zodra je een GitLab-probleem hebt geopend, kun je dat item toewijzen aan een teamlid zodat de bug wordt opgelost.
Nu kun je de tweede integratiecomponent, een link van Sentry terug naar GitLab, toevoegen. Klik op Instellingen in uw Sentry-zijbalk en vervolgens op Integraties. Zoek GitLab in de lijst en klik op de paarse "Add Installation" knop in de rechterbovenhoek. Klik op “Volgende” om de instellingsinformatie te zien.
Terug op GitLab, klik op uw gebruikerspictogram in de rechterbovenhoek, gevolgd door & #8220;Voorkeuren.” Klik op “Toepassingen” in het menu aan de linkerkant en voeg een nieuwe applicatie toe. Gebruik de details die door Sentry worden getoond in de pop-up met installatie-instellingen.
GitLab geeft een applicatie-ID en geheime sleutel weer. Keer terug naar de Sentry-pop-up en voer deze waarden in. Voeg uw GitLab-server-URL toe (gitlab.com voor GitLab SaaS) en voer het relatieve URL-pad naar uw GitLab-groep in (bijv. mijn-groep). De integratie werkt niet met persoonlijke projecten.
Klik op de paarse knop Verzenden om de integratie te maken. Sentry kan nu GitLab-informatie weergeven naast uw fouten. Dit omvat de commit die de fout heeft geïntroduceerd, en stacktraceringen die teruglinken naar GitLab-bestanden. Sentry-gebruikers met betaalde abonnementen kunnen GitLab- en Sentry-problemen met elkaar associëren.
Schildwacht in ontwikkeling uitschakelen
U zult niet per se Sentry wilt gebruiken wanneer u uw app lokaal in ontwikkeling uitvoert. Roep Sentry.init() niet aan als u wilt werken met Sentry uitgeschakeld. U kunt controleren op de aanwezigheid van een lokale omgevingsvariabele en Sentry uitschakelen als deze is ingesteld.
if (process.env.NODE_ENV === "productie") { Sentry.init({ dsn: "mijn-dsn" }); }
NODE_ENV wordt automatisch ingesteld door create-react-app. Productie bouwt de variabele hardcode naar productie. U kunt dit gebruiken om Sentry selectief in te schakelen.
Prestatieprofilering inschakelen
Sentry kan ook de browserprestaties van uw app profileren. Hoewel dit niet de belangrijkste focus van dit artikel is, kunt u tracering instellen met een paar extra regels in de initialisatie van uw Sentry-bibliotheek:
npm install @sentry/tracing import {Integraties} van "@sentry/tracing"; Sentry.init({ dsn: "my-dsn", integraties: "new Integrations.BrowserTracing""", tracesSampleRate: 1.0 "";
Nu kunt u prestatiegegevens in uw Sentry-project zien. Dit kan je helpen bij het identificeren van traag lopende code in productie.
Conclusie
Sentry laat je fouten vinden en oplossen voordat gebruikers ze melden. U kunt realtime waarschuwingen krijgen als er zich problemen voordoen in de productie. Stacktraces en browsergegevens worden inline weergegeven in elk nummer, zodat u direct een startpunt heeft voor een oplossing.
Het combineren van Sentry met GitLab zorgt voor een nog nauwere integratie met het softwareontwikkelingsproces. Als je GitLab al gebruikt voor projectbeheer, kun je door de Sentry-integratie toe te voegen waarschuwingen binnen GitLab beheren en GitLab-problemen maken voor nieuwe Sentry-fouten.