உங்கள் வலை ஆப்பில் வெற்று வெள்ளைப் பக்கத்தை எப்படிச் சரிசெய்வது

வெற்று வெள்ளைப் பக்கம் கிட்டத்தட்ட எப்போதும் இரண்டில் ஒன்றைக் குறிக்கிறது: ஆப்பின் JavaScript எதையும் வரைவதற்கு முன்பே செயலிழந்தது, அல்லது JavaScript சுத்தமாக ஏற்றப்படவில்லை. உலாவி console-ஐத் திறந்து (வலது-கிளிக் → Inspect → Console) முதல் சிவப்புப் பிழையைப் படியுங்கள், பின்னர் ஏற்றத் தவறிய கோப்புகளுக்கு Network tab-ஐப் பாருங்கள். பெரும்பாலான காரணங்கள்: விடுபட்ட environment variable, தவறான base path, முடிவடையாத build, அல்லது ஒரு component-இல் ஏற்படும் செயலிழப்பு.

இந்த வழிகாட்டி React, Vue அல்லது அதுபோன்ற frameworks-ஆல் உருவாக்கப்பட்ட ஒரே பக்க ஆப்களைப் பற்றியது (AI builder-களால் உருவாக்கப்பட்டவை உட்பட), வெற்றுப் பக்கங்கள் அங்குதான் அதிகம் காணப்படுகின்றன.

பக்கம் ஏன் வெள்ளையாக இருக்கிறது

நவீன ஒரே பக்க ஆப் (SPA) உலாவிக்கு கிட்டத்தட்ட வெற்று HTML கோப்பை அனுப்புகிறது, தோராயமாக இப்படி:

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

பின்னர் JavaScript அந்த வெற்று div-க்குள் முழுப் பக்கத்தையும் உருவாக்குகிறது. Script ஏற்றத் தவறினால், அல்லது rendering-க்கு முன் பிழை தந்தால், div வெற்றாகவே இருக்கும், நீங்கள் வெள்ளையைப் பார்க்கிறீர்கள். பக்கம் கண்ணுக்குத் தெரியும்படி "உடைந்துவிட்டது" என்று இல்லை; அது ஒருபோதும் வரையப்படவில்லை.

அதனால்தான் சரிசெய்தல் எப்போதும் பக்கத்திலிருந்து அல்ல, developer tools-இல் இருந்து தொடங்குகிறது.

படி 1: console-ஐப் படியுங்கள்

Developer tools-ஐத் திறவுங்கள்: பக்கத்தில் வலது-கிளிக் செய்து Inspect தேர்ந்தெடுக்கவும், அல்லது F12 அழுத்தவும் (Mac-இல் Cmd+Option+I). Console tab-க்குச் சென்று பக்கத்தை reload செய்யுங்கள்.

முதல் சிவப்புப் பிழையைப் பாருங்கள்; பின்னர் வருபவை பெரும்பாலும் பக்க விளைவுகள். அது சொல்வது காரணத்தைச் சுட்டும்:

கோப்புப் பெயர் மற்றும் வரி எண் உட்பட முழு பிழை உரையையும் நகலெடுங்கள். AI builder பயன்படுத்தினால், அதை நேரடியாக chat-இல் ஒட்டுங்கள்.

படி 2: கோப்புகள் ஏற்றப்பட்டனவா என்று சரிபாருங்கள்

Network tab-ஐத் திறந்து, Disable cache-ஐ tick செய்து reload செய்யுங்கள். .js மற்றும் .css கோப்புகளுக்கான கோரிக்கைகளைப் பாருங்கள்.

• JavaScript கோப்புக்கு Status 404: பக்கம் சர்வரில் இல்லாத ஒரு கோப்பைக் கேட்கிறது.
• Status 200 ஆனால் வகை text/html: சர்வர் script-க்குப் பதிலாக ஒரு பக்கத்தை (பெரும்பாலும் SPA fallback காரணமாக index.html தானே) திருப்பியுள்ளது. மூல காரணம் ஒன்றே: பக்கம் எதிர்பார்க்கும் இடத்தில் கோப்பு இல்லை.

பொதுவான காரணங்கள்:

