Kako popraviti praznu bijelu stranicu u web aplikaciji

Prazna bijela stranica gotovo uvijek znači jedno od dva: JavaScript aplikacije je pao prije nego što je išta iscrtao ili se JavaScript uopšte nije učitao. Otvorite konzolu pregledača (desni klik → Inspect → Console), pročitajte prvu crvenu grešku, a zatim provjerite karticu Network za datoteke koje se nisu učitale. Većina uzroka je nedostajuća varijabla okruženja, pogrešna osnovna putanja, build koji nije završen ili pad u jednoj komponenti.

Ovaj vodič pokriva aplikacije s jednom stranicom izgrađene u Reactu, Vueu ili sličnim okvirima (uključujući aplikacije napravljene alatima uz AI), što je mjesto gdje su prazne stranice najčešće.

Zašto je stranica bijela

Moderna aplikacija s jednom stranicom (SPA) pregledaču šalje gotovo prazan HTML dokument, otprilike ovako:

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

JavaScript zatim gradi cijelu stranicu unutar tog praznog div-a. Ako se skripta ne učita ili baci grešku prije iscrtavanja, div ostaje prazan i vidite bijelo. Stranica nije „pokvarena” na vidljiv način; jednostavno nikada nije iscrtana.

Zato popravka uvijek počinje u alatima za developere, a ne na samoj stranici.

Korak 1: Pročitajte konzolu

Otvorite alate za developere: desni klik na stranicu i izaberite Inspect, ili pritisnite F12 (Cmd+Option+I na Macu). Idite na karticu Console i osvježite stranicu.

Pogledajte prvu crvenu grešku; kasnije su često posljedice. Ono što piše ukazuje na uzrok:

Kopirajte cijeli tekst greške, uključujući naziv datoteke i broj reda. Ako koristite AI alat za izradu, zalijepite ga direktno u chat.

Korak 2: Provjerite jesu li se datoteke učitale

Otvorite karticu Network, označite Disable cache i osvježite stranicu. Pogledajte zahtjeve za .js i .css datoteke.

• Status 404 za JavaScript datoteku: stranica traži datoteku koje nema na serveru.
• Status 200, ali tip je text/html: server je vratio stranicu (često sam index.html, zbog povratne opcije za SPA) umjesto skripte. Isti osnovni uzrok: datoteka nije tamo gdje stranica očekuje.

Uobičajeni razlozi:

Pogrešna osnovna putanja. Ako se aplikacija servira iz podfoldera, poput example.com/app/, ali je izgrađena da učitava datoteke s /assets/..., svaki zahtjev za skriptu promašuje. U Vite-u je to opcija base u vite.config; u Create React App-u to je polje homepage; u Next.js-u je to basePath. Mora se poklapati s mjestom na kojem se aplikacija zaista servira.

Zastarjeli index.html. Alati za build daju datotekama nazive s hešom sadržaja, poput index-a1b2c3.js. Nakon novog deploya stara datoteka nestaje. Ako pregledač ili CDN još ima keširan stari index.html, on traži staru datoteku i ne dobija ništa. Tvrdo osvježavanje (Cmd+Shift+R ili Ctrl+Shift+R) to potvrđuje. Dugoročno rješenje je da se index.html servira s kratkim ili bez keširanja, dok se datoteke s hešom keširaju dugo.

Build nije završen ili nije postavljen. Ako je build pao, host možda servira staru ili praznu izlaznu fasciklu. Provjerite log builda zbog grešaka.

Objavljen je pogrešan folder. Host mora servirati izlaz builda (obično dist ili build), a ne izvorni folder projekta. Ako servirate izvorni kod, dobijate index.html koji pokazuje na /src/main.tsx, što pregledači ne mogu izvršiti.

Korak 3: Provjerite varijable okruženja

Front end aplikacije često čitaju postavke poput URL-a API-ja ili javnog ključa u vrijeme builda. Ako varijabla nedostaje u live buildu, kod poput createClient(undefined, undefined) odmah baci grešku i stranica postane bijela.

Stvari koje treba znati:

• U Vite-u su varijable s prefiksom VITE_ dostupne u kodu pregledača i čitaju se kao import.meta.env.VITE_NAME. U Create React App-u je to REACT_APP_; u Next.js-u NEXT_PUBLIC_.
• Te vrijednosti se ugrađuju pri buildu aplikacije. Dodavanje varijable nakon builda ne radi ništa dok ponovo ne izgradite i ne postavite.
• Preview ili vaš lokalni računar može imati .env datoteku koju produkcijski build nema. Postavite iste varijable na hostu.
• Sve s tim prefiksima završava u javnom JavaScriptu. Stavljajte tamo samo javne vrijednosti, nikada tajne ključeve.

Brz test: potražite u grešci u konzoli undefined blizu naziva neke postavke ili pitajte:

Objavljena aplikacija prikazuje praznu stranicu. Ispiši svaku varijablu okruženja koju front end čita, provjeri koje nedostaju ili su prazne u live buildu i neka aplikacija prikaže jasnu poruku o grešci umjesto prazne stranice kada neka nedostaje.

Korak 4: Popravite pad

Ako konzola pokazuje običnu JavaScript grešku, kod je pao pri iscrtavanju. Tipični uzroci u aplikacijama napravljenim uz AI:

