So fügst du Bug-Tracking zu deinen Apps hinzu (Kostenloses Open Source Tool) - Bugsink 🐞

Bugsink ist eine kostenlose und quelloffene Bug-Tracking-Lösung, mit der du alle Fehler, die in deinen Anwendungen auftreten, zentral sammeln kannst.

Ich habe einige Open-Source-Bugtracker ausprobiert, aber die meisten wirkten entweder sehr alt (https://www.bugzilla.org/) oder sehr schwergewichtig (https://sentry.io). Bugsink bietet einen guten Mittelweg – probiere es aus!

In diesem Tutorial richten wir eine eigene Bugsink-Instanz mit Sliplane ein.

Video-Tutorial

(Video-Tutorial-Link oder Einbettung hier, falls verfügbar)

Schritt 1: Datenbank aufsetzen

Detaillierte Installationsanweisungen findest du in den Docs. Wir wählen die Docker-Installation und nutzen eine MySQL-Datenbank als persistenten Speicher.

So startest du die Datenbank:

1. Gehe auf sliplane.io und melde dich mit deinem GitHub-Account an.
2. Klicke auf „Create Project“ und gib dem Projekt einen Namen, z.B. „Bugsink“.

3. Klicke auf das Projekt und dann auf „Deploy Service“.
4. Falls du noch keinen Server hast, klicke auf „Create Server“, wähle Standort und Server-Typ. Der Standard-Server reicht für MySQL und Bugsink aus und kann später skaliert werden. Gib dem Server einen Namen und klicke auf „Create Paid Server“.

5. Sobald der Server erstellt wurde und in der Liste erscheint, kannst du ihn auswählen.
6. Wähle „MySQL“ aus der Liste der vorgefertigten Images.
7. In den Deploy-Einstellungen kannst du optional „public“ deaktivieren, den Datenbanknamen auf „bugsink“ ändern und den Service „Bugsink MySQL“ nennen. Diese Einstellungen sind optional, aber empfohlen.

8. Klicke auf Deploy und warte, bis der grüne Punkt erscheint – dann ist die MySQL-Datenbank bereit.

Schritt 2: Bugsink deployen

Jetzt deployen wir Bugsink.

1. Im Bugsink-Projekt erneut auf „Deploy Service“ klicken.
2. Den Server auswählen, auf dem die Datenbank läuft.
3. „Deploy from Registry“ wählen.
4. Im Feld „Image URL“ nach „bugsink“ suchen und das offizielle Image sowie die gewünschte Version auswählen. Für Produktion empfiehlt sich eine feste Version.
5. Folgende Umgebungsvariablen hinzufügen (über „from .env file“):

SECRET_KEY=[ein 50 Zeichen langes Secret]
DATABASE_URL=mysql://[user]:[password]@[host]/[name]
CREATE_SUPERUSER=[admin username]:[admin password]
BEHIND_HTTPS_PROXY=true
BASE_URL=[deine sliplane.app URL]

Wichtig: Ersetze alle Platzhalter in eckigen Klammern mit echten Werten! Die Datenbank-Zugangsdaten findest du im MySQL-Service auf Sliplane. CREATE_SUPERUSER und SECRET_KEY sind frei wählbar, das Secret muss 50 Zeichen lang sein (Groß-/Kleinschreibung, Zahlen). Die BASE_URL findest du in den Einstellungen deiner Bugsink-App nach dem ersten Deploy – aktualisiere diesen Wert ggf. nachträglich.

6. Optional: Den Namen auf „Bugsink“ ändern und auf „Deploy“ klicken.

Nach kurzer Zeit sollte die App deployed sein und der grüne Punkt erscheinen.

Teste, ob alles funktioniert, indem du die „Public Domain“ deiner Bugsink-App aufrufst und dich mit den Superuser-Zugangsdaten anmeldest, die du beim Deploy gesetzt hast.

Hinweis: Nach dem ersten Anlegen kann der Superuser nicht mehr per Umgebungsvariable geändert werden!

Schritt 3: App mit dem Sentry SDK instrumentieren

Instrumentieren bedeutet, dass wir Codezeilen einfügen, die Fehler an unser Backend senden. Je nach Stack gibt es Tools, die das automatisch übernehmen, z.B. Sentry.

Sentry ist selbst ein Open-Source-Bugtracker, aber recht schwergewichtig. Wir können einfach das Client-SDK nutzen und die Daten an Bugsink senden.

Vorher müssen wir in Bugsink ein neues Team und ein neues Projekt anlegen:

1. Auf „Teams“ klicken, dann „New Team“. Name und Sichtbarkeit wählen, speichern.

2. Auf „Projects“ klicken, dann „New Project“. Formular ausfüllen und speichern.

Danach erscheinen Installationsanweisungen, um einen Sentry-Client mit Bugsink zu verbinden.

Hinweis: Falls in der DSN „localhost“ steht, muss die BASE_URL in den Umgebungsvariablen deiner Bugsink-App auf Sliplane angepasst werden.

Du findest außerdem einen Link zu https://docs.sentry.io/platforms/ mit Anleitungen für alle gängigen Frameworks. Wähle das passende SDK und folge der Anleitung.

Wichtig ist die Konfiguration:

1. Die DSN, die auf der Installationsseite von Bugsink angezeigt wird
2. Einstellungen für das Hochladen von Source Maps:

org: [dein Bugsink-Teamname],
project: [dein Bugsink-Projektname],
authToken: [Token aus Bugsink],
url: [die öffentliche Domain deiner Bugsink-Instanz auf Sliplane, inkl. https],

Tokens kannst du in Bugsink unter „Tokens“ generieren.

Optional kannst du in der Sentry-Konfiguration auch eine release-Version angeben. Mehr dazu in der offiziellen Doku.

Das war’s! Du kannst das Setup testen, indem du z.B. in JavaScript folgenden Fehler wirfst:

throw new Error('Test')

Der Fehler sollte in deiner Bugsink-Instanz auftauchen!

Wenn dir das Tutorial gefallen hat, freue ich mich über ein Like oder Kommentar. Bis zum nächsten Mal!

Lukas Mauser