Kako popraviti praznu belu stranicu u web aplikaciji

Prazna bela stranica skoro uvek znači jedno od dva: JavaScript aplikacije je pukao pre nego što je išta nacrtao, ili JavaScript uopšte nije učitan. Otvorite konzolu pregledača (desni klik → Inspect → Console), pročitajte prvu crvenu grešku, pa proverite karticu Network za fajlove koji nisu uspeli da se učitaju. Većina uzroka su promenljiva okruženja koja nedostaje, pogrešna osnovna putanja, build koji nije završen ili pad u jednoj komponenti.

Ovaj vodič pokriva single-page aplikacije napravljene u React-u, Vue-u ili sličnim frameworkovima (uključujući aplikacije koje prave AI alati za izradu), gde se prazne stranice najčešće pojavljuju.

Zašto je stranica bela

Moderna single-page aplikacija (SPA) šalje pregledaču gotovo prazan HTML fajl, otprilike ovako:

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

JavaScript zatim gradi celu stranicu unutar tog praznog div-a. Ako se skripta ne učita, ili baci grešku pre nego što se prikaže, div ostaje prazan i vidite belo. Stranica nije „pokvarena“ na vidljiv način; samo nikada nije iscrtana.

Zato popravka uvek počinje u alatima za programere, a ne na samoj stranici.

Korak 1: Pročitajte konzolu

Otvorite alate za programere: desni klik na stranicu i izaberite Inspect, ili pritisnite F12 (Cmd+Option+I na Mac-u). Idite na karticu Console i osvežite stranicu.

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

Kopirajte celu tekstualnu grešku, uključujući ime fajla i broj linije. Ako koristite AI alat za izradu, nalepite je direktno u razgovor.

Korak 2: Proverite da su fajlovi učitani

Otvorite karticu Network, označite Disable cache i osvežite. Pogledajte zahteve za .js i .css fajlove.

• Status 404 na JavaScript fajlu: stranica traži fajl koji nije na serveru.
• Status 200, ali tip je text/html: server je vratio stranicu (često sam index.html, zbog SPA fallback-a) umesto skripte. Isti koren problema: fajl nije tamo gde stranica očekuje.

Uobičajeni razlozi:

Pogrešna osnovna putanja. Ako je aplikacija servirana iz podfoldera, kao što je example.com/app/, a izgrađena je da učitava fajlove sa /assets/..., svaki zahtev za skriptu promaši. U Vite-u je to opcija base u vite.config; u Create React App-u polje homepage; u Next.js-u basePath. Mora da se poklapa sa mestom gde se aplikacija zaista servira.

Zastareo index.html. Alati za build daju fajlovima imena sa hešom sadržaja, poput index-a1b2c3.js. Posle novog deploy-a, stari fajl nestaje. Ako pregledač ili CDN i dalje ima keširan stari index.html, on traži stari fajl i ne dobija ništa. Osvežavanje uz zaobilaženje keša (Cmd+Shift+R ili Ctrl+Shift+R) to potvrđuje. Dugoročna popravka je da se index.html servira sa kratkim ili bez keša, dok se heširani fajlovi keširaju dugo.

Build nije završen ili nije postavljen. Ako je build pukao, host možda servira stari ili prazan izlazni folder. Proverite log builda za greške.

Objavljen je pogrešan folder. Host mora da servira build izlaz (obično dist ili build), a ne izvorni folder projekta. Ako se servira izvorni folder, dobijate index.html koji pokazuje na /src/main.tsx, a pregledači to ne mogu da pokrenu.

Korak 3: Proverite promenljive okruženja

Frontend aplikacije često čitaju podešavanja poput URL-a API-ja ili javnog ključa u vreme builda. Ako promenljiva nedostaje na živom buildu, kod poput createClient(undefined, undefined) odmah baca grešku, i stranica postaje bela.

Što treba znati:

• U Vite-u su u kodu za pregledač dostupne samo promenljive sa prefiksom VITE_, čitaju se kao import.meta.env.VITE_NAME. U Create React App-u je to REACT_APP_; u Next.js-u NEXT_PUBLIC_.
• Ove vrednosti se ugrađuju u vreme builda. Dodavanje promenljive posle builda ne radi ništa dok ne ponovo izgradite i ponovo objavite.
• Preview ili vaš lokalni računar mogu imati .env fajl koji produkcioni build nema. Postavite iste promenljive na hostu.
• Sve sa ovim prefiksima završava u javnom JavaScript-u. Stavljajte samo javne vrednosti, nikada tajne ključeve.

Brz test: u grešci u konzoli potražite undefined blizu imena podešavanja, ili zamolite:

Objavljena aplikacija prikazuje praznu stranicu. Napiši spisak svake promenljive okruženja koju frontend čita, proveri koje nedostaju ili su prazne na živom buildu i učini da aplikacija prikaže jasnu poruku o grešci umesto prazne stranice kada neka nedostaje.

Korak 4: Popravite pad

Ako konzola prikazuje običnu JavaScript grešku, kod je pukao pri renderovanju. Tipični uzroci u aplikacijama napravljenim uz AI:

• Podaci još nisu učitani. Komponenta čita user.name pre nego što je user stigao. Popravka 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 umesto liste koju je kod očekivao.
• Nedostaje import posle preimenovanja ili premeštanja fajla.
• Korišćenje API-ja samo za pregledač tokom renderovanja na serveru, poput window ili localStorage u Next.js server komponenti.

Dajte AI-ju celu grešku, stranicu i to da li ste bili prijavljeni kao ko:

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 da prazan nalog prikaže „Još nema projekata“, i proveri novi nalog u pregledu.

Korak 5: Dodajte error boundary

U Reactu jedna komponenta koja pukne može da ukloni celu aplikaciju, zato mala greška proizvodi potpuno praznu stranicu. Error boundary je komponenta koja hvata greške pri renderovanju ispod sebe i umesto toga prikazuje rezervni sadržaj.

Dodaj error boundary oko glavnih ruta koji prikazuje „Nešto nije u redu“ sa dugmetom Učitaj ponovo, i upisuje grešku u konzolu. Zadrži header i navigaciju van njega da se i dalje prikazuju.

Ne popravlja grešku, ali posetioci vide poruku umesto praznog ekrana, a vi vidite gde je pukao.

Korak 6: Nema grešaka, a stranica je i dalje prazna

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

• Proverite karticu Elements. Da li ima sadržaja unutar <div id="root">? Ako da, renderuje se, ali je nevidljivo: beli tekst na belom, opacity: 0, display: none, ili element preko celog ekrana koji ga prekriva.
• Proverite ruter. Ako nijedna ruta ne odgovara trenutnom URL-u i ne postoji ruta „nije pronađeno“, neki ruteri ne prikazuju ništa. Dodajte catch-all rutu koja prikazuje 404 stranicu.
• Proverite tačku montiranja. Kod mora da se montira u element koji postoji. Ako index.html ima id="app", a kod traži root, ništa se ne pojavljuje (i React obično zapiše grešku).
• Proverite ekstenziju pregledača. Probajte privatni prozor. Blokatori reklama povremeno blokiraju skripte sa imenima poput analytics ili ads.

Prazno tek kada osvežite stranicu?

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

Česte greške

• Čitanje poslednje greške umesto prve. Prva crvena linija je obično uzrok.
• Podešavanje promenljivih okruženja bez ponovnog builda. Promenljive za frontend se fiksiraju u vreme builda.
• Testiranje samo sopstvenim nalogom. Padovi za prazne naloge su jedan od najčešćih uzroka prazne stranice.
• Pretpostavka da je objava uspela. Proverite log builda pre nego što počnete da tražite grešku u kodu.
• Krivljenje keša pregledača za sve. Osvežavanje uz zaobilaženje keša to isključuje za nekoliko sekundi; ako je stranica i dalje prazna, uzrok je nešto drugo.

Prazne stranice u Mythex-u

Ako je Preview prazan, prvo proverite da li aplikacija radi (otvorite Code → terminal), pa zamolite Mythex da pokrene ispravan server, kliknite Refresh u traci alata preview-a, ili koristite /fix. Za praznu objavljenu adresu dokumentacija predlaže da sačekate minut i osvežite uz zaobilaženje keša, proverite da su promenljive okruženja i baza postavljene pre objave, i proverite svoj limit hostinga. Imajte na umu da je objavljena aplikacija snimak: posle popravke ponovo objavite. Ako je promena izazvala problem, Vrati na ovu tačku na poslednjem dobrom odgovoru vraća projekat unazad. Pogledajte Rešavanje problema i Rešavanje problema pri objavi u dokumentaciji, 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
• Proverena kartica Network za .js/.css fajlove koji daju 404 ili vraćaju HTML
• Osnovna putanja se poklapa sa mestom na kojem se aplikacija servira
• Build je završen, i izlazni folder builda je ono što se objavljuje
• Sve promenljive okruženja za frontend postavljene na živom buildu, zatim ponovo izgrađeno
• Pad popravljen, uključujući prazne i nove naloge
• Error boundary postavljen, pa će budući padovi prikazati poruku
• Catch-all ruta za nepoznate URL-ove
• Testirano posle osvežavanja uz zaobilaženje keša i u privatnom prozoru

Pitanja