Sådan retter du en blank hvid side i din webapp

En blank hvid side betyder næsten altid én af to ting: app'ens JavaScript crashede, før den tegnede noget, eller JavaScript'en slet ikke blev indlæst. Åbn browserens konsol (højreklik → Inspicér → Console), læs den første røde fejl, og tjek derefter fanen Network for filer, der ikke blev indlæst. De fleste årsager er en manglende miljøvariabel, en forkert base-sti, en build, der ikke blev færdig, eller et crash i én komponent.

Denne guide dækker single-page apps bygget med React, Vue eller lignende frameworks (inklusive apps lavet af AI-builders), og det er her, blanke sider hyppigst opstår.

Hvorfor siden er hvid

En moderne single-page app (SPA) sender browseren en næsten tom HTML-fil, cirka sådan her:

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

JavaScript bygger derefter hele siden inde i den tomme div. Hvis scriptet ikke indlæses, eller hvis det kaster en fejl, før det renderer, forbliver div'en tom, og du ser hvidt. Siden er ikke "ødelagt" på en synlig måde; den bliver bare aldrig tegnet.

Derfor begynder rettelsen altid i udviklerværktøjerne, ikke på selve siden.

Trin 1: Læs konsollen

Åbn udviklerværktøjerne: højreklik på siden og vælg Inspicér, eller tryk F12 (Cmd+Option+I på en Mac). Gå til fanen Console, og genindlæs siden.

Kig på den første røde fejl; senere fejl er ofte bivirkninger. Det den siger, peger på årsagen:

Kopiér hele fejlteksten, inklusive filnavn og linjenummer. Hvis du bruger en AI-builder, så indsæt den direkte i chatten.

Trin 2: Tjek at filerne blev indlæst

Åbn fanen Network, sæt flueben i Disable cache, og genindlæs. Kig på forespørgslerne til .js- og .css-filer.

• Status 404 på en JavaScript-fil: siden beder om en fil, der ikke findes på serveren.
• Status 200, men typen er text/html: serveren returnerede en side (ofte index.html selv, på grund af en SPA-fallback) i stedet for scriptet. Samme grundårsag: filen er ikke, hvor siden forventer den.

Almindelige årsager:

Forkert base-sti. Hvis appen serveres fra en undermappe, som example.com/app/, men er bygget til at hente filer fra /assets/..., misser alle script-forespørgsler. I Vite er det base-indstillingen i vite.config; i Create React App er det feltet homepage; i Next.js er det basePath. Den skal matche, hvor appen faktisk serveres.

Forældet index.html. Hvis browseren har cachet index.html, beder den om den gamle fil og får intet. Et hårdt genindlæs (Cmd+Shift+R eller Ctrl+Shift+R) bekræfter det. Den langsigtede løsning er at servere index.html med en kort eller ingen cache-header, mens hashede filer cachet i lang tid.

Build'et blev ikke færdigt eller blev ikke deployet. Hvis build'et fejlede, serverer hosten måske en gammel eller tom outputmappe. Tjek build-loggen for fejl.

Den forkerte mappe er publiceret. Hosten skal servere build-outputtet (normalt dist eller build), ikke projektets kildemappe. Hvis du serverer kildekoden, får du en index.html, der peger på /src/main.tsx, som browsere ikke kan køre.

Trin 3: Tjek miljøvariabler

Frontend-apps læser ofte indstillinger som en API-URL eller en offentlig nøgle på build-tidspunktet. Hvis en variabel mangler på den live build, kaster kode som createClient(undefined, undefined) en fejl med det samme, og siden bliver hvid.

Ting at vide:

• I Vite er kun variabler med præfikset VITE_ tilgængelige i browser-kode, læst som import.meta.env.VITE_NAME. I Create React App er det REACT_APP_; i Next.js er det NEXT_PUBLIC_.
• Disse værdier indbygges, når appen bygges. At tilføje en variabel efter build'et gør ingenting, før du bygger og deployer igen.
• Preview'et eller din lokale maskine har muligvis en .env-fil, som produktions-build'et ikke har. Sæt de samme variabler på hosten.
• Alt med disse præfikser ender i offentlig JavaScript. Læg kun offentlige værdier der, aldrig hemmelige nøgler.

En hurtig test: søg i konsolfejlen efter undefined i nærheden af et indstillingsnavn, eller spørg:

Den publicerede app viser en blank side. List alle miljøvariabler frontend'en læser, tjek hvilke der mangler eller er tomme i den live build, og få appen til at vise en tydelig fejlbesked i stedet for en blank side, når en mangler.

Trin 4: Ret crashet

Hvis konsollen viser en normal JavaScript-fejl, crashede koden under rendering. Typiske årsager i AI-byggede apps:

