Hvernig á að laga auða, hvíta síðu í vefappinu þínu

Auð, hvít síða þýðir næstum alltaf eitt af tvennu: JavaScript appsins hrundi áður en nokkuð var teiknað, eða JavaScript hlaðst aldrei. Opnaðu stjórnborð vafrans (hægrismelltu → Inspect → Console), lestu fyrstu rauðu villuna og athugaðu síðan Network-flipann fyrir skrár sem hlóðust ekki. Algengustu orsakirnar eru vantandi umhverfisbreyta, röng grunnslóð, bygging sem kláraðist ekki eða hrun í einum íhlut.

Þessi leiðbeining fjallar um einsíðuapp byggð með React, Vue eða svipuðu, þar á meðal öpp sem smíðatól gervigreindar hafa búið til, en þar eru auðar síður algengastar.

Af hverju síðan er hvít

Nútíma einsíðuapp (SPA) sendir vafranum nánast tóma HTML-skrá, í grófum dráttum svona:

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

JavaScript byggir síðan alla síðuna inni í þessum tóma div. Ef skriftan hleðst ekki, eða kastar villu áður en hún birtir, verður div-ið tómt og þú sérð hvítt. Síðan er ekki „biluð“ á sýnilegan hátt; hún var bara aldrei teiknuð.

Þess vegna byrjar lagfæringin alltaf í þróunarverkfærunum, ekki á síðunni sjálfri.

Skref 1: Lestu stjórnborðið

Opnaðu þróunarverkfæri: hægrismelltu á síðuna og veldu Inspect, eða ýttu á F12 (Cmd+Option+I á Mac). Farðu í Console-flipann og endurhladdu síðuna.

Horfðu á fyrstu rauðu villuna; síðari villur eru oft aukaverkanir. Það sem hún segir vísar á orsökina:

Afritaðu allan villutextann, þar með talið skráarnafn og línunúmer. Ef þú notar smíðatól gervigreindar skaltu líma hann beint í spjallið.

Skref 2: Athugaðu hvort skrárnar hlóðust

Opnaðu Network-flipann, hakaðu við Disable cache og endurhladdu. Horfðu á beiðnir fyrir .js- og .css-skrár.

• Staða 404 á JavaScript-skrá: síðan biður um skrá sem er ekki á þjóninum.
• Staða 200 en gerðin er text/html: þjónninn skilaði síðu (oft index.html sjálfri, vegna SPA-afturvísunar) í stað skriftunnar. Sama rótarorsök: skráin er ekki þar sem síðan býst við henni.

Algengar ástæður:

Röng grunnslóð. Ef appið er þjónað úr undirmöppu, til dæmis example.com/app/, en var byggt til að hlaða skrám frá /assets/..., missa allar skriftubeiðnir marks. Í Vite er þetta base-valkosturinn í vite.config; í Create React App er það homepage-reiturinn; í Next.js er það basePath. Hún verður að passa við þann stað þar sem appið er raunverulega þjónað.

Úrelt index.html. Byggingartól gefa skrám nöfn með efnis-kjötkássa, eins og index-a1b2c3.js. Eftir nýja birtingu er gamla skráin horfin. Ef vafri eða CDN geymir enn gamla index.html í skyndiminni biður hún um gömlu skrána og fær ekkert. Hörð endurhleðsla (Cmd+Shift+R eða Ctrl+Shift+R) staðfestir þetta. Langtímalausnin er að þjóna index.html með stuttu eða engu skyndiminnishaus, en hafa hashaðar skrár í skyndiminni lengi.

Byggingin kláraðist ekki eða var ekki birt. Ef byggingin bilaði gæti hýsingin verið að þjóna gamalli eða tómri úttaksmöppu. Athugaðu byggingarskrána fyrir villur.

Röng mappa er birt. Hýsingin verður að þjóna byggingarúttakinu (venjulega dist eða build), ekki frumkóðamöppu verkefnisins. Ef frumkóðinn er þjónaður færðu index.html sem vísar á /src/main.tsx, sem vafrar geta ekki keyrt.

Skref 3: Athugaðu umhverfisbreytur

Framendaöpp lesa oft stillingar eins og API-slóð eða opinberan lykil við byggingu. Ef breytu vantar í birtri byggingu hrynur kóði eins og createClient(undefined, undefined) strax og síðan verður hvít.

Atriði sem gott er að vita:

• Í Vite eru aðeins breytur með forskeytinu VITE_ aðgengilegar í vafrakóða, lesnar sem import.meta.env.VITE_NAME. Í Create React App er það REACT_APP_; í Next.js NEXT_PUBLIC_.
• Þessi gildi eru felld inn þegar appið er byggt. Að bæta við breytu eftir byggingu gerir ekkert fyrr en þú byggir og birtir aftur.
• Forskoðunin eða staðbundna vélin gæti haft .env-skrá sem birta byggingin hefur ekki. Stilltu sömu breytur á hýsingunni.
• Allt með þessum forskeytum endar í opinberu JavaScript. Settu aðeins opinber gildi þar, aldrei leyndarlykla.

Fljótlegt próf: leitaðu að undefined nálægt nafni stillingar í villunni í stjórnborðinu, eða spurðu:

Birta appið sýnir auða síðu. Taktu saman hverja umhverfisbreytu sem framendinn les, athugaðu hverjar vantar eða eru tómar í birtu byggingunni, og láttu appið sýna skýra villu í stað auðrar síðu þegar ein vantar.

Skref 4: Lagaðu hrunið

Sé venjuleg JavaScript-villa í stjórnborðinu hrundi kóðinn við birtingu. Algengar orsakir í öppum sem gervigreind hefur smíðað:

