𝗖𝗵𝗿𝗼𝗺𝗲 𝗳𝘂𝗻𝗸𝘁𝗶𝗼𝗻𝗶𝗲𝗿𝘁𝗲. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝘄𝗮𝗿 𝗹𝗲𝗲𝗿.
Ich habe einen seltsamen Bug entdeckt. Ich habe dieselbe Seite in zwei Browsern nebeneinander geöffnet.
In Chrome funktionierte alles. Ich sah Bilder, Buttons und Daten. In Firefox sah ich nichts. Ich sah leere Karten und eine Meldung: „0 Ergebnisse gefunden“.
Es war dieselbe URL. Es war derselbe Build. Es war dieselbe Maschine.
Die Ursache war ein Bug, der während der Entwicklung fast unmöglich zu finden ist. Der Browser blockierte meine eigenen API-Aufrufe. Ich habe nur in dem einen Browser entwickelt, der sie nicht blockierte.
Das Problem: Die Seite nutzt JavaScript, um Daten von einer Third-Party-Domain (Supabase) abzurufen. Firefox nutzt den Enhanced Tracking Protection. Viele Nutzer verwenden zudem Adblocker wie uBlock Origin. Diese Tools erkennen die Third-Party-Domain und blockieren die Anfrage, noch bevor sie den Computer verlässt.
Der Code stürzte nicht ab. Er zeigte keinen roten Fehler in der Konsole an. Der fetch lieferte einfach nichts zurück. Mein Code zeigte dann, wie angewiesen, einen Fallback-„Empty State“ an. Für einen flüchtigen Beobachter sah die Seite völlig normal aus. Sie sah einfach nur leer aus.
Dieser Bug war aus zwei Gründen unsichtbar:
- Ich habe in Chrome entwickelt, der den Aufruf zuließ.
- Meine Analytics nutzten dieselbe API-Domain. Nutzer, die den Inhalt nicht sehen konnten, konnten auch nicht in meinen Daten erfasst werden.
So habe ich es behoben:
Ich habe einen Reverse Proxy verwendet, um die Anfrage auf die vertrauenswürdige Seite zu verschieben.
Anstatt: mysite.com -> xxxx.supabase.co (Third-party / Blocked)
bin ich umgestiegen auf: mysite.com -> mysite.com/sb-api (First-party / Trusted)
Durch das Routing der API über meine eigene Domain denkt der Browser, dass die Anfrage Teil der Website selbst ist. Firefox sieht sie nicht mehr als Tracker.
Drei Dinge, die man beachten sollte, wenn man diese Methode verwendet:
- Überprüfe deine WebSockets. Einfache Rewrites könnten Echtzeit-Funktionen unterbrechen.
- Fixiere deinen Auth-Storage-Key. Eine Änderung der URL kann beeinflussen, wie der Browser Login-Sessions speichert.
- Halte Server-seitige Aufrufe direkt. Für Code, der nicht im Browser läuft, benötigst du keinen Proxy.
Die Lehre: Hör auf anzunehmen: „Wenn es in Chrome funktioniert, funktioniert es auch überall.“
Teste deine Seite in Firefox mit strengen Datenschutzeinstellungen und einem Adblocker. Das ist dein eigentlicher blinder Fleck.