• Data ikke indlæst endnu. En komponent læser user.name, før user er ankommet. Rettelsen er en indlæsningstilstand eller optional chaining (user?.name).
• Tomme data. En ny konto har ingen poster, og koden antager, at listen har mindst ét element.
• Uventet datastruktur. Et API returnerede et fejlobjekt i stedet for den liste, koden forventede.
• En manglende import efter at en fil blev omdøbt eller flyttet.
• Brug af browser-only API under server-side rendering, såsom window eller localStorage i en Next.js-serverkomponent.

Giv AI'en den fulde fejl, siden og hvem du var logget ind som:

Dashboard-siden er blank for nye brugere. Konsol: TypeError: Cannot read properties of undefined (reading 'map') ved ProjectList.tsx:18. Det virker for min konto, som har projekter. Ret det, så en tom konto viser "Ingen projekter endnu", og tjek en ny konto i preview.

Trin 5: Tilføj en error boundary

I React kan én crashende komponent afmontere hele appen, og det er derfor en lille fejl giver en helt blank side. En error boundary er en komponent, der fanger renderingsfejl under sig og viser en reservebesked i stedet.

Tilføj en error boundary omkring de vigtigste ruter, der viser "Noget gik galt" med en Genindlæs-knap, og logger fejlen i konsollen. Behold headeren og navigationen uden for den, så de stadig bliver tegnet.

Den retter ikke fejlen, men besøgende ser en besked i stedet for en blank skærm, og du kan se, hvor det gik i stykker.

Trin 6: Ingen fejl, men stadig blank

Hvis konsollen er ren, og scripts indlæses:

• Tjek fanen Elements. Er der indhold inde i <div id="root">? Hvis ja, renderer det, men er usynligt: hvid tekst på hvid baggrund, opacity: 0, display: none, eller et fuldskærmselement, der dækker det.
• Tjek routeren. Hvis ingen rute matcher den aktuelle URL, og der ikke findes en "ikke fundet"-rute, renderer nogle routere ingenting. Tilføj en catch-all-rute, der viser en 404-side.
• Tjek mount-punktet. Koden skal montere i et element, der findes. Hvis index.html har id="app", og koden leder efter root, vises intet (og React logger normalt en fejl).
• Tjek en browserudvidelse. Prøv et privat vindue. Annonceblokkere blokerer lejlighedsvis scripts med navne som analytics eller ads.

Blank først efter at have opdateret en side?

Hvis forsiden virker, men opdatering af /dashboard viser en blank side eller en 404, ved serveren ikke, at den skal sende index.html for app-ruter. Det er et problem med fallback i routingen, dækket i sådan retter du 404-fejl efter deployment.

Almindelige fejl

• At læse den sidste fejl i stedet for den første. Den første røde linje er normalt årsagen.
• At sætte miljøvariabler uden at bygge igen. Variabler i frontend fastlægges på build-tidspunktet.
• At teste kun med din egen konto. Crashes på tomme konti er en af de mest almindelige årsager til blanke sider.
• At antage, at deployment lykkedes. Tjek build-loggen, før du fejlsøger koden.
• At give browser-cachen skylden for alting. Et hårdt genindlæs udelukker den på få sekunder; hvis siden stadig er blank, er det noget andet.

Blanke sider i Mythex

Hvis Preview er blankt, så tjek først, at appen kører (åbn Code → terminal), og bed derefter Mythex om at starte den korrekte server, klik på Opdater i preview-værktøjslinjen, eller brug /fix. For en blank publiceret URL foreslår dokumentationen at vente et minut og lave et hårdt genindlæs, bekræfte at miljøvariabler og databasen blev sat op, før du publicerede, og tjekke din hosting-kvote. Husk, at en publiceret app er et øjebliksbillede: efter en rettelse skal du publicere igen. Hvis en ændring forårsagede det, ruller Gå tilbage til dette punkt på det sidste gode svar projektet tilbage. Se Fejlfinding og Fejlfinding ved publicering i dokumentationen, og vores generelle guide til fejlfinding af en AI-bygget app.

Tjekliste for blank side

• Læst den første røde fejl i Console
• Tjekket fanen Network for .js/.css-filer, der giver 404 eller returnerer HTML
• Base-stien matcher, hvor appen serveres
• Build'et blev færdigt, og build-outputmappen er det, der publiceres
• Alle frontend-miljøvariabler sat på den live build, og derefter bygget igen
• Crash rettet, inklusive for tomme og nye konti
• Error boundary på plads, så fremtidige crashes viser en besked
• Catch-all-rute for ukendte URL'er
• Testet efter et hårdt genindlæs og i et privat vindue

Spørgsmål