Chrome funktionierte. Firefox versagte.
Ich sah dieselbe Seite in zwei Browsern nebeneinander.
In Chrome: Die Seite funktionierte perfekt. Sie enthielt Bilder, Buttons und eine vollständige Ergebnisliste.
In Firefox: Die Seite war leer. Sie zeigte Platzhalter-Karten ohne Bilder und eine Meldung, dass 0 Ergebnisse gefunden wurden.
Der Code war derselbe. Die URL war dieselbe. Der Server war in Ordnung.
Das Problem war der Browser.
Firefox verwendet den Enhanced Tracking Protection. Viele Nutzer verwenden zudem Tools wie uBlock Origin. Diese Tools blockieren Anfragen an Domains, die sie als Tracker einstufen.
Meine App hat Daten von einer Supabase-Domain abgerufen. Für Firefox sah diese Domain wie ein Drittanbieter-Tracker aus. Der Browser blockierte die Anfrage, noch bevor sie das Gerät verließ.
Da der Fetch fehlschlug, zeigte mein Code den Fallback-Zustand an. Er stürzte nicht ab. Er zeigte keinen Fehler in der Konsole an. Er zeigte einfach nur eine leere Seite.
Dies führte zu einem doppelten blinden Fleck:
- Mein Entwickler-Browser (Chrome) funktionierte perfekt. Ich habe den Bug nie gesehen.
- Meine Analytics verwendeten dieselbe Domain. Die Nutzer, die den Inhalt nicht sehen konnten, konnten auch nicht getrackt werden. Sie waren unsichtbar.
Ich habe das Problem gelöst, indem ich von einer Drittanbieter-Anfrage zu einer First-Party-Anfrage gewechselt bin.
Anstatt die Domain des Anbieters direkt aufzurufen, habe ich einen Reverse Proxy verwendet. Ich habe die API über meine eigene Domain geleitet.
Vorher: mysite.com ruft xxxx.supabase.co auf (Blockiert) Nachher: mysite.com ruft mysite.com/sb-api auf (Vertrauenswürdig)
Jetzt sieht der Browser eine Same-Origin-Anfrage. Er behandelt den Datenaufruf wie einen Teil der Website selbst.
Wenn Sie vor ähnlichen Problemen stehen, denken Sie an diese drei Dinge:
• Achten Sie auf Ihre WebSockets. Einfache Path Rewrites könnten Echtzeitverbindungen unterbrechen. • Fixieren Sie Ihre Auth-Storage-Keys. Eine Änderung der URL kann beeinflussen, wie der Browser Login-Sessions speichert. • Nutzen Sie Prerendering für Ihren Inhalt. Lassen Sie Ihre Seite nicht vollständig von JavaScript abhängen. Wenn ein Browser Ihr Skript blockiert, sollte der Nutzer den Kerninhalt immer noch im HTML sehen können.
Hören Sie auf anzunehmen, dass es für jeden funktioniert, nur weil es in Chrome funktioniert. Testen Sie mit aktivierten Privacy-Extensions.