• Gögn ekki hlaðin ennþá. Íhlutur les user.name áður en user er kominn. Lagfæringin er hleðsluástand, eða valkeðjun (user?.name).
• Tóm gögn. Nýr aðgangur hefur engar færslur, og kóðinn gerir ráð fyrir að listinn hafi að minnsta kosti eitt atriði.
• Óvænt gerð gagna. API skilaði villuhlut í stað listans sem kóðinn átti von á.
• Vantandi innflutningur eftir að skrá var endurnefnd eða færð.
• Notkun á API sem aðeins er til í vafra við þjónsbirtingu, svo sem window eða localStorage í Next.js þjónsíhlut.

Gefðu gervigreindinni alla villuna, síðuna og hverjum þú varst skráður inn sem:

Mælaborðssíðan er auð fyrir nýja notendur. Stjórnborð: TypeError: Cannot read properties of undefined (reading 'map') við ProjectList.tsx:18. Hún virkar fyrir aðganginn minn, sem á verkefni. Lagaðu hana þannig að tómur aðgangur sýni „Engin verkefni enn“, og prófaðu nýjan aðgang í forskoðuninni.

Skref 5: Bættu við villumörkum

Í React getur einn hrunandi íhlutur fjarlægt allt appið, og þess vegna veldur lítil villa alveg auðri síðu. Villumörk er íhlutur sem grípur birtingarvillur fyrir neðan sig og sýnir varaskilaboð í staðinn.

Bættu villumörkum utan um aðalleiðirnar sem sýna „Eitthvað fór úrskeiðis“ með Endurhlaða-hnappi, og skráðu villuna í stjórnborðið. Haltu hausnum og leiðsögninni utan mörkanna svo að þau birtist enn.

Þetta lagar ekki villuna, en gestir sjá skilaboð í stað auðs skjás og þú sérð hvar hún brast.

Skref 6: Engar villur, samt auð

Ef stjórnborðið er hreint og skriftur hlaðast:

• Athugaðu Elements-flipann. Er efni inni í <div id="root">? Ef já, þá er það birt en ósýnilegt: hvítur texti á hvítu, opacity: 0, display: none, eða stórt yfirlagsatriði yfir allt.
• Athugaðu leiðarann. Ef engin leið passar við núverandi slóð og engin „ekki fundið“-leið er til getur sumt leiðarar birt ekkert. Bættu við grípa-leið sem sýnir 404-síðu.
• Athugaðu festipunktinn. Kóðinn verður að festast í frumefni sem er til. Ef index.html er með id="app" og kóðinn leitar að root birtist ekkert (og React skráir yfirleitt villu).
• Athugaðu viðbót í vafra. Prófaðu einkagluggu. Auglýsingablokkarar loka stundum skriftum með nöfnum eins og analytics eða ads.

Auð aðeins eftir endurhleðslu síðu?

Ef forsíðan virkar en endurhleðsla á /dashboard sýnir auða síðu eða 404 þá veit þjónninn ekki að hann eigi að senda index.html fyrir leiðir appsins. Það er vandamál með afturvísun leiða, sem er tekið fyrir í hvernig á að laga 404-villur eftir birtingu.

Algeng mistök

• Lesa síðustu villuna í stað þeirrar fyrstu. Fyrsta rauða línan er yfirleitt orsökin.
• Stilla umhverfisbreytur án þess að byggja aftur. Breytur framenda eru fastar við byggingu.
• Prófa aðeins með eigin aðgangi. Hrun á tómum aðgangi er ein algengasta orsök auðra síðna.
• Gera ráð fyrir að birtingin hafi heppnast. Athugaðu byggingarskrána áður en þú villuleitar í kóðanum.
• Kenna vafraskyndiminninu um allt. Hörð endurhleðsla útilokar það á nokkrum sekúndum; ef síðan er enn auð er það eitthvað annað.

Auðar síður í Mythex

Sé Forskoðunin auð skaltu fyrst athuga að appið keyri (opnaðu Code → terminal), og síðan biðja Mythex um að ræsa rétta þjóninn, smella á Endurhlaða á forskoðunarstikunni, eða nota /fix. Fyrir auða birta slóð mæla skjölin með að bíða í eina mínútu og endurhlaða með hörðum hætti, staðfesta að umhverfisbreytur og gagnagrunnur hafi verið settir upp áður en birt er, og athuga heimildir hýsingarinnar. Mundu að birt app er afrit: eftir að hafa lagað eitthvað skaltu birta aftur. Ef breyting olli þessu skaltu nota Snúa aftur á þennan punkt á síðasta góða svari til að rúlla verkefninu aftur. Sjáðu Úrræðaleit og Úrræðaleit við birtingu í skjölunum, og almennu leiðbeininguna okkar um villuleit í appi sem gervigreind smíðaði.

Gátlisti fyrir auða síðu

• Lesin fyrsta rauða villan í stjórnborðinu
• Athugaðar .js/.css-skrár í Network-flipanum sem gefa 404 eða skila HTML
• Grunnslóð passar við staðinn þar sem appið er þjónað
• Byggingu lokið og byggingarúttaksmappan er sú sem er birt
• Allar umhverfisbreytur framenda stilltar á birtu byggingunni, síðan byggt aftur
• Hrun lagað, þar með talið fyrir tóma og nýja aðganga
• Villumörk á sínum stað svo að framtíðarhrun sýni skilaboð
• Grípa-leið fyrir óþekktar slóðir
• Prófað eftir harða endurhleðslu og í einkagluggu

Spurningar