మీ వెబ్ యాప్‌లో ఖాళీ తెల్లని పేజీని ఎలా సరిచేయాలి
ఖాళీ తెల్లని పేజీ దాదాపు ఎల్లప్పుడూ రెండు విషయాలలో ఒకటి అర్థం: యాప్ JavaScript ఏదీ గీయకముందే క్రాష్ అయింది, లేదా JavaScript అసలు లోడ్ కాలేదు. బ్రౌజర్ console తెరవండి (రైట్-క్లిక్ → Inspect → Console) మరియు మొదటి ఎర్రటి ఎర్రర్ చదవండి, తర్వాత లోడ్ కాని ఫైళ్ల కోసం Network ట్యాబ్ తనిఖీ చేయండి. చాలా కారణాలు తప్పిపోయిన environment variable, తప్పు base path, పూర్తికాని build, లేదా ఒక భాగంలో క్రాష్.
ఈ గైడ్ React, Vue లేదా ఇలాంటి ఫ్రేమ్‌వర్క్‌లతో నిర్మించిన సింగిల్-పేజీ యాప్‌లను కవర్ చేస్తుంది (AI builders తో తయారైన యాప్‌లతో సహా), ఇక్కడే ఖాళీ పేజీలు అత్యంత సాధారణం.
పేజీ ఎందుకు తెల్లగా ఉంటుంది
ఆధునిక సింగిల్-పేజీ యాప్ (SPA) బ్రౌజర్‌కు దాదాపు ఖాళీ HTML ఫైల్ పంపుతుంది, సుమారుగా ఇలా:
<body>
<div id="root"></div>
<script type="module" src="/assets/index-a1b2c3.js"></script>
</body>
ఆ ఖాళీ div లోపల JavaScript మొత్తం పేజీని నిర్మిస్తుంది. స్క్రిప్ట్ లోడ్ కాకపోతే, లేదా రెండర్ చేయకముందే ఎర్రర్ ఇస్తే, div ఖాళీగా ఉండి మీకు తెల్లగా కనిపిస్తుంది. పేజీ కనిపించేలా "విరిగిపోలేదు"; అది ఎప్పుడూ గీయబడలేదు.
అందుకే పరిష్కారం ఎల్లప్పుడూ పేజీలో కాకుండా డెవలపర్ టూల్స్‌లో మొదలవుతుంది.
దశ 1: Console చదవండి
డెవలపర్ టూల్స్ తెరవండి: పేజీపై రైట్-క్లిక్ చేసి Inspect ఎంచుకోండి, లేదా F12 నొక్కండి (Mac లో Cmd+Option+I). Console ట్యాబ్‌కు వెళ్లి పేజీని రిఫ్రెష్ చేయండి.
మొదటి ఎర్రటి ఎర్రర్ చూడండి; తర్వాతివి తరచూ దుష్ప్రభావాలు. అది ఏమి చెబుతుందో కారణాన్ని సూచిస్తుంది:
| Console మెసేజ్ (సాధారణ పదాలు) | అర్థం | ఎక్కడికి వెళ్లాలి |
|---|---|---|
Cannot read properties of undefined (reading '...') | కోడ్ ఆశించిన డేటా అక్కడ లేదు | దశ 4 |
... is not defined / ... is not a function | తప్పిపోయిన import, variable లేదా సెట్టింగ్ | దశ 4 లేదా దశ 3 |
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html" | ఒక స్క్రిప్ట్ URL JavaScript కు బదులుగా HTML పేజీ ఇచ్చింది | దశ 2 |
Uncaught SyntaxError: Unexpected token '<' | అదే విషయం: JavaScript ఆశించిన చోట HTML | దశ 2 |
supabaseUrl is required, Missing API key, లేదా ఇలాంటివి | ఒక environment variable ఖాళీగా ఉంది | దశ 3 |
Access to fetch ... has been blocked by CORS policy | వేరే డొమైన్‌కు request బ్లాక్ అయింది | CORS ఎర్రర్‌లను సరిచేయడం చూడండి |
| అసలు ఎర్రర్‌లు లేవు | రెండరింగ్ జరిగింది కానీ ఏమీ చూపదు, లేదా CSS దాన్ని దాస్తుంది | దశ 6 |
పూర్తి ఎర్రర్ టెక్స్ట్ కాపీ చేయండి, ఫైల్ పేరు మరియు లైన్ నంబర్‌తో సహా. AI builder ఉపయోగిస్తుంటే, దానిని నేరుగా చాట్‌లో అతికించండి.
దశ 2: ఫైళ్లు లోడ్ అయ్యాయో తనిఖీ చేయండి
Network ట్యాబ్ తెరిచి, Disable cache టిక్ చేసి రిఫ్రెష్ చేయండి. .js మరియు .css ఫైళ్ల అభ్యర్థనలు చూడండి.
- JavaScript ఫైల్‌పై Status 404: పేజీ సర్వర్‌లో లేని ఫైల్ అడుగుతోంది.
- Status 200 కానీ రకం
text/html: సర్వర్ స్క్రిప్ట్‌కు బదులుగా ఒక పేజీ ఇచ్చింది (తరచూindex.htmlస్వయంగా, SPA fallback వల్ల). అదే మూల కారణం: పేజీ ఆశించే చోట ఫైల్ లేదు.
సాధారణ కారణాలు:
తప్పు base path. యాప్ example.com/app/ లాంటి సబ్-ఫోల్డర్ నుండి అందిస్తున్నా, కానీ ఫైళ్లను /assets/... నుండి లోడ్ చేసేలా build చేసి ఉంటే, ప్రతి స్క్రిప్ట్ అభ్యర్థన మిస్ అవుతుంది. Vite లో ఇది vite.config లోని base ఎంపిక; Create React App లో homepage ఫీల్డ్; Next.js లో basePath. అది యాప్ నిజంగా అందించే స్థానానికి సరిపోవాలి.
పాత index.html. Build టూల్స్ ఫైళ్లకు కంటెంట్ హాష్‌తో పేర్లు ఇస్తాయి, ఉదాహరణకు index-a1b2c3.js. కొత్త డిప్లాయ్ తర్వాత పాత ఫైల్ పోతుంది. బ్రౌజర్ లేదా CDN ఇంకా పాత index.html కాష్ చేసి ఉంటే, అది పాత ఫైల్ అడుగుతుంది మరియు ఏమీ పొందదు. హార్డ్ రిఫ్రెష్ (Cmd+Shift+R లేదా Ctrl+Shift+R) దీన్ని నిర్ధారిస్తుంది. దీర్ఘకాలిక పరిష్కారం: హాష్ చేసిన ఫైళ్లు ఎక్కువకాలం కాష్ అయినప్పుడు index.html ను చిన్న లేదా no-cache హెడర్‌తో అందించడం.
Build పూర్తి కాలేదు లేదా డిప్లాయ్ కాలేదు. Build విఫలమైతే, హోస్ట్ పాత లేదా ఖాళీ అవుట్‌పుట్ ఫోల్డర్ అందిస్తుండవచ్చు. Build లాగ్‌లో ఎర్రర్‌లు తనిఖీ చేయండి.
తప్పు ఫోల్డర్ ప్రచురించబడింది. హోస్ట్ build అవుట్‌పుట్ (సాధారణంగా dist లేదా build) అందించాలి, ప్రాజెక్ట్ సోర్స్ ఫోల్డర్ కాదు. సోర్స్ అందిస్తే /src/main.tsx ను సూచించే index.html వస్తుంది, అది బ్రౌజర్ నడపలేదు.
దశ 3: Environment variables తనిఖీ చేయండి
ఫ్రంటెండ్ యాప్‌లు తరచూ API URL లేదా పబ్లిక్ key వంటి సెట్టింగ్‌లను build సమయంలో చదువుతాయి. ప్రత్యక్ష build లో ఒక variable లేకపోతే, createClient(undefined, undefined) వంటి కోడ్ వెంటనే విఫలమవుతుంది, మరియు పేజీ తెల్లగా మారుతుంది.
తెలుసుకోవాల్సినవి:
- Vite లో, బ్రౌజర్ కోడ్‌లో
VITE_ప్రిఫిక్స్ ఉన్న variables మాత్రమే అందుబాటులో ఉంటాయి,import.meta.env.VITE_NAMEగా చదువుతారు. Create React App లో అదిREACT_APP_; Next.js లోNEXT_PUBLIC_. - ఈ విలువలు యాప్ build అయినప్పుడు లోపల చేర్చబడతాయి. build తర్వాత variable జోడిస్తే, మీరు మళ్లీ build చేసి డిప్లాయ్ చేసే వరకు ఏమీ మారదు.
- ప్రివ్యూ లేదా లోకల్ మెషీన్‌లో
.envఫైల్ ఉండవచ్చు, అది ప్రొడక్షన్ build కు ఉండదు. అవే variables హోస్ట్‌పై సెట్ చేయండి. - ఈ ప్రిఫిక్స్‌లు ఉన్న ప్రతిదీ పబ్లిక్ JavaScript లోకి వెళ్తుంది. పబ్లిక్ విలువలు మాత్రమే అక్కడ ఉంచండి, secret keys ఎప్పుడూ కాదు.
త్వరిత పరీక్ష: console ఎర్రర్‌లో సెట్టింగ్ పేరు దగ్గర undefined కోసం వెతకండి, లేదా ఇలా అడగండి:
ప్రచురించిన యాప్ ఖాళీ పేజీ చూపిస్తోంది. ఫ్రంటెండ్ చదివే ప్రతి environment variable జాబితా చేయి, ప్రత్యక్ష build లో ఏవి లేవో లేదా ఖాళీగా ఉన్నాయో తనిఖీ చెయ్, మరియు ఏదైనా లేనప్పుడు ఖాళీ పేజీకి బదులుగా స్పష్టమైన ఎర్రర్ మెసేజ్ చూపేలా యాప్‌ను మార్చు.
దశ 4: క్రాష్‌ను సరిచేయండి
Console సాధారణ JavaScript ఎర్రర్ చూపిస్తే, రెండరింగ్ సమయంలో కోడ్ క్రాష్ అయింది. AI-నిర్మిత యాప్‌లలో సాధారణ కారణాలు:
- డేటా ఇంకా లోడ్ కాలేదు.
userవచ్చేముందే ఒక భాగంuser.nameచదువుతుంది. పరిష్కారం loading స్థితి, లేదా optional chaining (user?.name). - ఖాళీ డేటా. కొత్త ఖాతాకు రికార్డులు ఉండవు, మరియు జాబితాలో కనీసం ఒక అంశం ఉందని కోడ్ ఊహిస్తుంది.
- ఊహించని డేటా ఆకారం. API కోడ్ ఆశించిన జాబితాకు బదులుగా ఎర్రర్ ఆబ్జెక్ట్ ఇచ్చింది.
- ఫైల్ పేరు మార్చిన లేదా తరలించిన తర్వాత తప్పిపోయిన import.
- Server-side రెండరింగ్ సమయంలో బ్రౌజర్-మాత్రమే API వాడటం, ఉదాహరణకు Next.js server component లో
windowలేదాlocalStorage.
AI కి పూర్తి ఎర్రర్, పేజీ, మరియు మీరు ఏ ఖాతాతో లాగిన్ అయ్యారో ఇవ్వండి:
కొత్త వినియోగదారులకు Dashboard పేజీ ఖాళీగా ఉంది. Console:
ProjectList.tsx:18వద్దTypeError: Cannot read properties of undefined (reading 'map'). నా ఖాతాకు ప్రాజెక్ట్‌లు ఉన్నందున అది నాకు పనిచేస్తుంది. ఖాళీ ఖాతాకు "ఇంకా ప్రాజెక్ట్‌లు లేవు" అని చూపేలా సరిచేయి, మరియు preview లో కొత్త ఖాతాను తనిఖీ చేయి.
దశ 5: Error boundary జోడించండి
React లో, ఒక క్రాష్ అయిన కాంపోనెంట్ మొత్తం యాప్‌ను అన్‌మౌంట్ చేయగలదు, అందుకే చిన్న బగ్ పూర్తిగా ఖాళీ పేజీని ఇస్తుంది. Error boundary అనేది దాని కింద రెండరింగ్ ఎర్రర్‌లను పట్టుకుని బదులుగా ఫాల్‌బ్యాక్ చూపే కాంపోనెంట్.
ప్రధాన routes చుట్టూ error boundary జోడించు, అది "Something went wrong" మరియు Reload బటన్ చూపాలి, మరియు ఎర్రర్‌ను console కు లాగ్ చేయాలి. Header మరియు navigation దాని వెలుపల ఉంచు, తద్వారా అవి ఇంకా రెండర్ అవుతాయి.
ఇది బగ్‌ను పరిష్కరించదు, కానీ సందర్శకులు ఖాళీ స్క్రీన్ బదులు ఒక మెసేజ్ చూస్తారు, మరియు మీరు అది ఎక్కడ విరిగిందో చూస్తారు.
దశ 6: ఎర్రర్‌లు లేవు, ఇంకా ఖాళీ
Console శుభ్రంగా ఉండి స్క్రిప్ట్‌లు లోడ్ అయితే:
- Elements ట్యాబ్ తనిఖీ చేయండి.
<div id="root">లోపల కంటెంట్ ఉందా? అవును అయితే, అది రెండర్ అవుతోంది కానీ కనిపించడం లేదు: తెల్ల టెక్స్ట్ తెల్ల నేపథ్యంపై,opacity: 0,display: none, లేదా పూర్తి స్క్రీన్ ఎలిమెంట్ దాన్ని కప్పుతోంది. - Router తనిఖీ చేయండి. ప్రస్తుత URL కు ఏ route సరిపోకపోయి, "not found" route లేకపోతే కొన్ని routers ఏమీ రెండర్ చేయవు. 404 పేజీ చూపే catch-all route జోడించండి.
- Mount పాయింట్ తనిఖీ చేయండి. కోడ్ ఉనికిలో ఉన్న ఎలిమెంట్‌లో mount కావాలి.
index.htmlలోid="app"ఉండి కోడ్rootకోసం వెతికితే, ఏదీ కనిపించదు (మరియు React సాధారణంగా ఎర్రర్ లాగ్ చేస్తుంది). - బ్రౌజర్ extension తనిఖీ చేయండి. ప్రైవేట్ విండోలో ప్రయత్నించండి. Ad blockers
analyticsలేదాadsవంటి పేర్లున్న స్క్రిప్ట్‌లను అప్పుడప్పుడు బ్లాక్ చేస్తాయి.
పేజీని రిఫ్రెష్ చేసిన తర్వాత మాత్రమే ఖాళీగా ఉందా?
హోమ్ పేజీ పనిచేస్తుంది కానీ /dashboard ను రిఫ్రెష్ చేస్తే ఖాళీ పేజీ లేదా 404 వస్తే, యాప్ routes కోసం index.html పంపడం సర్వర్‌కు తెలియదు. అది routing fallback సమస్య, డిప్లాయ్ తర్వాత 404 ఎర్రర్‌లను ఎలా సరిచేయాలి లో కవర్ చేయబడింది.
సాధారణ తప్పులు
- మొదటి ఎర్రర్ కాకుండా చివరి ఎర్రర్ చదవడం. మొదటి ఎర్రటి లైన్ సాధారణంగా కారణం.
- build చేయకుండా environment variables సెట్ చేయడం. ఫ్రంటెండ్ variables build సమయంలో స్థిరపడతాయి.
- మీ స్వంత ఖాతాతో మాత్రమే పరీక్షించడం. ఖాళీ ఖాతా క్రాష్‌లు అత్యంత సాధారణ ఖాళీ-పేజీ కారణాలలో ఒకటి.
- డిప్లాయ్ పనిచేసిందని భావించడం. కోడ్ డీబగ్ చేయడానికి ముందు build లాగ్ తనిఖీ చేయండి.
- అన్నింటికీ బ్రౌజర్ కాష్‌ను నిందించడం. హార్డ్ రిఫ్రెష్ సెకన్లలో దాన్ని తోసిపుచ్చుతుంది; పేజీ ఇంకా ఖాళీగా ఉంటే, అది వేరే సమస్య.
Mythex లో ఖాళీ పేజీలు
Preview ఖాళీగా ఉంటే, ముందు యాప్ నడుస్తోందో తనిఖీ చేయండి (Code → terminal తెరవండి), తర్వాత Mythex ను సరైన సర్వర్ ప్రారంభించమని అడగండి, preview toolbar లో Refresh క్లిక్ చేయండి, లేదా /fix ఉపయోగించండి. ప్రచురించిన URL ఖాళీగా ఉంటే, డాక్స్ ఒక నిమిషం వేచి హార్డ్-రిఫ్రెష్ చేయమని, ప్రచురించే ముందు environment variables మరియు డేటాబేస్ సెటప్ అయ్యాయో నిర్ధారించుకోమని, మరియు మీ హోస్టింగ్ పరిమితులు తనిఖీ చేయమని సూచిస్తాయి. ప్రచురించిన యాప్ ఒక స్నాప్‌షాట్ అని గుర్తుంచుకోండి: ఏదైనా సరిదిద్దిన తర్వాత మళ్లీ ప్రచురించండి. ఒక మార్పు దానికి కారణమైతే, చివరి మంచి ప్రతిస్పందనపై Revert to this point ప్రాజెక్ట్‌ను వెనక్కి తీసుకుంటుంది. Troubleshooting మరియు Publish troubleshooting డాక్స్‌లో చూడండి, మరియు మా సాధారణ గైడ్ AI-నిర్మిత యాప్‌ను debug చేయడం కూడా చూడండి.
ఖాళీ పేజీ చెక్‌లిస్ట్
- Console లో మొదటి ఎర్రటి ఎర్రర్ చదివాను
- Network ట్యాబ్‌లో 404 లేదా HTML ఇచ్చే
.js/.cssఫైళ్లను తనిఖీ చేశాను - Base path యాప్ అందించే స్థానానికి సరిపోతుంది
- Build పూర్తయింది, మరియు ప్రచురించేది build అవుట్‌పుట్ ఫోల్డర్
- ప్రత్యక్ష build లో అన్ని ఫ్రంటెండ్ environment variables సెట్ అయ్యాయి, తర్వాత rebuild చేశాను
- క్రాష్ సరిచేశాను, ఖాళీ మరియు కొత్త ఖాతాల కోసం కూడా
- భవిష్యత్ క్రాష్‌లు మెసేజ్ చూపేలా error boundary ఉంది
- తెలియని URLs కోసం catch-all route ఉంది
- హార్డ్ రిఫ్రెష్ తర్వాత మరియు ప్రైవేట్ విండోలో పరీక్షించాను
ప్రశ్నలు
నా React యాప్ ఖాళీ తెల్లని పేజీ ఎందుకు చూపిస్తోంది?
సాధారణంగా ఏదీ రెండర్ కాకముందే JavaScript క్రాష్ అయినందున, లేదా JavaScript ఫైల్ అసలు లోడ్ కానందున. బ్రౌజర్ console తెరవండి: అక్కడ ఎర్రటి ఎర్రర్ ఏది, మరియు ఏ ఫైల్ మరియు లైన్‌లో జరిగిందో చెబుతుంది.
నా యాప్ లోకల్‌గా పని చేస్తుంది, కానీ డిప్లాయ్ తర్వాత ఖాళీ పేజీ ఎందుకు?
అత్యంత సాధారణ కారణాలు: ప్రత్యక్ష build కోసం ఎప్పుడూ సెట్ కాని environment variables, తప్పు పాత్ నుండి అభ్యర్థించిన JavaScript మరియు CSS ఫైళ్లు (base path తేడా), మరియు ఇక లేని ఫైళ్లను సూచించే పాత కాష్ చేసిన index.html.
'Failed to load module script' అంటే ఏమిటి?
బ్రౌజర్ ఒక JavaScript ఫైల్ అడిగి, బదులుగా HTML పేజీ పొందింది, సాధారణంగా సైట్ యొక్క index.html లేదా ఎర్రర్ పేజీ. ఫైల్ పాత్ తప్పు లేదా సర్వర్‌లో ఫైల్ లేదు, కాబట్టి build అవుట్‌పుట్ మరియు యాప్ base path సెట్టింగ్ తనిఖీ చేయండి.
ఒక బగ్ మొత్తం పేజీని ఖాళీ చేయకుండా ఎలా ఆపాలి?
Error boundary జోడించండి. React లో, error boundary అంటే దాని కింద ఉన్న భాగంలో రెండరింగ్ ఎర్రర్‌లను పట్టుకుని, అన్నింటినీ తొలగించే బదులు ఫాల్‌బ్యాక్ మెసేజ్ చూపే కాంపోనెంట్.