தவறான base path. ஆப் example.com/app/ போன்ற துணைக் கோப்புறையிலிருந்து வழங்கப்பட்டாலும், /assets/...-இலிருந்து கோப்புகளை ஏற்றும்படி build செய்யப்பட்டிருந்தால், ஒவ்வொரு script கோரிக்கையும் தவறும். Vite-இல் இது vite.config-இல் உள்ள base விருப்பம்; Create React App-இல் இது homepage புலம்; Next.js-இல் basePath. ஆப் உண்மையில் வழங்கப்படும் இடத்துடன் அது பொருந்த வேண்டும்.

பழைய index.html. Build கருவிகள் கோப்புகளுக்கு உள்ளடக்க hash-உடன் பெயரிடுகின்றன, எடுத்துக்காட்டாக index-a1b2c3.js. புதிய deploy-க்குப் பிறகு பழைய கோப்பு இல்லாமல் போகிறது. உலாவி அல்லது CDN பழைய index.html-ஐ இன்னும் cache செய்து வைத்திருந்தால், அது பழைய கோப்பைக் கேட்டு எதுவும் பெறாது. Hard refresh (Cmd+Shift+R அல்லது Ctrl+Shift+R) இதை உறுதிப்படுத்தும். நீண்டகாலத் தீர்வு: hash செய்யப்பட்ட கோப்புகள் நீண்ட காலம் cache ஆகும்போது index.html-ஐ குறுகிய அல்லது cache இல்லாத header-உடன் வழங்குவது.

Build முடியவில்லை அல்லது deploy ஆகவில்லை. Build தோல்வியடைந்தால், ஹோஸ்ட் பழைய அல்லது காலியான output கோப்புறையை வழங்கக்கூடும். பிழைகளுக்கு build log-ஐச் சரிபாருங்கள்.

தவறான கோப்புறை வெளியிடப்பட்டுள்ளது. ஹோஸ்ட் build output-ஐ (பொதுவாக dist அல்லது build) வழங்க வேண்டும், திட்டத்தின் source கோப்புறையை அல்ல. Source-ஐ வழங்கினால், /src/main.tsx-ஐச் சுட்டும் index.html கிடைக்கும், அதை உலாவிகளால் இயக்க முடியாது.

படி 3: environment variables-ஐச் சரிபாருங்கள்

Frontend ஆப்கள் பெரும்பாலும் API URL அல்லது public 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 செய்து redeploy செய்யும் வரை எதுவும் நடக்காது.
• Preview அல்லது உள்ளூர் கணினியில் .env கோப்பு இருக்கலாம், அது production build-க்கு இல்லாமல் போகலாம். அதே variables-ஐ ஹோஸ்டில் அமையுங்கள்.
• இந்த முன்னொட்டுகளுடன் உள்ள எதுவும் public JavaScript-இல் முடியும். பொது மதிப்புகளை மட்டுமே அங்கு வையுங்கள், ஒருபோதும் secret keys-ஐ அல்ல.

ஒரு விரைவான சோதனை: console பிழையில் அமைப்பின் பெயருக்கு அருகில் undefined உள்ளதா என்று தேடுங்கள், அல்லது கேளுங்கள்:

வெளியிடப்பட்ட ஆப் வெற்றுப் பக்கம் காட்டுகிறது. frontend படிக்கும் ஒவ்வொரு environment variable-ஐயும் பட்டியலிடு, நேரடி build-இல் எவை விடுபட்டுள்ளன அல்லது காலியாக உள்ளன என்று சரிபார், ஒன்று விடுபடும்போது வெற்றுப் பக்கத்துக்குப் பதிலாக தெளிவான பிழைச் செய்தியைக் காட்ட ஆப்பை மாற்று.

படி 4: செயலிழப்பைச் சரிசெய்யுங்கள்

Console ஒரு சாதாரண JavaScript பிழையைக் காட்டினால், rendering-இன் போது குறியீடு செயலிழந்தது. AI மூலம் உருவாக்கப்பட்ட ஆப்களில் பொதுவான காரணங்கள்:

