Vor kurzem hatte ich auf der Arbeit mit einem Javascript-Problem im Safari zu tun. Ein recht großer Kunde mit einer ordentlich frequentierten Seite meldete ein Problem. Das Problem betraf eine React-Komponente die auf der Seite eine recht zentrale Rolle spielt, die aber auch schon relativ lange im Einstatz ist. Also war da auch etwas Druck hinter, denn das das Problem betraf den Safari ab 16.4, sowohl auf Desktop aus auch Mobile. Da auf iOS jeder Browser die von Apple bereitgestellte Webkit-Engine verwendet, betraf es somit sogar ALLE iOS-Browser.
Da ich In React ich jetzt nicht so viel unterwegs bin, also hat das Debuggen so einige Zeit gedauert. Als „Aussenstehender“ ist mir das in React irgendwie doch alles zu viel Magic mit diesen States und Props die irgendwie irgendwohin gemappt werden.
Zuerst ein kurzer Blick in die JS-Console: Im Safari komplett zugeschissen mit Fehlern, in anderen Browsern nicht. Ein Wert ist null und deswegen konnten Übersetzungen nicht geholt werden. Das führte dann dazu, dass ein Fehler geworfen wurde und die komplette Komponente crashte dadurch. Das Resultat davon: Bis auf Header und Footer eine leere Seite.
Ich hangelte mich also einmal von vorne bis hinten durch die React-Komponente, verglich die Debug-Ausgaben mit denen in anderen Browsern wie Chrome oder Firefox.
Ich versuchte also nachzuvollziehen wo und warum der besagte Wert undefined war. Durch diese Mapping-Magie in React hat es etwas gedauert bis ich die richtige Stelle gefunden hatte.
Irgendwann war die Stelle gefunden:
Es gab eine Prüfung (in einem noch etwas größeren Konstrukt) die in etwa wie folgt aussah:
translationId = undefinded == elem.group ? key : null;Der Übeltäter hier ist das group! Darin schlummert nun nämlich eine Array-Funktion und somit wurde immer null zurückgegeben.
Nun konnte ich den Fehler also endlich fixen, den alten Code nach bester Clean Code Pfadfindermanier alles mal ein bisschen besser machen. Nur „group“ ist jetzt nicht unbedingt so die aussagekräftigste Bezeichnung.
Apple führt Array.prototype.group() ein, im Firefox als experimentelles Feature
Ab dem Safari 16.4 hat Apple dieses Feature im Safari aktiviert. Damit lasst sich ein Array anhand eines darin enthaltenen Wertes gruppieren. Das kann sicherlich das eine oder andere mal recht praktisch sein. Die Dokumentation dazu gibt es in den MDN Web Docs.
Im Firefox gibt es dieses Feature übrigens auch schon, allerdings noch als experimentelles Feature welches laut CanIUse mit javascript.options.experimental.array_grouping in about:config aktiviert werden kann.
