तुमच्या वेब ॲपमधील रिकामे पांढरे पेज कसे दुरुस्त करावे

रिकामे पांढरे पेज जवळजवळ नेहमी दोनपैकी एका गोष्टीचा अर्थ असतो: ॲपचे JavaScript काहीही काढण्यापूर्वी क्रॅश झाले, किंवा JavaScript अजिबात लोड झालेच नाही. ब्राउझर कन्सोल उघडा (राइट-क्लिक → Inspect → Console) आणि पहिली लाल त्रुटी वाचा, मग Network टॅबमध्ये लोड न झालेल्या फाइल्स तपासा. बहुतेक कारणे म्हणजे गहाळ पर्यावरण व्हेरिएबल, चुकीचा बेस पाथ, अपूर्ण बिल्ड, किंवा एका घटकातील क्रॅश.

हे मार्गदर्शक React, Vue किंवा तत्सम फ्रेमवर्कने बनवलेल्या सिंगल-पेज ॲप्सचा विचार करते (AI बिल्डरने बनवलेल्या ॲप्ससह), जिथे रिकामी पेजेस सर्वात जास्त दिसतात.

पेज पांढरे का दिसते

आधुनिक सिंगल-पेज ॲप (SPA) ब्राउझरला जवळजवळ रिकामी HTML फाइल पाठवते, साधारणपणे अशी:

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

त्यानंतर JavaScript त्या रिकाम्या div मध्ये संपूर्ण पेज बनवते. स्क्रिप्ट लोड होण्यात अपयशी ठरली, किंवा रेंडर होण्यापूर्वीच त्रुटी फेकली, तर div रिकामा राहतो आणि तुम्हाला पांढरे दिसते. पेज दृश्यमानपणे "तुटलेले" नसते; ते फक्त कधीच काढले गेले नाही.

म्हणूनच दुरुस्ती नेहमी पेजमध्ये नव्हे तर डेव्हलपर टूल्समध्ये सुरू होते.

पायरी 1: कन्सोल वाचा

डेव्हलपर टूल्स उघडा: पेजवर राइट-क्लिक करून Inspect निवडा, किंवा F12 दाबा (Mac वर Cmd+Option+I). Console टॅबवर जा आणि पेज रिलोड करा.

पहिली लाल त्रुटी पहा; नंतरच्या अनेकदा दुय्यम परिणाम असतात. ती काय सांगते त्यावरून कारण कळते:

फाइल नाव आणि ओळ क्रमांकासह पूर्ण त्रुटी मजकूर कॉपी करा. AI बिल्डर वापरत असाल तर तो थेट चॅटमध्ये पेस्ट करा.

पायरी 2: फाइल्स लोड झाल्या का ते तपासा

Network टॅब उघडा, Disable cache वर टिक करा आणि रिलोड करा. .js आणि .css फाइल्सच्या रिक्वेस्ट्स पहा.

• JavaScript फाइलवर स्टेटस 404: पेज सर्व्हरवर नसलेली फाइल मागत आहे.
• स्टेटस 200 पण प्रकार text/html: सर्व्हरने स्क्रिप्टऐवजी पेज परत केले (अनेकदा SPA फॉलबॅकमुळे index.html स्वतः). मूळ कारण तेच: फाइल पेजला अपेक्षित ठिकाणी नाही.

सामान्य कारणे:

चुकीचा बेस पाथ. ॲप example.com/app/ सारख्या सब-फोल्डरमधून सर्व्ह होत असेल, पण /assets/... वरून फाइल्स लोड होतील असे बिल्ड झाले असेल, तर प्रत्येक स्क्रिप्ट रिक्वेस्ट चुकते. Vite मध्ये हा vite.config मधील base पर्याय आहे; Create React App मध्ये homepage फील्ड; Next.js मध्ये basePath. तो ॲप प्रत्यक्षात जिथे सर्व्ह होते त्याच्याशी जुळला पाहिजे.

