Så åtgärdar du en vit sida i din webbapp

En vit tom sida betyder nästan alltid något av två: appens JavaScript kraschade innan något ritades, eller så laddades JavaScriptet aldrig. Öppna webbläsarens konsol (högerklicka → Inspektera → Konsol) och läs det första röda felet, och kontrollera sedan fliken Nätverk för filer som inte laddades. De flesta orsaker är en saknad miljövariabel, fel base path, ett bygge som inte blev klart, eller en krasch i en komponent.

Den här guiden gäller single-page-appar byggda med React, Vue eller liknande ramverk (inklusive appar skapade av AI-byggare), där vita sidor är vanligast.

Varför sidan är vit

En modern single-page-app (SPA) skickar till webbläsaren en nästan tom HTML-fil, ungefär så här:

<body>
  <div id="root"></div>
  <script type="module" src="/assets/index-a1b2c3.js"></script>
</body>

JavaScript bygger sedan hela sidan inuti den tomma div:en. Om skriptet inte laddas, eller kastar ett fel innan det renderar, förblir div:en tom och du ser vitt. Sidan är inte ”trasig” på ett synligt sätt; den har bara aldrig blivit ritad.

Därför börjar alltid lösningen i utvecklarverktygen, inte på sidan självt.

Steg 1: Läs konsolen

Öppna utvecklarverktygen: högerklicka på sidan och välj Inspektera, eller tryck F12 (Cmd+Option+I på Mac). Gå till fliken Konsol och ladda om sidan.

Titta på det första röda felet; senare är ofta bieffekter. Det det säger pekar på orsaken:

Kopiera hela feltexten, inklusive filnamn och radnummer. Om du använder en AI-byggare, klistra in den direkt i chatten.

Steg 2: Kontrollera att filerna laddades

Öppna fliken Nätverk, aktivera Inaktivera cache och ladda om. Titta på begärandena för .js- och .css-filer.

• Status 404 på en JavaScript-fil: sidan begär en fil som inte finns på servern.
• Status 200 men typen är text/html: servern returnerade en sida (ofta index.html själv, på grund av en SPA-fallback) i stället för skriptet. Samma grundorsak: filen finns inte där sidan förväntar sig den.

Vanliga orsaker:

Fel base path. Om appen serveras från en undermapp, som example.com/app/, men byggdes för att ladda filer från /assets/..., missar varje skriptbegäran. I Vite är detta alternativet base i vite.config; i Create React App är det fältet homepage; i Next.js är det basePath. Den måste stämma med var appen faktiskt serveras.

Gammal index.html. Byggverktyg ger filer namn med en innehållshash, som index-a1b2c3.js. Efter en ny deploy försvinner den gamla filen. Om en webbläsare eller ett CDN fortfarande har en gammal index.html i cache, begär den den gamla filen och får ingenting. En hård uppdatering (Cmd+Shift+R eller Ctrl+Shift+R) bekräftar detta. Den långsiktiga lösningen är att servera index.html med ett kort eller inget cache-header, medan hashade filer cachas länge.

Bygget blev inte klart eller deployades inte. Om bygget misslyckades kan hosten servera en gammal eller tom utdatamapp. Kontrollera byggloggen för fel.

Fel mapp publiceras. Hosten måste servera byggresultatet (oftast dist eller build), inte projektets källmapp. Om källan serveras får du en index.html som pekar på /src/main.tsx, vilket webbläsare inte kan köra.

Steg 3: Kontrollera miljövariabler

Frontend-appar läser ofta inställningar som en API-URL eller en publik nyckel vid byggtid. Om en variabel saknas på den live-publicerade versionen kastar kod som createClient(undefined, undefined) ett fel direkt, och sidan blir vit.

Det här bör du veta:

• I Vite är bara variabler med prefixet VITE_ tillgängliga i kod som körs i webbläsaren, och läses som import.meta.env.VITE_NAME. I Create React App är prefixet REACT_APP_; i Next.js är det NEXT_PUBLIC_.
• Dessa värden bakas in när appen byggs. Att lägga till en variabel efter bygget gör ingenting förrän du bygger om och deployar igen.
• Förhandsvisningen eller din lokala dator kan ha en .env-fil som produktionsbygget inte har. Sätt samma variabler på hosten.
• Allt med dessa prefix hamnar i publik JavaScript. Lägg bara publika värden där, aldrig hemliga nycklar.

Ett snabbt test: sök i konsolfelet efter undefined nära ett inställningsnamn, eller fråga:

Den publicerade appen visar en tom sida. Lista varje miljövariabel som frontend läser, kontrollera vilka som saknas eller är tomma i det live-publicerade bygget, och gör så att appen visar ett tydligt felmeddelande i stället för en tom sida när någon saknas.

Steg 4: Åtgärda kraschen

