ವೆಬ್ ಆಪ್‌ನಲ್ಲಿ ಖಾಲಿ ಬಿಳಿ ಪುಟವನ್ನು ಸರಿಪಡಿಸುವುದು ಹೇಗೆ
ಬಿಳಿ ಖಾಲಿ ಪುಟ ಬಹುತೇಕ ಯಾವಾಗಲೂ ಎರಡರಲ್ಲಿ ಒಂದನ್ನು ಸೂಚಿಸುತ್ತದೆ: ಆಪ್‌ನ JavaScript ಏನನ್ನೂ ಚಿತ್ರಿಸುವ ಮೊದಲೇ ಕ್ರ್ಯಾಶ್ ಆಗಿದೆ, ಅಥವಾ JavaScript ಎಂದಿಗೂ ಲೋಡ್ ಆಗಿಲ್ಲ. ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ತೆರೆಯಿರಿ (ರೈಟ್-ಕ್ಲಿಕ್ → Inspect → Console) ಮತ್ತು ಮೊದಲ ಕೆಂಪು ದೋಷವನ್ನು ಓದಿ, ನಂತರ Network ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಲೋಡ್ ಆಗದ ಫೈಲ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಹೆಚ್ಚಿನ ಕಾರಣಗಳು: ಕಾಣೆಯಾದ ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್, ತಪ್ಪಾದ base path, ಪೂರ್ಣಗೊಳ್ಳದ ಬಿಲ್ಡ್, ಅಥವಾ ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿನ ಕ್ರ್ಯಾಶ್.
ಈ ಮಾರ್ಗದರ್ಶಿ 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 ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ ಪುಟವನ್ನು ರಿಲೋಡ್ ಮಾಡಿ.
ಮೊದಲ ಕೆಂಪು ದೋಷವನ್ನು ನೋಡಿ; ನಂತರದವು ಸಾಮಾನ್ಯವಾಗಿ ಅದರ ಪರಿಣಾಮಗಳು. ಅದು ಹೇಳುವುದು ಕಾರಣವನ್ನು ಸೂಚಿಸುತ್ತದೆ:
| ಕನ್ಸೋಲ್ ಸಂದೇಶ (ಸಾಮಾನ್ಯ ರೂಪ) | ಅರ್ಥ | ಎಲ್ಲಿಗೆ ಹೋಗಬೇಕು |
|---|---|---|
Cannot read properties of undefined (reading '...') | ಕೋಡ್ ನಿರೀಕ್ಷಿಸಿದ ಡೇಟಾ ಇರಲಿಲ್ಲ | ಹಂತ 4 |
... is not defined / ... is not a function | ಕಾಣೆಯಾದ import, ವೇರಿಯಬಲ್ ಅಥವಾ ಸೆಟ್ಟಿಂಗ್ | ಹಂತ 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, ಅಥವಾ ಅಂತಹುದು | ಒಂದು ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್ ಖಾಲಿ | ಹಂತ 3 |
Access to fetch ... has been blocked by CORS policy | ಬೇರೆ ಡೊಮೇನ್‌ಗೆ ವಿನಂತಿ ತಡೆಯಲ್ಪಟ್ಟಿದೆ | CORS ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸುವುದು ನೋಡಿ |
| ಯಾವುದೇ ದೋಷವಿಲ್ಲ | ರೆಂಡರ್ ಆಗಿದೆ ಆದರೆ ಏನೂ ತೋರುತ್ತಿಲ್ಲ, ಅಥವಾ CSS ಅದನ್ನು ಮರೆಮಾಡುತ್ತಿದೆ | ಹಂತ 6 |
ಪೂರ್ಣ ದೋಷ ಪಠ್ಯವನ್ನು ನಕಲಿಸಿ, ಫೈಲ್ ಹೆಸರು ಮತ್ತು ಸಾಲು ಸಂಖ್ಯೆಯೊಂದಿಗೆ. AI ಬಿಲ್ಡರ್ ಬಳಸುತ್ತಿದ್ದರೆ, ಅದನ್ನು ನೇರವಾಗಿ ಚಾಟ್‌ನಲ್ಲಿ ಅಂಟಿಸಿ.
ಹಂತ 2: ಫೈಲ್‌ಗಳು ಲೋಡ್ ಆಗಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
Network ಟ್ಯಾಬ್ ತೆರೆಯಿರಿ, Disable cache ಟಿಕ್ ಮಾಡಿ, ಮತ್ತು ರಿಲೋಡ್ ಮಾಡಿ. .js ಮತ್ತು .css ಫೈಲ್‌ಗಳ ವಿನಂತಿಗಳನ್ನು ನೋಡಿ.
- JavaScript ಫೈಲ್‌ನಲ್ಲಿ ಸ್ಥಿತಿ 404: ಪುಟ ಸರ್ವರ್‌ನಲ್ಲಿ ಇಲ್ಲದ ಫೈಲ್ ಕೇಳುತ್ತಿದೆ.
- ಸ್ಥಿತಿ 200 ಆದರೆ ಪ್ರಕಾರ
text/html: ಸರ್ವರ್ ಸ್ಕ್ರಿಪ್ಟ್ ಬದಲು ಒಂದು ಪುಟವನ್ನು (ಸಾಮಾನ್ಯವಾಗಿ SPA ಫಾಲ್‌ಬ್ಯಾಕ್‌ನಿಂದಾಗಿindex.htmlಸ್ವತಃ) ಹಿಂತಿರುಗಿಸಿದೆ. ಮೂಲ ಕಾರಣ ಒಂದೇ: ಫೈಲ್ ಪುಟ ನಿರೀಕ್ಷಿಸುವ ಸ್ಥಳದಲ್ಲಿಲ್ಲ.
ಸಾಮಾನ್ಯ ಕಾರಣಗಳು:
ತಪ್ಪಾದ base path. ಆಪ್ ಉಪ-ಫೋಲ್ಡರ್‌ನಿಂದ, ಉದಾಹರಣೆಗೆ example.com/app/, ಸರ್ವ್ ಆಗುತ್ತಿದ್ದರೆ ಆದರೆ /assets/... ನಿಂದ ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಬಿಲ್ಡ್ ಆಗಿದ್ದರೆ, ಪ್ರತಿ ಸ್ಕ್ರಿಪ್ಟ್ ವಿನಂತಿ ತಪ್ಪುತ್ತದೆ. Vite ನಲ್ಲಿ ಇದು vite.config ನಲ್ಲಿರುವ base ಆಯ್ಕೆ; Create React App ನಲ್ಲಿ homepage ಕ್ಷೇತ್ರ; Next.js ನಲ್ಲಿ basePath. ಇದು ಆಪ್ ನಿಜವಾಗಿ ಸರ್ವ್ ಆಗುವ ಸ್ಥಳಕ್ಕೆ ಹೊಂದಬೇಕು.
ಹಳೆಯ index.html. ಬಿಲ್ಡ್ ಟೂಲ್‌ಗಳು ಫೈಲ್‌ಗಳಿಗೆ index-a1b2c3.js ನಂತಹ ವಿಷಯ-ಹ್ಯಾಶ್ ಹೆಸರುಗಳನ್ನು ನೀಡುತ್ತವೆ. ಹೊಸ ಡಿಪ್ಲಾಯ್ ನಂತರ ಹಳೆಯ ಫೈಲ್ ಮಾಯವಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ಅಥವಾ CDN ಇನ್ನೂ ಹಳೆಯ index.html ಅನ್ನು ಸಂಗ್ರಹಿಸಿಟ್ಟಿದ್ದರೆ, ಅದು ಹಳೆಯ ಫೈಲ್ ಕೇಳುತ್ತದೆ ಮತ್ತು ಏನೂ ಸಿಗುವುದಿಲ್ಲ. Hard refresh (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ಓದುತ್ತದೆ. ಪರಿಹಾರ: ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ, ಅಥವಾ optional chaining (user?.name). - ಖಾಲಿ ಡೇಟಾ. ಹೊಸ ಖಾತೆಯಲ್ಲಿ ದಾಖಲೆಗಳಿರುವುದಿಲ್ಲ, ಮತ್ತು ಪಟ್ಟಿಯಲ್ಲಿ ಕನಿಷ್ಠ ಒಂದು ಐಟಂ ಇದೆ ಎಂದು ಕೋಡ್ ಊಹಿಸುತ್ತದೆ.
- ನಿರೀಕ್ಷಿತವಲ್ಲದ ಡೇಟಾ ಆಕಾರ. API ಕೋಡ್ ನಿರೀಕ್ಷಿಸಿದ ಪಟ್ಟಿಯ ಬದಲು ದೋಷ ಆಬ್ಜೆಕ್ಟ್ ಹಿಂತಿರುಗಿಸಿದೆ.
- ಕಾಣೆಯಾದ import, ಫೈಲ್ ಹೆಸರು ಬದಲಾದ ಅಥವಾ ಸ್ಥಳಾಂತರಗೊಂಡ ನಂತರ.
- ಸರ್ವರ್-ಬದಿ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಬ್ರೌಸರ್-ಮಾತ್ರ API ಬಳಕೆ, ಉದಾಹರಣೆಗೆ Next.js ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ
windowಅಥವಾlocalStorage.
AI ಗೆ ಪೂರ್ಣ ದೋಷ, ಪುಟ, ಮತ್ತು ನೀವು ಯಾವ ಖಾತೆಯಲ್ಲಿ ಲಾಗಿನ್ ಆಗಿದ್ದಿರಿ ಎಂಬುದನ್ನು ನೀಡಿ:
Dashboard ಪುಟ ಹೊಸ ಬಳಕೆದಾರರಿಗೆ ಖಾಲಿಯಾಗಿದೆ. ಕನ್ಸೋಲ್:
ProjectList.tsx:18ನಲ್ಲಿTypeError: Cannot read properties of undefined (reading 'map'). ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿರುವ ನನ್ನ ಖಾತೆಗೆ ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಖಾಲಿ ಖಾತೆಗೆ "No projects yet" ತೋರುವಂತೆ ಸರಿಪಡಿಸಿ, ಮತ್ತು ಪ್ರಿವ್ಯೂನಲ್ಲಿ ಹೊಸ ಖಾತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.
ಹಂತ 5: Error boundary ಸೇರಿಸಿ
React ನಲ್ಲಿ ಒಂದು ಕ್ರ್ಯಾಶ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್ ಇಡೀ ಆಪ್ ಅನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಬಹುದು, ಅದಕ್ಕಾಗಿಯೇ ಸಣ್ಣ ಬಗ್ ಕೂಡ ಸಂಪೂರ್ಣ ಖಾಲಿ ಪುಟ ನೀಡುತ್ತದೆ. Error boundary ಎಂಬುದು ತನ್ನ ಕೆಳಗಿನ ರೆಂಡರಿಂಗ್ ದೋಷಗಳನ್ನು ಹಿಡಿದು ಬದಲಿಗೆ ಪರ್ಯಾಯವನ್ನು ತೋರಿಸುವ ಕಾಂಪೊನೆಂಟ್.
ಮುಖ್ಯ ರೂಟ್‌ಗಳ ಸುತ್ತ error boundary ಸೇರಿಸಿ, ಅದು "Something went wrong" ಮತ್ತು Reload ಬಟನ್ ತೋರಿಸಲಿ ಮತ್ತು ದೋಷವನ್ನು ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಮಾಡಲಿ. ಹೆಡರ್ ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಹೊರಗಿರಲಿ, ಇದರಿಂದ ಅವು ಇನ್ನೂ ಕಾಣಿಸುತ್ತವೆ.
ಇದು ಬಗ್ ಅನ್ನು ಸರಿಪಡಿಸುವುದಿಲ್ಲ, ಆದರೆ ಸಂದರ್ಶಕರಿಗೆ ಖಾಲಿ ಪರದೆಯ ಬದಲು ಸಂದೇಶ ಕಾಣುತ್ತದೆ, ಮತ್ತು ನೀವು ಎಲ್ಲಿ ಮುರಿಯಿತು ಎಂದು ನೋಡುತ್ತೀರಿ.
ಹಂತ 6: ದೋಷಗಳಿಲ್ಲ, ಆದರೂ ಖಾಲಿ
ಕನ್ಸೋಲ್ ಸ್ವಚ್ಛವಾಗಿದ್ದು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಲೋಡ್ ಆಗಿದ್ದರೆ:
- Elements ಟ್ಯಾಬ್ ಪರಿಶೀಲಿಸಿ.
<div id="root">ಒಳಗೆ ವಿಷಯವಿದೆಯೇ? ಹಾಗಿದ್ದರೆ ಅದು ರೆಂಡರ್ ಆಗುತ್ತಿದೆ ಆದರೆ ಕಾಣುತ್ತಿಲ್ಲ: ಬಿಳಿ ಮೇಲೆ ಬಿಳಿ ಪಠ್ಯ,opacity: 0,display: none, ಅಥವಾ ಅದನ್ನು ಮುಚ್ಚುವ ಪೂರ್ಣ-ಪರದೆ ಅಂಶ. - Router ಪರಿಶೀಲಿಸಿ. ಪ್ರಸ್ತುತ URL ಗೆ ಯಾವ ರೂಟ್ ಹೊಂದುವುದಿಲ್ಲ ಮತ್ತು "not found" ರೂಟ್ ಇಲ್ಲದಿದ್ದರೆ, ಕೆಲವು ರೂಟರ್‌ಗಳು ಏನೂ ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ. 404 ಪುಟ ತೋರಿಸುವ ಕ್ಯಾಚ್-ಆಲ್ ರೂಟ್ ಸೇರಿಸಿ.
- Mount point ಪರಿಶೀಲಿಸಿ. ಕೋಡ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶಕ್ಕೆ mount ಆಗಬೇಕು.
index.htmlನಲ್ಲಿid="app"ಇದ್ದು ಕೋಡ್rootಹುಡುಕಿದರೆ, ಏನೂ ಕಾಣುವುದಿಲ್ಲ (ಮತ್ತು React ಸಾಮಾನ್ಯವಾಗಿ ದೋಷ ಲಾಗ್ ಮಾಡುತ್ತದೆ). - ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಪರಿಶೀಲಿಸಿ. ಖಾಸಗಿ ವಿಂಡೋ ಪ್ರಯತ್ನಿಸಿ. ಜಾಹೀರಾತು ಬ್ಲಾಕರ್‌ಗಳು ಕೆಲವೊಮ್ಮೆ
analyticsಅಥವಾadsನಂತಹ ಹೆಸರುಗಳ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ತಡೆಯುತ್ತವೆ.
ಪುಟ ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಖಾಲಿಯೇ?
ಮುಖ್ಯ ಪುಟ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೂ /dashboard ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ಖಾಲಿ ಪುಟ ಅಥವಾ 404 ತೋರಿಸಿದರೆ, ಆಪ್ ರೂಟ್‌ಗಳಿಗೆ index.html ಕಳುಹಿಸಬೇಕೆಂದು ಸರ್ವರ್‌ಗೆ ತಿಳಿದಿಲ್ಲ. ಅದು ರೂಟಿಂಗ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಸಮಸ್ಯೆ, ಇದನ್ನು ಡಿಪ್ಲಾಯ್ ನಂತರ 404 ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸುವುದು ಹೇಗೆ ನಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ.
ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
- ಮೊದಲ ಕೆಂಪು ಸಾಲಿನ ಬದಲು ಕೊನೆಯ ದೋಷವನ್ನು ಓದುವುದು. ಮೊದಲ ಕೆಂಪು ಸಾಲು ಸಾಮಾನ್ಯವಾಗಿ ಕಾರಣ.
- ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಮರುಬಿಲ್ಡ್ ಮಾಡದೆ ಹೊಂದಿಸುವುದು. ಫ್ರಂಟ್‌ಎಂಡ್ ವೇರಿಯಬಲ್‌ಗಳು ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲೇ ನಿಗದಿಯಾಗುತ್ತವೆ.
- ನಿಮ್ಮ ಸ್ವಂತ ಖಾತೆಯಲ್ಲಿ ಮಾತ್ರ ಪರೀಕ್ಷಿಸುವುದು. ಖಾಲಿ-ಖಾತೆ ಕ್ರ್ಯಾಶ್‌ಗಳು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಖಾಲಿ-ಪುಟ ಕಾರಣಗಳಲ್ಲಿ ಒಂದು.
- ಡಿಪ್ಲಾಯ್ ಯಶಸ್ವಿಯಾಯಿತೆಂದು ಭಾವಿಸುವುದು. ಕೋಡ್ ಡೀಬಗ್ ಮಾಡುವ ಮೊದಲು ಬಿಲ್ಡ್ ಲಾಗ್ ಪರಿಶೀಲಿಸಿ.
- ಎಲ್ಲದಕ್ಕೂ ಬ್ರೌಸರ್ ಕ್ಯಾಶ್ ಅನ್ನು ದೂಷಿಸುವುದು. Hard refresh ಅದನ್ನು ಸೆಕೆಂಡುಗಳಲ್ಲಿ ತಳ್ಳಿಹಾಕುತ್ತದೆ; ಪುಟ ಇನ್ನೂ ಖಾಲಿಯಾಗಿದ್ದರೆ, ಕಾರಣ ಬೇರೆ.
Mythex ನಲ್ಲಿ ಖಾಲಿ ಪುಟಗಳು
ಪ್ರಿವ್ಯೂ ಖಾಲಿಯಾಗಿದ್ದರೆ, ಮೊದಲು ಆಪ್ ರನ್ ಆಗುತ್ತಿದೆಯೇ ಪರಿಶೀಲಿಸಿ (Code → terminal ತೆರೆಯಿರಿ), ನಂತರ Mythex ಗೆ ಸರಿಯಾದ ಸರ್ವರ್ ಆರಂಭಿಸಲು ಕೇಳಿ, ಪ್ರಿವ್ಯೂ ಟೂಲ್‌ಬಾರ್‌ನಲ್ಲಿ Refresh ಕ್ಲಿಕ್ ಮಾಡಿ, ಅಥವಾ /fix ಬಳಸಿ. ಪ್ರಕಟಿತ URL ಖಾಲಿಯಾಗಿದ್ದರೆ, ಡಾಕ್ಸ್ ಒಂದು ನಿಮಿಷ ಕಾದು hard refresh ಮಾಡಲು ಸೂಚಿಸುತ್ತದೆ, ಪ್ರಕಟಿಸುವ ಮೊದಲು ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಡೇಟಾಬೇಸ್ ಹೊಂದಿಸಲ್ಪಟ್ಟಿವೆಯೇ ದೃಢಪಡಿಸಿ, ಮತ್ತು ಹೋಸ್ಟಿಂಗ್ ಮಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಿ. ಪ್ರಕಟಿತ ಆಪ್ ಒಂದು ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಎಂದು ನೆನಪಿಡಿ: ಏನಾದರೂ ಸರಿಪಡಿಸಿದ ನಂತರ ಮತ್ತೆ ಪ್ರಕಟಿಸಿ. ಒಂದು ಬದಲಾವಣೆ ಇದಕ್ಕೆ ಕಾರಣವಾಗಿದ್ದರೆ, ಕೊನೆಯ ಒಳ್ಳೆಯ ಉತ್ತರದ ಮೇಲಿನ Revert to this point ಯೋಜನೆಯನ್ನು ಹಿಂದಕ್ಕೆ ತರುತ್ತದೆ. ಡಾಕ್ಸ್‌ನಲ್ಲಿ Troubleshooting ಮತ್ತು Publish troubleshooting ನೋಡಿ, ಮತ್ತು ನಮ್ಮ ಸಾಮಾನ್ಯ ಮಾರ್ಗದರ್ಶಿ AI ನಿರ್ಮಿತ ಆಪ್ ಅನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು ಹೇಗೆ ನೋಡಿ.
ಖಾಲಿ ಪುಟ ಪರಿಶೀಲನಾ ಪಟ್ಟಿ
- ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ಮೊದಲ ಕೆಂಪು ದೋಷವನ್ನು ಓದಿದೆ
- Network ಟ್ಯಾಬ್‌ನಲ್ಲಿ 404 ಆಗುವ ಅಥವಾ HTML ಹಿಂತಿರುಗಿಸುವ
.js/.cssಫೈಲ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿದೆ - Base path ಆಪ್ ಸರ್ವ್ ಆಗುವ ಸ್ಥಳಕ್ಕೆ ಹೊಂದುತ್ತದೆ
- ಬಿಲ್ಡ್ ಪೂರ್ಣಗೊಂಡಿದೆ, ಮತ್ತು ಪ್ರಕಟವಾಗುವುದು ಬಿಲ್ಡ್ ಔಟ್‌ಪುಟ್ ಫೋಲ್ಡರ್
- ಎಲ್ಲಾ ಫ್ರಂಟ್‌ಎಂಡ್ ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್‌ಗಳು ಲೈವ್ ಬಿಲ್ಡ್‌ನಲ್ಲಿ ಹೊಂದಿಸಲ್ಪಟ್ಟಿವೆ, ನಂತರ ಮರುಬಿಲ್ಡ್ ಆಗಿದೆ
- ಕ್ರ್ಯಾಶ್ ಸರಿಪಡಿಸಲ್ಪಟ್ಟಿದೆ, ಖಾಲಿ ಮತ್ತು ಹೊಸ ಖಾತೆಗಳಿಗೂ ಸೇರಿ
- ಭವಿಷ್ಯದ ಕ್ರ್ಯಾಶ್‌ಗಳು ಸಂದೇಶ ತೋರಿಸಲು error boundary ಇದೆ
- ಗುರುತಿಸದ URLಗಳಿಗೆ ಕ್ಯಾಚ್-ಆಲ್ ರೂಟ್ ಇದೆ
- Hard refresh ಮತ್ತು ಖಾಸಗಿ ವಿಂಡೋದಲ್ಲಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ
ಪ್ರಶ್ನೆಗಳು
ನನ್ನ React ಆಪ್ ಖಾಲಿ ಬಿಳಿ ಪುಟ ತೋರಿಸುತ್ತಿದೆ ಏಕೆ?
ಸಾಮಾನ್ಯವಾಗಿ JavaScript ಏನನ್ನೂ ಚಿತ್ರಿಸುವ ಮೊದಲೇ ಕ್ರ್ಯಾಶ್ ಆಗಿರುವುದರಿಂದ, ಅಥವಾ JavaScript ಫೈಲ್ ಲೋಡ್ ಆಗದ ಕಾರಣ. ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ತೆರೆಯಿರಿ: ಅಲ್ಲಿನ ಕೆಂಪು ದೋಷ ಯಾವುದು ಮತ್ತು ಎಲ್ಲಿ ಸಂಭವಿಸಿತು (ಫೈಲ್ ಮತ್ತು ಸಾಲು) ಎಂದು ತಿಳಿಸುತ್ತದೆ.
ಸ್ಥಳೀಯವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ಡಿಪ್ಲಾಯ್ ಮಾಡಿದ ನಂತರ ಖಾಲಿ ಪುಟ ಏಕೆ?
ಸಾಮಾನ್ಯ ಕಾರಣಗಳು: ಲೈವ್ ಬಿಲ್ಡ್‌ಗೆ ಎಂದಿಗೂ ಹೊಂದಿಸದ ಎನ್ವಯರ್ನ್‌ಮೆಂಟ್ ವೇರಿಯಬಲ್‌ಗಳು, ತಪ್ಪು ಬೇಸ್ ಪಾತ್‌ನಿಂದ ಕೇಳಲಾದ JavaScript ಮತ್ತು CSS ಫೈಲ್‌ಗಳು, ಮತ್ತು ಇನ್ನು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ಫೈಲ್‌ಗಳನ್ನು ಸೂಚಿಸುವ ಹಳೆಯ ಸಂಗ್ರಹಿತ index.html.
'Failed to load module script' ಎಂದರೆ ಏನು?
ಬ್ರೌಸರ್ ಒಂದು JavaScript ಫೈಲ್ ಕೇಳಿತು, ಆದರೆ ಬದಲಾಗಿ HTML ಪುಟ ಬಂತು — ಸಾಮಾನ್ಯವಾಗಿ ಸೈಟ್‌ನ index.html ಅಥವಾ ದೋಷ ಪುಟ. ಫೈಲ್‌ನ ಮಾರ್ಗ ತಪ್ಪಾಗಿದೆ ಅಥವಾ ಸರ್ವರ್‌ನಲ್ಲಿ ಫೈಲ್ ಇಲ್ಲ, ಆದ್ದರಿಂದ ಬಿಲ್ಡ್ ಔಟ್‌ಪುಟ್ ಮತ್ತು ಆಪ್‌ನ base path ಸೆಟ್ಟಿಂಗ್ ಪರಿಶೀಲಿಸಿ.
ಒಂದು ಬಗ್ ಇಡೀ ಪುಟವನ್ನು ಖಾಲಿ ಮಾಡುವುದನ್ನು ತಡೆಯುವುದು ಹೇಗೆ?
Error boundary ಸೇರಿಸಿ. React ನಲ್ಲಿ error boundary ಎಂದರೆ ತನ್ನ ಕೆಳಗಿನ ಭಾಗದಲ್ಲಿ ರೆಂಡರಿಂಗ್ ದೋಷಗಳನ್ನು ಹಿಡಿದು, ಎಲ್ಲವನ್ನೂ ತೆಗೆದುಹಾಕುವ ಬದಲು ಪರ್ಯಾಯ ಸಂದೇಶ ತೋರಿಸುವ ಕಾಂಪೊನೆಂಟ್.