Graph-Tannenbaum
Veröffentlicht am von Maximilian Braun
Der Graphen-Tannenbaum - Eine etwas gruselige Weihnachtsgeschichte
Es begann mit einer scheinbar normalen Kundenanfrage: "Wir brauchen einen Endpunkt, dem wir Parameter mitgeben können und der uns ein Bild mit einem Graphen zurück liefert". Klingt eigentlich einfach oder?
Hinter dieser Anfrage versteckte sich allerdings das Gruselthema schlechthin: Serverseitige Bildgenerierung.
Server haben bekanntlich nur dieses schwarze Kästchen mit grünem Text (siehe Matrix Filmreihe) – nicht gerade prädestiniert für grafische Aufgaben.
Statt der einfachen Lösung jedes mal die Graphen von Hand zu zeichnen und einzuscannen, wollte ich es allerdings technisch doch etwas anspruchsvoller angehen.
Erste Station: Die Suche nach einem Open Source Package. Ich landete bei chartjs-to-image.
Anfangs lief alles perfekt. Zu perfekt. Bis ich kurz kein Internet hatte und siehe da: Keine Bilder mehr 🥲
Ein Blick in den Sourcecode und schnell war klar: Das Package ruft im Hintergrund nur die QuickChart-API auf. Das nix gut weil:
Rate Limiting (aka. fett blechen, wenn man mehr will)
QuickChart down = wir auch down :(
Doppelte Latenz (Kunde ↔︎ unser Server ↔︎ QuickChart)
Also Plan B: Selbst Bilder auf dem Server generieren.
Nach einigen Google-Recherchen, Haare-Raufen und Tränen 🥲 hatte ich einen Plan: ChartJS installieren und mit node-canvas die Canvas API polyfillen.
”Naja wird schon klappen” dachte ich, als ich den Command bun install canvas ausführte. Oh warte, habt ihr das gesehen 🤨? Genau, wir verwenden Bun - eine sehr schnelle JS-Runtime. Bun hat leider - dadurch dass es noch recht jung ist - die Angewohnheit ab und zu mal Kompatibilitätsprobleme zu haben.
Bei meinem Glück war es klar, dass genau node-canvas noch nicht mit Bun funktionierte. Zumindest node-canvas v2. Tja dann halt Beta Version installieren… Build Fehler -,-
Also ab auf die Suche nach dem richtigen GitHub Issue, dass dir sagt wie das ganze geht und welche System Packages du brauchst. Jetzt aber endlich die Finale funktionierende Version.
Node-Canvas installieren… Backend starten… Uuuuund… Joa nein.
Natürlich muss man, dass alles noch richtig in Einklang bringen, ChartJS die Canvas API zeigen, Einstellungen setzen, damit ChartJS nicht anfängt zu weinen, weil kein Browser in Sicht ist, Rundungen, Kurven, Daten, Rechnungen, Docker Image und noch vieles mehr.
Nach mehreren "finalen" Iterationen, inklusive eines lustigen Tannenbaum-Graphen, war es endlich geschafft: Wir bekamen die richtigen Bilder zurück! Noch schnell die API-Dokumentation mit Swagger erstellen, ein Beispielbild hinzufügen und endlich fertig 🥹.
Etz reichts mir dann aber auch erstmal für die nächsten Jahre mit Bildgenerierung 🥲
Immerhin hab ich jetzt schon einen Weihnachtsbaum für den 24.12 – wenn auch als Graph 😄
Wie sind eure Erfahrungen mit Bildgenerierung? Habt ihr auch schon so gelitten? Oder greift ihr doch zum Pinsel und malt die Graphen von Hand? 🎨 Lasst es mich gerne Wissen 😄
#Entwicklung #WebTechnologie #Weihnachten #Coding
Weitere Links: