Kuidas parandada tühja valget lehte veebiäpis

Tühi valge leht tähendab peaaegu alati ühte kahest: äpi JavaScript kukkus enne, kui midagi joonistas, või JavaScripti ei laetud üldse. Ava brauseri konsool (parem klõps → Inspect → Console), loe esimene punane viga ja kontrolli seejärel Network vahelehel faile, mis ei laadinud. Enamik põhjusi on puuduv keskkonnamuutuja, vale baasteetee, ehitus, mis ei lõppenud, või krahh ühes komponendis.

See juhend käsitleb React-, Vue- või sarnaste raamistikega ühelehelisi äppe (sealhulgas AI-ehitajate tehtud äppe), kus tühjad lehed on kõige sagedasemad.

Miks leht on valge

Kaasaegne ühelehelise äpi (SPA) server saadab brauserile peaaegu tühja HTML-faili, umbes selline:

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

JavaScript ehitab seejärel kogu lehe selle tühja div-i sisse. Kui skript ei laadi või viskab vea enne renderdamist, jääb div tühjaks ja näed valget. Leht pole nähtavalt „katki“; see lihtsalt ei joonistunud kunagi.

Seepärast algab parandus alati arendajatööriistadest, mitte lehest endast.

Samm 1: loe konsooli

Ava arendajatööriistad: parem klõps lehel ja vali Inspect, või vajuta F12 (Macis Cmd+Option+I). Mine Console vahelehele ja laadi leht uuesti.

Vaata esimest punast viga, sest hilisemad on sageli kõrvalmõjud. Selle sõnum osutab põhjusele:

Kopeeri täielik veateksti, sealhulgas failinimi ja reanumber. Kui kasutad AI-ehitajat, kleebi see otse vestlusesse.

Samm 2: kontrolli, kas failid laadisid

Ava Network vaheleht, märgi Disable cache ja laadi uuesti. Vaata .js- ja .css-failide päringuid.

• Staatus 404 JavaScripti faili puhul: leht küsib faili, mida serveril pole.
• Staatus 200, aga tüüp on text/html: server tagastas lehe (sageli index.html ise tagasilangemise tõttu) skripti asemel. Algpõhjus on sama: fail ei ole seal, kus leht seda ootab.

Levinud põhjused:

Vale baasteetee. Kui äpp serveeritakse alamkaustast, nagu example.com/app/, aga see on ehitatud laadima faile teelt /assets/..., siis iga skripti päring ebaõnnestub. Vite'is on see base-valik failis vite.config; Create React Appis homepage-väli; Next.js'is basePath. See peab vastama kohale, kus äpp tegelikult serveeritakse.

Vananenud index.html. Ehitustööriistad annavad failidele sisu-räsi nimed, nagu index-a1b2c3.js. Pärast uut juurutust vana fail kaob. Kui brauser või CDN hoiab veel vana index.html-i vahemälus, küsib see vana faili ja ei saa midagi. Kõva värskendus (Cmd+Shift+R või Ctrl+Shift+R) kinnitab selle. Pikaajaline lahendus on serveerida index.html lühikese või puuduva vahemälu päisega, samal ajal kui räsiga failid on pikalt vahemälus.

Ehitus ei lõppenud või ei juurutunud. Kui ehitus ebaõnnestus, võib host serveerida vana või tühja väljundkausta. Kontrolli ehituslogi vigade suhtes.

Avaldatakse vale kaust. Host peab serveerima ehitusväljundi (tavaliselt dist või build), mitte projekti lähtekausta. Lähtekausta serveerimine annab index.html-i, mis osutab /src/main.tsx-ile, mida brauserid ei saa käivitada.

Samm 3: kontrolli keskkonnamuutujaid

Esikülje äpid loevad sageli seadeid, nagu API URL või avalik võti, ehitusajal. Kui muutuja puudub päris ehituses, viskab kood nagu createClient(undefined, undefined) kohe vea ja leht läheb valgeks.

Mida tuleb teada:

• Vite'is on brauseri koodis saadaval ainult VITE_-prefiksiga muutujad, mida loetakse kujul import.meta.env.VITE_NAME. Create React Appis on prefiks REACT_APP_; Next.js'is NEXT_PUBLIC_.
• Need väärtused kirjutatakse ehitusajal sisse. Muutuja lisamine pärast ehitust ei tee midagi, kuni ehitad ja juurutad uuesti.
• Kohalikul masinal või eelvaates võib olla .env-fail, mida tootmisehitus ei näe. Sea samad muutujad hostile.
• Nende prefiksitega kõik satub avalikku JavaScripti. Pane sinna ainult avalikke väärtusi, mitte kunagi salajasi võtmeid.

Kiire test: otsi konsooli veateatest undefined seadistuse nime lähedalt või palu:

Avaldatud äpp näitab tühja lehte. Loetle iga keskkonnamuutuja, mida esikülg loeb, kontrolli, millised neist puuduvad või on tühjad päris ehituses, ja tee äpp nii, et kui ükski neist puudub, näitab see selget veateadet tühja lehe asemel.

Samm 4: paranda krahh

Kui konsoolis on tavaline JavaScripti viga, kukkus kood renderdamise ajal. Tüüpilised põhjused AI-ehitatud äppides:

• Andmeid pole veel laaditud. Komponent loeb user.name-i enne, kui user on saabunud. Parandus on laadimisolek või valikuline ahelamine (user?.name).
• Tühjad andmed. Uuel kontol pole kirjeid ja kood eeldab, et nimekirjas on vähemalt üks element.
• Ootamatu andmekuju. API tagastas veaobjekti nimekirja asemel, mida kood ootas.
• Puuduv import pärast faili ümbernimetamist või ümbertõstmist.
• Ainult brauseris toimiva API kasutamine serveripoolse renderdamise ajal, näiteks window või localStorage Next.js serverikomponendis.

Anna AI-le täielik viga, leht ja see, kellena sa sisse logisid:

Dashboard-leht on uutele kasutajatele tühi. Konsool: TypeError: Cannot read properties of undefined (reading 'map') failis ProjectList.tsx:18. See töötab minu kontol, millel on projektid. Paranda see nii, et tühi konto näitaks „Projekte veel pole“, ja kontrolli uut kontot eelvaates.

Samm 5: lisa veapiir

React'is võib üks krahhiv komponent eemaldada kogu äpi, mistõttu väike viga tekitab täiesti tühja lehe. Veapiir (error boundary) on komponent, mis püüab renderdamisvead selle all olevast osast kinni ja näitab selle asemel varuvaadet.

Lisa veapiir peamiste marsruutide ümber, mis näitab sõnumit „Midagi läks valesti“ koos nupuga Lae uuesti, ja logib vea konsooli. Hoia päis ja navigeerimine veapiirist väljas, et need ikka renderduksid.

See ei paranda viga, aga külastajad näevad sõnumit tühja ekraani asemel ning sina näed, kus see puruneb.

Samm 6: vigu pole, aga leht on tühi

Kui konsool on puhas ja skriptid laadivad:

• Kontrolli Elements vahelehte. Kas <div id="root"> sees on sisu? Kui jah, siis see renderdub, aga on nähtamatu: valge tekst valgel, opacity: 0, display: none või täisekraanielement, mis katab selle.
• Kontrolli ruuterit. Kui ükski marsruut ei vasta praegusele URL-ile ja puudub „ei leitud“ marsruut, ei pruugi mõni ruuter midagi renderdada. Lisa kõike püüdev marsruut, mis näitab 404-lehte.
• Kontrolli kinnituspunkti. Kood peab kinnituma olemasolevasse elementi. Kui index.html-is on id="app" ja kood otsib root-i, ei ilmu midagi (ja React logib tavaliselt vea).
• Kontrolli brauserilaiendit. Proovi privaatset akent. Reklaamiblokeerijad blokeerivad mõnikord skripte nimedega nagu analytics või ads.

Tühi ainult pärast lehe värskendamist?

Kui avaleht töötab, aga /dashboard värskendamine näitab tühja lehte või 404-d, siis server ei tea saata index.html-i äpi marsruutidele. See on tagasilangemise marsruutimise probleem, mida käsitleb kuidas parandada 404-vead pärast juurutamist.

Levinud vead

• Viimase vea lugemine esimese asemel. Esimene punane rida on tavaliselt põhjus.
• Keskkonnamuutujate seadmine ilma uuesti ehitamata. Esikülje muutujad on fikseeritud ehitusajal.
• Testimine ainult oma kontoga. Tühjade kontode krahhid on üks sagedasemaid tühja lehe põhjusi.
• Eeldamine, et juurutus õnnestus. Kontrolli ehituslogi enne koodi silumist.
• Brauseri vahemälu süüdistamine kõige eest. Kõva värskendus välistab selle sekunditega; kui leht on endiselt tühi, on see midagi muud.

Tühjad lehed Mythexis

Kui Preview on tühi, kontrolli esmalt, kas äpp töötab (ava Code → terminal). Seejärel palu Mythexil käivitada õige server, klõpsa eelvaate tööriistaribal Refresh või kasuta /fix. Avaldatud URL-i tühja lehe puhul soovitab dokumentatsioon oodata minut ja teha kõva värskenduse, kinnitada, et keskkonnamuutujad ja andmebaas oleksid enne avaldamist seadistatud, ning kontrollida hostimise piirangut. Pea meeles, et avaldatud äpp on hetkepilt: pärast parandamist avalda uuesti. Kui muutus selle põhjustas, rullib Revert to this point viimasele töötavale vastusele tagasi. Vaata dokumentatsioonist Troubleshooting ja Publish troubleshooting ning meie üldist juhendit AI-ga ehitatud äpi silumisest.

Tühja lehe kontrollnimekiri

• Loetud esimene punane viga konsoolis
• Network vahelehelt kontrollitud .js/.css faile, mis annavad 404 või tagastavad HTML-i
• Baasteetee vastab kohale, kus äpp serveeritakse
• Ehitus lõppes ja ehitusväljundi kaust on see, mis avaldatakse
• Kõik esikülje keskkonnamuutujad seatud päris ehitusele, seejärel uuesti ehitatud
• Krahh parandatud, sealhulgas tühjade ja uute kontode puhul
• Veapiir paigas, et tulevased krahhid näitaksid sõnumit
• Kõiki püüdev marsruut tundmatutele URL-idele
• Testitud pärast kõva värskendamist ja privaatses aknas

Küsimused