Om konsolen visar ett normalt JavaScript-fel kraschade koden under renderingen. Typiska orsaker i AI-byggda appar:

• Data har inte laddats än. En komponent läser user.name innan user har kommit. Lösningen är ett laddningstillstånd eller optional chaining (user?.name).
• Tom data. Ett nytt konto har inga poster, och koden antar att listan har minst ett objekt.
• Oväntad datastruktur. Ett API returnerade ett felobjekt i stället för listan koden förväntade sig.
• En saknad import efter att en fil döpts om eller flyttats.
• Att använda en webbläsarspecifik API vid server-side-rendering, till exempel window eller localStorage i en Next.js-serverkomponent.

Ge AI:n hela felet, sidan och vem du var inloggad som:

Dashboard-sidan är tom för nya användare. Konsol: TypeError: Cannot read properties of undefined (reading 'map') vid ProjectList.tsx:18. Den fungerar för mitt konto, som har projekt. Åtgärda så att ett tomt konto visar ”Inga projekt än”, och kontrollera ett nytt konto i förhandsvisningen.

Steg 5: Lägg till en error boundary

I React kan en komponent som kraschar avmontera hela appen, vilket är varför en liten bugg ger en helt tom sida. En error boundary är en komponent som fångar renderingsfel under sig och visar ett reservinnehåll i stället.

Lägg till en error boundary runt de viktigaste rutterna som visar ”Något gick fel” med en Ladda om-knapp, och loggar felet i konsolen. Behåll sidhuvudet och navigeringen utanför den så att de fortfarande renderas.

Den rättar inte buggen, men besökare ser ett meddelande i stället för en tom skärm, och du ser var det gick sönder.

Steg 6: Inga fel, men ändå tomt

Om konsolen är ren och skripten laddas:

• Kontrollera fliken Element. Finns något innehåll i <div id="root">? Om ja renderas det men är osynligt: vit text på vit bakgrund, opacity: 0, display: none, eller ett helskärmselement som täcker det.
• Kontrollera routern. Om ingen rutt matchar den aktuella URL:en och det inte finns någon ”hittades inte”-rutt, renderar vissa routrar ingenting. Lägg till en catch-all-rutt som visar en 404-sida.
• Kontrollera monteringspunkten. Koden måste montera i ett element som finns. Om index.html har id="app" och koden letar efter root visas inget (och React loggar oftast ett fel).
• Kontrollera ett webbläsartillägg. Prova ett privat fönster. Annonsblockerare blockerar ibland skript med namn som analytics eller ads.

Tom bara efter uppdatering av en sida?

Om startsidan fungerar men en uppdatering av /dashboard ger en tom sida eller 404, vet inte servern att den ska skicka index.html för appens rutter. Det är ett fel i routingens fallback, som täcks i så åtgärdar du 404-fel efter deploy.

Vanliga misstag

• Att läsa det sista felet i stället för det första. Den första röda raden är oftast orsaken.
• Att sätta miljövariabler utan att bygga om. Variabler i frontend fixeras vid byggtid.
• Att bara testa med det egna kontot. Krascher för tomma konton är en av de vanligaste orsakerna till vita sidor.
• Att anta att deployen lyckades. Kontrollera byggloggen innan du felsöker koden.
• Att skylla allt på webbläsarens cache. En hård uppdatering utesluter det på några sekunder; om sidan fortfarande är tom är det något annat.

Vita sidor i Mythex

Om förhandsvisningen är tom, kontrollera först att appen körs (öppna Code → terminal), be sedan Mythex starta rätt server, klicka på Refresh i förhandsvisningens verktygsrad, eller använd /fix. För en tom publicerad URL föreslår dokumentationen att du väntar en minut och gör en hård uppdatering, bekräftar att miljövariabler och databasen var satta innan du publicerade, och kontrollerar din hostingkvot. Kom ihåg att en publicerad app är en ögonblicksbild: efter en åtgärd måste du publicera igen. Om en ändring orsakade problemet, använd Revert to this point på det senaste fungerande svaret för att återställa projektet. Se Felsökning och Felsökning av publicering i dokumentationen, och vår allmänna guide om felsökning av en AI-byggd app.

Checklista för vit sida

• Läst det första röda felet i konsolen
• Kontrollerat fliken Nätverk för .js/.css-filer som ger 404 eller returnerar HTML
• Base path stämmer med där appen serveras
• Bygget blev klart, och byggresultatets mapp är den som publiceras
• Alla frontend-miljövariabler satta på det live-publicerade bygget, och sedan ombyggt
• Krascher åtgärdade, även för tomma och nya konton
• Error boundary på plats så att framtida krascher visar ett meddelande
• Catch-all-rutt för okända URL:er
• Testat efter en hård uppdatering och i ett privat fönster

Frågor