• Podaci još nisu učitani. Komponenta čita user.name prije nego što je user stigao. Rješenje je stanje učitavanja ili optional chaining (user?.name).
• Prazni podaci. Novi nalog nema zapise, a kod pretpostavlja da lista ima bar jednu stavku.
• Neočekivan oblik podataka. API je vratio objekat greške umjesto liste koju je kod očekivao.
• Nedostajući import nakon što je datoteka preimenovana ili premještena.
• Korištenje API-ja dostupnog samo u pregledaču tokom renderovanja na serveru, poput window ili localStorage u Next.js serverskoj komponenti.

Dajte AI-ju punu grešku, stranicu i nalog s kojim ste bili prijavljeni:

Stranica Dashboard je prazna za nove korisnike. Konzola: TypeError: Cannot read properties of undefined (reading 'map') na ProjectList.tsx:18. Radi za moj nalog, koji ima projekte. Popravi tako da prazan nalog prikaže „Još nema projekata” i provjeri novi nalog u pregledu.

Korak 5: Dodajte error boundary

U Reactu jedna komponenta koja pada može ukloniti cijelu aplikaciju, zato mala greška proizvodi potpuno praznu stranicu. Error boundary je komponenta koja hvata greške pri iscrtavanju ispod sebe i umjesto toga prikazuje rezervnu poruku.

Dodaj error boundary oko glavnih ruta koji prikazuje „Nešto nije uredu” sa dugmetom Reload i bilježi grešku u konzoli. Zaglavlje i navigacija neka ostanu izvan njega da bi se i dalje prikazivali.

Ovo ne popravlja grešku, ali posjetioci vide poruku umjesto praznog ekrana, a vi vidite gdje je došlo do kvara.

Korak 6: Nema grešaka, a i dalje prazno

Ako je konzola čista i skripte se učitavaju:

• Provjerite karticu Elements. Ima li sadržaja unutar <div id="root">? Ako ima, iscrtava se, ali je nevidljivo: bijeli tekst na bijeloj pozadini, opacity: 0, display: none ili element preko cijelog ekrana koji ga prekriva.
• Provjerite ruter. Ako nijedna ruta ne odgovara trenutnom URL-u i nema rute „nije pronađeno”, neki ruteri ne prikazuju ništa. Dodajte catch-all rutu koja prikazuje stranicu 404.
• Provjerite tačku montiranja. Kod se mora montirati u element koji postoji. Ako index.html ima id="app", a kod traži root, ništa se ne pojavljuje (a React obično zabilježi grešku).
• Provjerite dodatke pregledača. Probajte privatni prozor. Blokatori oglasa ponekad blokiraju skripte s nazivima poput analytics ili ads.

Prazno samo nakon osvježavanja stranice?

Ako početna stranica radi, ali osvježavanje /dashboard prikazuje praznu stranicu ili 404, server ne zna da treba poslati index.html za rute aplikacije. To je problem povratnog rutiranja, obrađen u kako popraviti 404 greške nakon objave.

Česte greške

• Čitanje posljednje greške umjesto prve. Prvi crveni red je obično uzrok.
• Postavljanje varijabli okruženja bez ponovnog builda. Varijable front enda su fiksirane u vrijeme builda.
• Testiranje samo sa vlastitim nalogom. Padovi za prazne naloge su jedan od najčešćih uzroka praznih stranica.
• Pretpostavka da je deploy uspio. Provjerite log builda prije nego što debagujete kod.
• Krivljenje keša pregledača za sve. Tvrdo osvježavanje to isključuje za nekoliko sekundi; ako je stranica i dalje prazna, uzrok je nešto drugo.

Prazne stranice u Mythexu

Ako je Preview prazan, prvo provjerite da aplikacija radi (otvorite Code → terminal), zatim zamolite Mythex da pokrene ispravan server, kliknite Refresh na traci alata preview-a ili upotrijebite /fix. Za praznu objavljenu adresu, dokumentacija preporučuje da sačekate minut i tvrdo osvježite stranicu, potvrdite da su varijable okruženja i baza postavljeni prije objave i provjerite svoj hosting limit. Zapamtite da je objavljena aplikacija snimak: nakon ispravke ponovo objavite. Ako je promjena izazvala problem, Revert to this point na posljednjem dobrom odgovoru vraća projekat na prethodno stanje. Pogledajte Rješavanje problema i Rješavanje problema pri objavi u dokumentaciji, kao i naš opšti vodič o otklanjanju grešaka u aplikaciji napravljenoj uz AI.

Kontrolna lista za praznu stranicu

• Pročitana prva crvena greška u konzoli
• Provjerena kartica Network za .js/.css datoteke koje daju 404 ili vraćaju HTML
• Osnovna putanja se poklapa s mjestom gdje se aplikacija servira
• Build je završen i izlazni folder builda je ono što se objavljuje
• Sve front end varijable okruženja postavljene na live buildu, pa ponovo izgrađeno
• Pad popravljen, uključujući za prazne i nove naloge
• Error boundary postavljen da buduće greške prikažu poruku
• Catch-all ruta za nepoznate URL-ove
• Testirano nakon tvrdog osvježavanja i u privatnom prozoru

Pitanja