• தரவு இன்னும் ஏற்றப்படவில்லை. user வருவதற்கு முன்பே ஒரு component user.name-ஐப் படிக்கிறது. தீர்வு ஒரு ஏற்றுதல் நிலை, அல்லது optional chaining (user?.name).
• காலியான தரவு. புதிய கணக்கில் பதிவுகள் இருக்காது, ஆனால் பட்டியலில் குறைந்தது ஒரு item இருக்கும் என்று குறியீடு கருதுகிறது.
• எதிர்பாராத தரவு வடிவம். குறியீடு எதிர்பார்த்த பட்டியலுக்குப் பதிலாக ஒரு API பிழைப் object-ஐத் திருப்பியது.
• விடுபட்ட import, ஒரு கோப்பு மறுபெயரிடப்பட்ட அல்லது நகர்த்தப்பட்ட பிறகு.
• Server-side rendering-இன் போது உலாவிக்கு மட்டுமான API-யைப் பயன்படுத்துவது, எடுத்துக்காட்டாக Next.js server component-இல் window அல்லது localStorage.

AI-க்கு முழு பிழை, பக்கம், மற்றும் நீங்கள் எந்தக் கணக்கில் உள்நுழைந்திருந்தீர்கள் என்பதைக் கொடுங்கள்:

புதிய பயனர்களுக்கு Dashboard பக்கம் வெற்றாக உள்ளது. Console: TypeError: Cannot read properties of undefined (reading 'map') at ProjectList.tsx:18. என் கணக்கில் வேலை செய்கிறது, அதில் projects உள்ளன. காலிக் கணக்கு "No projects yet" என்று காட்டும்படி சரிசெய், preview-இல் புதிய கணக்கைச் சோதி.

படி 5: ஒரு error boundary சேர்க்கவும்

React-இல், ஒரு செயலிழக்கும் component முழு ஆப்பையும் அகற்றிவிடலாம், அதனால்தான் ஒரு சிறிய பிழை முற்றிலும் வெற்றுப் பக்கத்தை உருவாக்குகிறது. Error boundary என்பது அதற்குக் கீழே உள்ள rendering பிழைகளைப் பிடித்து அதற்குப் பதில் ஒரு மாற்று காட்டும் component.

முக்கிய routes-ஐச் சுற்றி ஒரு error boundary சேர். அது "Something went wrong" என்றும் Reload பொத்தானுடனும் காட்டட்டும், பிழையை console-இல் பதிவு செய்யட்டும். Header மற்றும் navigation அதற்கு வெளியே வைத்திரு, அவை தொடர்ந்து காட்டப்படட்டும்.

இது பிழையைச் சரிசெய்யாது, ஆனால் பார்வையாளர்கள் வெற்றுத் திரைக்குப் பதிலாக ஒரு செய்தியைக் காண்பார்கள், எங்கே உடைந்தது என்று நீங்கள் பார்க்கலாம்.

படி 6: பிழைகள் இல்லை, ஆனால் இன்னும் வெற்று

Console சுத்தமாக இருந்து scripts ஏற்றப்பட்டால்:

• Elements tab-ஐச் சரிபாருங்கள். <div id="root">-க்குள் உள்ளடக்கம் உள்ளதா? ஆம் என்றால் அது rendering ஆகிறது ஆனால் கண்ணுக்குத் தெரியவில்லை: வெள்ளை மீது வெள்ளை உரை, opacity: 0, display: none, அல்லது அதை மறைக்கும் முழுத்திரை உறுப்பு.
• Router-ஐச் சரிபாருங்கள். தற்போதைய URL-உடன் எந்த route-உம் பொருந்தாமல் "not found" route இல்லையென்றால், சில routers எதுவும் காட்டாது. 404 பக்கம் காட்டும் catch-all route சேர்க்கவும்.
• Mount point-ஐச் சரிபாருங்கள். குறியீடு இருக்கும் ஒரு உறுப்பில்தான் mount ஆக வேண்டும். index.html-இல் id="app" இருந்து குறியீடு root-ஐத் தேடினால், எதுவும் தோன்றாது (React பொதுவாக ஒரு பிழையைப் பதிவு செய்யும்).
• உலாவி நீட்டிப்பைச் சரிபாருங்கள். ஒரு private window-இல் முயலுங்கள். Ad blockers சில நேரங்களில் analytics அல்லது ads போன்ற பெயர்களுடைய scripts-ஐத் தடுக்கும்.

பக்கத்தை refresh செய்த பின் மட்டும் வெற்றா?