जुना index.html. बिल्ड टूल्स फाइल्सना कंटेंट हॅश असलेली नावे देतात, जसे index-a1b2c3.js. नवीन डिप्लॉयनंतर जुनी फाइल नाहीशी होते. ब्राउझर किंवा CDN ने जुना index.html अजूनही कॅश केलेला असेल, तर तो जुन्या फाइलसाठी विचारतो आणि काहीच मिळत नाही. हार्ड रिफ्रेश (Cmd+Shift+R किंवा Ctrl+Shift+R) हे तपासते. दीर्घकालीन उपाय म्हणजे हॅश असलेल्या फाइल्स दीर्घ काळ कॅश होतील आणि index.html अल्प किंवा कॅश-नसलेल्या हेडरसह सर्व्ह होईल.

बिल्ड पूर्ण झाले नाही किंवा डिप्लॉय झाले नाही. बिल्ड अयशस्वी झाले असेल तर होस्ट जुने किंवा रिकामे आउटपुट फोल्डर सर्व्ह करत असेल. बिल्ड लॉगमध्ये त्रुटी तपासा.

चुकीचे फोल्डर प्रकाशित झाले आहे. होस्टने बिल्ड आउटपुट (सहसा dist किंवा build) सर्व्ह केले पाहिजे, प्रोजेक्टचे सोर्स फोल्डर नव्हे. सोर्स सर्व्ह केल्यास /src/main.tsx कडे निर्देश करणारा index.html मिळतो, जो ब्राउझर चालवू शकत नाही.

पायरी 3: पर्यावरण व्हेरिएबल्स तपासा

फ्रंटएंड ॲप्स अनेकदा बिल्ड वेळी API URL किंवा सार्वजनिक की सारख्या सेटिंग्ज वाचतात. लाईव्ह बिल्डवर एखादे व्हेरिएबल गहाळ असेल, तर createClient(undefined, undefined) सारखा कोड लगेच त्रुटी फेकतो आणि पेज पांढरे होते.

याबद्दल माहिती:

• Vite मध्ये फक्त VITE_ ने सुरू होणारी व्हेरिएबल्स ब्राउझर कोडमध्ये उपलब्ध असतात, import.meta.env.VITE_NAME म्हणून वाचली जातात. Create React App मध्ये ते REACT_APP_ आहे; Next.js मध्ये NEXT_PUBLIC_.
• ही मूल्ये ॲप बिल्ड होतानाच आत घातली जातात. बिल्डनंतर व्हेरिएबल जोडल्यास पुन्हा बिल्ड आणि डिप्लॉय करेपर्यंत काहीही होत नाही.
• प्रिव्ह्यू किंवा स्थानिक मशीनवर .env फाइल असू शकते जी प्रोडक्शन बिल्डकडे नसते. होस्टवर तीच व्हेरिएबल्स सेट करा.
• या प्रीफिक्स असलेली कोणतीही गोष्ट सार्वजनिक JavaScript मध्ये जाते. तिथे फक्त सार्वजनिक मूल्ये ठेवा, कधीही गुप्त किल्ल्या नव्हे.

एक जलद चाचणी: कन्सोल त्रुटीत एखाद्या सेटिंगच्या नावाजवळ undefined शोधा, किंवा विचारा:

प्रकाशित ॲप रिकामे पेज दाखवते. फ्रंटएंड वाचत असलेले प्रत्येक पर्यावरण व्हेरिएबल यादी करा, लाईव्ह बिल्डमध्ये कोणते गहाळ किंवा रिकामे आहेत ते तपासा, आणि एखादे गहाळ असताना रिकाम्या पेजऐवजी ॲपने स्पष्ट त्रुटी संदेश दाखवावा असे करा.

पायरी 4: क्रॅश दुरुस्त करा

कन्सोलमध्ये सामान्य JavaScript त्रुटी दिसत असेल, तर रेंडर होत असताना कोड क्रॅश झाला. AI ने बनवलेल्या ॲप्समधील ठराविक कारणे:

• डेटा अजून लोड झालेला नाही. user आला नसतानाच घटक user.name वाचतो. उपाय म्हणजे लोडिंग स्थिती, किंवा ऑप्शनल चेनिंग (user?.name).
• रिकामा डेटा. नवीन खात्यात कोणतीही नोंद नसते, आणि कोड यादीत किमान एक घटक असेल असे गृहीत धरतो.
• अनपेक्षित डेटा आकार. API ने कोड अपेक्षित यादीऐवजी एरर ऑब्जेक्ट परत केला.
• फाइलचे नाव बदलले किंवा हलवले नंतर गहाळ इम्पोर्ट.
• सर्व्हर-बाजूच्या रेंडरिंगदरम्यान फक्त-ब्राउझर API वापरणे, जसे Next.js सर्व्हर घटकात window किंवा localStorage.

AI ला पूर्ण त्रुटी, पेज आणि तुम्ही कोणत्या खात्याने लॉगिन होता ते द्या:

नवीन वापरकर्त्यांसाठी डॅशबोर्ड पेज रिकामे आहे. कन्सोल: TypeError: Cannot read properties of undefined (reading 'map') ProjectList.tsx:18 येथे. माझ्या खात्यासाठी, ज्यात प्रोजेक्ट्स आहेत, ते चालते. दुरुस्त करा म्हणजे रिकामे खाते "अजून प्रोजेक्ट्स नाहीत" दाखवेल, आणि प्रिव्ह्यूमध्ये नवीन खाते तपासा.

पायरी 5: एरर बाउंड्री जोडा

React मध्ये एक क्रॅश होणारा घटक संपूर्ण ॲप अनमाउंट करू शकतो, म्हणूनच एक छोटा बग पूर्णपणे रिकामे पेज निर्माण करतो. एरर बाउंड्री हा असा घटक आहे जो त्याच्या खालील रेंडरिंग त्रुटी पकडतो आणि त्याऐवजी फॉलबॅक दाखवतो.

मुख्य राउट्सभोवती एरर बाउंड्री जोडा जी "काहीतरी चुकले" आणि Reload बटण दाखवते, आणि त्रुटी कन्सोलमध्ये नोंदवते. हेडर आणि नेव्हिगेशन त्याच्या बाहेर ठेवा, म्हणजे ते अजूनही दिसतील.

हे बग दुरुस्त करत नाही, पण अभ्यागतांना रिकाम्या स्क्रीनऐवजी संदेश दिसतो, आणि तुम्हाला कुठे तुटले ते दिसते.

पायरी 6: त्रुटी नाहीत, तरीही रिकामे

कन्सोल स्वच्छ असेल आणि स्क्रिप्ट्स लोड होत असतील तर:

• Elements टॅब तपासा. <div id="root"> च्या आत काही मजकूर आहे का? असल्यास ते रेंडर होत आहे पण अदृश्य आहे: पांढऱ्यावर पांढरा मजकूर, opacity: 0, display: none, किंवा त्यावर झाकणारा पूर्ण-स्क्रीन घटक.
• राउटर तपासा. सध्याच्या URL शी कोणताही राउट जुळत नसेल आणि "सापडले नाही" राउट नसेल, तर काही राउटर काहीच रेंडर करत नाहीत. 404 पेज दाखवणारा कॅच-ऑल राउट जोडा.
• माउंट पॉइंट तपासा. कोड अस्तित्वात असलेल्या घटकात माउंट झाला पाहिजे. index.html मध्ये id="app" असेल आणि कोड root शोधत असेल, तर काहीच दिसणार नाही (आणि React सहसा त्रुटी नोंदवते).
• ब्राउझर एक्सटेन्शन तपासा. खाजगी विंडोमध्ये प्रयत्न करा. ॲड ब्लॉकर्स कधीकधी analytics किंवा ads सारख्या नावांच्या स्क्रिप्ट्स ब्लॉक करतात.

फक्त पेज रिफ्रेश केल्यावरच रिकामे?

होम पेज चालते पण /dashboard रिफ्रेश केल्यावर रिकामे पेज किंवा 404 दिसत असेल, तर ॲप राउट्ससाठी index.html पाठवायला सर्व्हरला माहीत नाही. ही राउटिंग फॉलबॅक समस्या आहे, जी डिप्लॉयनंतर 404 एरर कसे दुरुस्त करावे मध्ये समाविष्ट आहे.

सामान्य चुका

• पहिली त्रुटी न वाचता शेवटची वाचणे. पहिली लाल ओळ सहसा कारण असते.
• बिल्ड न करता पर्यावरण व्हेरिएबल्स सेट करणे. फ्रंटएंड व्हेरिएबल्स बिल्ड वेळीच निश्चित होतात.
• फक्त स्वतःच्या खात्याने चाचणी. रिकाम्या खात्यातील क्रॅश हे रिकाम्या पेजचे सर्वात सामान्य कारण आहे.
• डिप्लॉय यशस्वी झाले असे गृहीत धरणे. कोड डीबग करण्यापूर्वी बिल्ड लॉग तपासा.
• सर्व काही ब्राउझर कॅशवर ढकलणे. हार्ड रिफ्रेश काही सेकंदात ते वगळते; पेज तरीही रिकामे असेल तर कारण वेगळे आहे.

Mythex मधील रिकामी पेजेस

तुमचे Preview रिकामे असेल, तर आधी ॲप चालू आहे का ते तपासा (Code → terminal उघडा), मग Mythex ला योग्य सर्व्हर सुरू करायला सांगा, प्रिव्ह्यू टूलबारमधील Refresh क्लिक करा, किंवा /fix वापरा. प्रकाशित URL रिकामा असेल, तर डॉक्स सुचवतात की एक मिनिट थांबा आणि हार्ड-रिफ्रेश करा, प्रकाशित करण्यापूर्वी पर्यावरण व्हेरिएबल्स आणि डेटाबेस सेट झाले आहेत याची खात्री करा, आणि तुमची होस्टिंग मर्यादा तपासा. लक्षात ठेवा, प्रकाशित ॲप एक स्नॅपशॉट आहे: काहीतरी दुरुस्त केल्यानंतर पुन्हा प्रकाशित करा. एखाद्या बदलामुळे हे घडले असेल, तर शेवटच्या चांगल्या उत्तरावरील Revert to this point प्रोजेक्ट मागे नेतो. डॉक्समधील Troubleshooting आणि Publish troubleshooting पहा, आणि AI ने बांधलेले ॲप डीबग कसे करावे हे आमचे सामान्य मार्गदर्शकही पहा.

रिकाम्या पेज चेकलिस्ट

• कन्सोलमधील पहिली लाल त्रुटी वाचली
• Network टॅबमध्ये 404 किंवा HTML परत करणाऱ्या .js/.css फाइल्स तपासल्या
• बेस पाथ ॲप जिथे सर्व्ह होते त्याच्याशी जुळतो
• बिल्ड पूर्ण झाले, आणि प्रकाशित होणारे फोल्डर बिल्ड आउटपुट आहे
• सर्व फ्रंटएंड पर्यावरण व्हेरिएबल्स लाईव्ह बिल्डवर सेट केली, मग पुन्हा बिल्ड केले
• क्रॅश दुरुस्त केला, रिकामी आणि नवीन खाती यांसाठीही
• भविष्यातील क्रॅश संदेश दाखवतील यासाठी एरर बाउंड्री आहे
• अज्ञात URL्ससाठी कॅच-ऑल राउट आहे
• हार्ड रिफ्रेश आणि खाजगी विंडोनंतर चाचणी केली

प्रश्न