முகப்புப் பக்கம் வேலை செய்தும் /dashboard-ஐ refresh செய்தால் வெற்றுப் பக்கமோ 404-ஓ காட்டினால், ஆப் routes-க்கு index.html-ஐ அனுப்ப சர்வருக்குத் தெரியாது. அது routing fallback சிக்கல்; deploy செய்த பின் 404 பிழைகளைச் சரிசெய்வது இதை விளக்குகிறது.

பொதுவான தவறுகள்

• முதல் பிழைக்குப் பதிலாகக் கடைசிப் பிழையைப் படிப்பது. முதல் சிவப்பு வரிதான் பொதுவாக காரணம்.
• Build செய்யாமல் environment variables அமைப்பது. Frontend variables build நேரத்தில் நிலையாக்கப்படுகின்றன.
• உங்கள் சொந்தக் கணக்கில் மட்டும் சோதிப்பது. காலிக் கணக்கு செயலிழப்புகள் மிகவும் பொதுவான வெற்றுப் பக்கக் காரணங்களில் ஒன்று.
• Deploy வேலை செய்தது என்று கருதுவது. குறியீட்டை debug செய்வதற்கு முன் build log-ஐச் சரிபாருங்கள்.
• எல்லாவற்றுக்கும் உலாவி cache-ஐக் குறை சொல்வது. Hard refresh அதை வினாடிகளில் நீக்கும்; பக்கம் இன்னும் வெற்றாக இருந்தால், அது வேறு ஏதோ.

Mythex-இல் வெற்றுப் பக்கங்கள்

Preview வெற்றாக இருந்தால், முதலில் ஆப் இயங்குகிறதா என்று சரிபாருங்கள் (Code → terminal திறக்கவும்), பின்னர் சரியான சர்வரைத் தொடங்கும்படி Mythex-இடம் கேளுங்கள், preview toolbar-இல் Refresh கிளிக் செய்யுங்கள், அல்லது /fix பயன்படுத்துங்கள். வெற்று வெளியிடப்பட்ட URL-க்கு, ஆவணங்கள் ஒரு நிமிடம் காத்திருந்து hard-refresh செய்யச் சொல்கின்றன; வெளியிடுவதற்கு முன் env vars மற்றும் தரவுத்தளம் அமைக்கப்பட்டதை உறுதிசெய்யுங்கள்; உங்கள் hosting வரம்பையும் சரிபாருங்கள். வெளியிடப்பட்ட ஆப் ஒரு நகல் என்பதை நினைவில் கொள்ளுங்கள்: எதையாவது சரிசெய்த பின் மீண்டும் வெளியிடுங்கள். ஒரு மாற்றம் காரணமாக இருந்தால், கடைசியாக நல்ல பதிலில் Revert to this point திட்டத்தை முந்தைய நிலைக்குத் திருப்பும். ஆவணங்களில் Troubleshooting மற்றும் Publish troubleshooting பாருங்கள், மேலும் எங்கள் பொதுவான AI-உருவாக்கிய ஆப்பை debug செய்வது வழிகாட்டியையும் பாருங்கள்.

வெற்றுப் பக்கச் சரிபார்ப்புப் பட்டியல்

• Console-இல் முதல் சிவப்புப் பிழையைப் படித்தாயிற்று
• 404 தரும் அல்லது HTML திருப்பும் .js/.css கோப்புகளுக்கு Network tab-ஐச் சரிபார்த்தாயிற்று
• Base path ஆப் வழங்கப்படும் இடத்துடன் பொருந்துகிறது
• Build முடிந்தது, வெளியிடப்படுவது build output கோப்புறையே
• எல்லா frontend environment variables-உம் நேரடி build-இல் அமைக்கப்பட்டு, பின்னர் மீண்டும் build செய்யப்பட்டன
• காலி மற்றும் புதிய கணக்குகள் உட்பட செயலிழப்பு சரிசெய்யப்பட்டது
• எதிர்கால செயலிழப்புகள் செய்தி காட்ட error boundary உள்ளது
• அறியாத URL-களுக்கு catch-all route உள்ளது
• Hard refresh-க்குப் பின்னும் private window-இலும் சோதிக்கப்பட்டது

கேள்விகள்