വെബ് ആപ്പിലെ വെളുത്ത ശൂന്യ പേജ് എങ്ങനെ പരിഹരിക്കാം

വെളുത്ത ശൂന്യ പേജ് സാധാരണയായി രണ്ട് കാര്യങ്ങളിൽ ഒന്നാണ് അർത്ഥമാക്കുന്നത്: ആപ്പിന്റെ JavaScript ഒന്നും വരയ്ക്കുന്നതിന് മുൻപ് crash ആയി, അല്ലെങ്കിൽ JavaScript ഒട്ടും ലോഡ് ആയിട്ടില്ല. ബ്രൗസർ console തുറക്കുക (വലത് ക്ലിക്ക് → Inspect → Console), ആദ്യത്തെ ചുവന്ന പിശക് വായിക്കുക, പിന്നെ പരാജയപ്പെട്ട ഫയലുകൾക്കായി Network ടാബ് പരിശോധിക്കുക. മിക്ക കാരണങ്ങളും ഒന്നുകിൽ നഷ്ടമായ എൻവയോൺമെന്റ് വേരിയബിൾ, തെറ്റായ base path, പൂർത്തിയാകാത്ത ബിൽഡ്, അല്ലെങ്കിൽ ഒരൊറ്റ കമ്പോണന്റിലെ crash ആണ്.

ഈ ഗൈഡ് React, Vue അല്ലെങ്കിൽ സമാന ഫ്രെയിംവർക്കുകളിൽ നിർമ്മിച്ച സിംഗിൾ-പേജ് ആപ്പുകളെ കുറിച്ചാണ് (AI ബിൽഡറുകൾ നിർമ്മിച്ചവ ഉൾപ്പെടെ), ശൂന്യ പേജുകൾ ഏറ്റവും സാധാരണമായിരിക്കുന്നത് അവിടെയാണ്.

പേജ് വെളുത്തിരിക്കുന്നത് എന്തുകൊണ്ട്

ആധുനിക സിംഗിൾ-പേജ് ആപ്പ് (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 ടാബിൽ പോയി പേജ് reload ചെയ്യുക.

ആദ്യത്തെ ചുവന്ന പിശക് നോക്കുക; പിന്നീടുള്ളവ പലപ്പോഴും അതിന്റെ പാർശ്വഫലങ്ങളാണ്. അത് പറയുന്നത് കാരണത്തിലേക്ക് ചൂണ്ടുന്നു:

മുഴുവൻ പിശക് വാചകം പകർത്തുക, ഫയൽ പേരും വരി നമ്പറും ഉൾപ്പെടെ. ഒരു AI ബിൽഡർ ഉപയോഗിക്കുന്നെങ്കിൽ നേരിട്ട് ചാറ്റിൽ ഒട്ടിക്കുക.

ഘട്ടം 2: ഫയലുകൾ ലോഡ് ആയോ എന്ന് പരിശോധിക്കുക

Network ടാബ് തുറന്ന്, Disable cache ടിക്ക് ചെയ്ത്, reload ചെയ്യുക. .js, .css ഫയലുകളുടെ അഭ്യർത്ഥനകൾ നോക്കുക.

• JavaScript ഫയലിന് സ്റ്റാറ്റസ് 404: പേജ് സെർവറിൽ ഇല്ലാത്ത ഒരു ഫയൽ ആവശ്യപ്പെടുന്നു.
• സ്റ്റാറ്റസ് 200 പക്ഷേ തരം text/html: സ്ക്രിപ്റ്റിന് പകരം സെർവർ ഒരു പേജ് (പലപ്പോഴും index.html തന്നെ, SPA fallback കാരണം) തിരിച്ചു നൽകി. മൂലകാരണം ഒന്നുതന്നെ: പേജ് പ്രതീക്ഷിക്കുന്നിടത്ത് ഫയൽ ഇല്ല.

സാധാരണ കാരണങ്ങൾ:

തെറ്റായ base path. ആപ്പ് example.com/app/ എന്ന ഉപ-ഫോൾഡറിൽ സേവനം ചെയ്യുന്നു, പക്ഷേ /assets/...-ൽ നിന്ന് ഫയലുകൾ ലോഡ് ചെയ്യാനാണ് നിർമ്മിച്ചത്, അതിനാൽ എല്ലാ സ്ക്രിപ്റ്റ് അഭ്യർത്ഥനകളും തെറ്റുന്നു. Vite-ൽ ഇത് vite.config-ലെ base ഓപ്ഷനാണ്; Create React App-ൽ homepage ഫീൽഡ്; Next.js-ൽ basePath. ആപ്പ് യഥാർത്ഥത്തിൽ സേവനം ചെയ്യുന്ന സ്ഥലവുമായി അത് ഒത്തുപോകണം.

പഴകിയ index.html. ബിൽഡ് ടൂളുകൾ ഫയലുകൾക്ക് ഉള്ളടക്ക ഹാഷുള്ള പേരുകൾ നൽകുന്നു, ഉദാഹരണത്തിന് index-a1b2c3.js. പുതിയ deploy-ന് ശേഷം പഴയ ഫയൽ ഇല്ലാതാകുന്നു. ബ്രൗസറോ CDN-ഓ പഴയ index.html ഇപ്പോഴും cache ചെയ്തു വെച്ചിട്ടുണ്ടെങ്കിൽ, അത് പഴയ ഫയൽ ആവശ്യപ്പെടുന്നു, ഒന്നും കിട്ടുന്നില്ല. Hard refresh (Cmd+Shift+R അല്ലെങ്കിൽ Ctrl+Shift+R) ഇത് സ്ഥിരീകരിക്കും. ദീർഘകാല പരിഹാരം, ഹാഷ് ചെയ്ത ഫയലുകൾ ദീർഘനേരം cache ചെയ്യുമ്പോൾ index.html ചെറിയതോ cache ഇല്ലാത്തതോ ആയ header-ഓടെ നൽകുക എന്നതാണ്.

ബിൽഡ് പൂർത്തിയായില്ല അല്ലെങ്കിൽ deploy ചെയ്തില്ല. ബിൽഡ് പരാജയപ്പെട്ടാൽ ഹോസ്റ്റ് പഴയതോ ശൂന്യമായതോ ആയ ഔട്ട്പുട്ട് ഫോൾഡർ നൽകുന്നുണ്ടാകാം. ബിൽഡ് ലോഗിൽ പിശകുകൾ പരിശോധിക്കുക.

തെറ്റായ ഫോൾഡർ publish ചെയ്തിരിക്കുന്നു. ഹോസ്റ്റ് ബിൽഡ് ഔട്ട്പുട്ടാണ് (സാധാരണയായി 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_.
• ഈ മൂല്യങ്ങൾ ആപ്പ് ബിൽഡ് ചെയ്യുമ്പോൾ ഉൾച്ചേർക്കപ്പെടുന്നു. ബിൽഡിന് ശേഷം ഒരു വേരിയബിൾ ചേർത്താൽ, വീണ്ടും ബിൽഡ് ചെയ്ത് deploy ചെയ്യുന്നതുവരെ ഒന്നും മാറില്ല.
• പ്രിവ്യൂവിനോ ലോക്കൽ മെഷീനോ ഒരു .env ഫയൽ ഉണ്ടാകാം, അത് പ്രൊഡക്ഷൻ ബിൽഡിന് ഇല്ലാതിരിക്കാം. അതേ വേരിയബിളുകൾ ഹോസ്റ്റിൽ സജ്ജമാക്കുക.
• ഈ പ്രിഫിക്സുകളുള്ള എന്തും പബ്ലിക് JavaScript-ൽ എത്തുന്നു. പബ്ലിക് മൂല്യങ്ങൾ മാത്രം അവിടെ വയ്ക്കുക, ഒരിക്കലും secret keys വയ്ക്കരുത്.

ഒരു പെട്ടെന്നുള്ള പരീക്ഷണം: കൺസോൾ പിശകിൽ ഒരു സെറ്റിംഗ് പേരിനടുത്തുള്ള undefined തിരയുക, അല്ലെങ്കിൽ ചോദിക്കുക:

പ്രസിദ്ധീകരിച്ച ആപ്പ് ശൂന്യ പേജ് കാണിക്കുന്നു. ഫ്രണ്ട് എൻഡ് വായിക്കുന്ന ഓരോ എൻവയോൺമെന്റ് വേരിയബിളും പട്ടികപ്പെടുത്തുക, തത്സമയ ബിൽഡിൽ ഏതൊക്കെ കാണാതെയോ ശൂന്യമായോ ഉണ്ടെന്ന് പരിശോധിക്കുക, ഒന്നും കാണാതിരിക്കുമ്പോൾ ശൂന്യ പേജിന് പകരം വ്യക്തമായ പിശക് സന്ദേശം കാണിക്കുക.

ഘട്ടം 4: crash പരിഹരിക്കുക

Console-ൽ സാധാരണ JavaScript പിശക് കാണിക്കുന്നെങ്കിൽ, റെൻഡർ ചെയ്യുമ്പോൾ കോഡ് crash ചെയ്തു. AI നിർമ്മിച്ച ആപ്പുകളിലെ സാധാരണ കാരണങ്ങൾ:

• ഡാറ്റ ഇതുവരെ ലോഡ് ആയിട്ടില്ല. user എത്തുന്നതിന് മുൻപ് ഒരു കമ്പോണന്റ് user.name വായിക്കുന്നു. പരിഹാരം ഒരു loading അവസ്ഥയോ optional chaining (user?.name) ആണ്.
• ശൂന്യ ഡാറ്റ. പുതിയ അക്കൗണ്ടിന് റെക്കോർഡുകൾ ഇല്ല, എന്നാൽ ലിസ്റ്റിൽ കുറഞ്ഞത് ഒരു ഇനമെങ്കിലുമുണ്ടെന്ന് കോഡ് കരുതുന്നു.
• പ്രതീക്ഷിക്കാത്ത ഡാറ്റാ ഘടന. ഒരു API പ്രതീക്ഷിച്ച ലിസ്റ്റിന് പകരം ഒരു പിശക് ഒബ്ജക്റ്റ് തിരിച്ചു നൽകി.
• കാണാതായ import, ഒരു ഫയൽ പേര് മാറ്റുകയോ നീക്കുകയോ ചെയ്തതിന് ശേഷം.
• Server-side റെൻഡറിംഗ് സമയത്ത് ബ്രൗസർ-മാത്രം API ഉപയോഗിക്കൽ, ഉദാഹരണത്തിന് Next.js സെർവർ കമ്പോണന്റിൽ window അല്ലെങ്കിൽ localStorage.

AI-ക്ക് മുഴുവൻ പിശകും പേജും നിങ്ങൾ ഏത് അക്കൗണ്ടിലാണ് ലോഗിൻ ചെയ്തിരുന്നത് എന്നതും നൽകുക:

ഡാഷ്ബോർഡ് പേജ് പുതിയ ഉപയോക്താക്കൾക്ക് ശൂന്യമാണ്. Console: TypeError: Cannot read properties of undefined (reading 'map') ProjectList.tsx:18-ൽ. എന്റെ അക്കൗണ്ടിന് പ്രോജക്റ്റുകളുള്ളതിനാൽ അത് പ്രവർത്തിക്കുന്നു. ശൂന്യ അക്കൗണ്ടിൽ "No projects yet" കാണിക്കുന്ന രീതിയിൽ ശരിയാക്കുക, പ്രിവ്യൂയിൽ ഒരു പുതിയ അക്കൗണ്ട് പരീക്ഷിക്കുക.

ഘട്ടം 5: ഒരു error boundary ചേർക്കുക

React-ൽ ഒരൊറ്റ crash ആകുന്ന കമ്പോണന്റ് മുഴുവൻ ആപ്പിനെ അൺമൗണ്ട് ചെയ്യാം, അതുകൊണ്ടാണ് ചെറിയ ബഗ് പൂർണ്ണമായി ശൂന്യമായ പേജ് ഉണ്ടാക്കുന്നത്. error boundary എന്നത് അതിന് താഴെയുള്ള റെൻഡറിംഗ് പിശകുകൾ പിടിച്ച് പകരം fallback കാണിക്കുന്ന ഒരു കമ്പോണന്റാണ്.

പ്രധാന റൂട്ടുകൾക്ക് ചുറ്റും "Something went wrong" എന്ന് കാണിക്കുന്നതും Reload ബട്ടണുള്ളതും console-ൽ പിശക് ലോഗ് ചെയ്യുന്നതുമായ ഒരു error boundary ചേർക്കുക. ഹെഡറും നാവിഗേഷനും അതിന് പുറത്ത് വയ്ക്കുക, അവ റെൻഡർ ആകുന്നത് തുടരട്ടെ.

അത് ബഗ് പരിഹരിക്കുന്നില്ല, പക്ഷേ സന്ദർശകർ ശൂന്യ സ്ക്രീനിന് പകരം ഒരു സന്ദേശം കാണുന്നു, എവിടെയാണ് തകർന്നതെന്ന് നിങ്ങൾക്ക് കാണാം.

ഘട്ടം 6: പിശകില്ല, പക്ഷേ ഇപ്പോഴും ശൂന്യം

Console വൃത്തിയാണെങ്കിലും സ്ക്രിപ്റ്റുകൾ ലോഡ് ആകുന്നെങ്കിൽ:

• Elements ടാബ് പരിശോധിക്കുക. <div id="root">-നുള്ളിൽ ഉള്ളടക്കമുണ്ടോ? ഉണ്ടെങ്കിൽ റെൻഡർ ആകുന്നുണ്ട്, പക്ഷേ അദൃശ്യമാണ്: വെളുപ്പിൽ വെള്ള വാചകം, opacity: 0, display: none, അല്ലെങ്കിൽ അതിനെ മൂടുന്ന ഒരു മുഴുവൻ സ്ക്രീൻ എലമെന്റ്.
• റൂട്ടർ പരിശോധിക്കുക. നിലവിലെ URL-മായി ഒരു റൂട്ടും ചേരുന്നില്ല, "not found" റൂട്ടും ഇല്ലെങ്കിൽ ചില റൂട്ടറുകൾ ഒന്നും റെൻഡർ ചെയ്യില്ല. 404 പേജ് കാണിക്കുന്ന ഒരു catch-all റൂട്ട് ചേർക്കുക.
• Mount പോയിന്റ് പരിശോധിക്കുക. കോഡ് നിലവിലുള്ള ഒരു എലമെന്റിലാണ് mount ചെയ്യേണ്ടത്. index.html-ൽ id="app" ഉണ്ടെങ്കിലും കോഡ് root തിരയുന്നെങ്കിൽ ഒന്നും പ്രത്യക്ഷപ്പെടില്ല (React സാധാരണയായി ഒരു പിശക് ലോഗ് ചെയ്യും).
• ബ്രൗസർ എക്സ്റ്റൻഷൻ പരിശോധിക്കുക. ഒരു private വിൻഡോയിൽ പരീക്ഷിക്കുക. analytics അല്ലെങ്കിൽ ads പോലുള്ള പേരുകളുള്ള സ്ക്രിപ്റ്റുകളെ ആഡ് ബ്ലോക്കറുകൾ ചിലപ്പോൾ തടയാറുണ്ട്.

പേജ് refresh ചെയ്തതിന് ശേഷം മാത്രം ശൂന്യമാകുന്നുണ്ടോ?

ഹോം പേജ് പ്രവർത്തിക്കുന്നു, പക്ഷേ /dashboard refresh ചെയ്താൽ ശൂന്യ പേജോ 404-ഓ കാണുന്നെങ്കിൽ, ആപ്പ് റൂട്ടുകൾക്ക് index.html അയക്കണമെന്ന് സെർവറിന് അറിയില്ല. അത് 404 പിശകുകൾ deploy ചെയ്ത ശേഷം എങ്ങനെ പരിഹരിക്കാം എന്നതിൽ വിശദീകരിച്ചിരിക്കുന്ന ഒരു റൂട്ടിംഗ് fallback പ്രശ്നമാണ്.

സാധാരണ തെറ്റുകൾ

• അവസാനത്തെ പിശക് വായിക്കുന്നത്, ആദ്യത്തേത് വായിക്കാതിരിക്കുന്നത്. ആദ്യത്തെ ചുവന്ന വരിയാണ് സാധാരണയായി കാരണം.
• ബിൽഡ് ചെയ്യാതെ എൻവയോൺമെന്റ് വേരിയബിളുകൾ സജ്ജമാക്കുന്നത്. ഫ്രണ്ട് എൻഡ് വേരിയബിളുകൾ ബിൽഡ് സമയത്താണ് ഉറയ്ക്കുന്നത്.
• സ്വന്തം അക്കൗണ്ടിൽ മാത്രം പരീക്ഷിക്കുന്നത്. ശൂന്യ അക്കൗണ്ടിലെ crash-കളാണ് ഏറ്റവും സാധാരണ ശൂന്യ-പേജ് കാരണങ്ങളിലൊന്ന്.
• Deploy പ്രവർത്തിച്ചു എന്ന് കരുതുന്നത്. കോഡ് ഡീബഗ് ചെയ്യുന്നതിന് മുൻപ് ബിൽഡ് ലോഗ് പരിശോധിക്കുക.
• എല്ലാത്തിനും ബ്രൗസർ cache-നെ കുറ്റപ്പെടുത്തുന്നത്. Hard refresh ഇത് സെക്കൻഡുകൾക്കുള്ളിൽ ഒഴിവാക്കും; ഇപ്പോഴും ശൂന്യമാണെങ്കിൽ അത് മറ്റെന്തോ ആണ്.

Mythex-ലെ ശൂന്യ പേജുകൾ

Preview ശൂന്യമാണെങ്കിൽ, ആദ്യം ആപ്പ് പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക (Code → terminal തുറക്കുക), പിന്നെ ശരിയായ സെർവർ ആരംഭിക്കാൻ Mythex-നോട് ആവശ്യപ്പെടുക, പ്രിവ്യൂ ടൂൾബാറിലെ Refresh ക്ലിക്ക് ചെയ്യുക, അല്ലെങ്കിൽ /fix ഉപയോഗിക്കുക. ശൂന്യമായ പ്രസിദ്ധീകരിച്ച URL-ന്, ഒരു മിനിറ്റ് കാത്ത് hard-refresh ചെയ്യാൻ ഡോക്സ് നിർദ്ദേശിക്കുന്നു; publish ചെയ്യുന്നതിന് മുൻപ് env vars-ഉം ഡാറ്റാബേസും സജ്ജമാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക, നിങ്ങളുടെ ഹോസ്റ്റിംഗ് പരിധി പരിശോധിക്കുക. പ്രസിദ്ധീകരിച്ച ആപ്പ് ഒരു സ്നാപ്ഷോട്ടാണെന്ന് ഓർക്കുക: എന്തെങ്കിലും ശരിയാക്കിയ ശേഷം വീണ്ടും publish ചെയ്യണം. ഒരു മാറ്റമാണ് കാരണമെങ്കിൽ, അവസാന നല്ല reply-യിൽ Revert to this point പ്രോജക്റ്റിനെ പിന്നോട്ട് കൊണ്ടുപോകും. Troubleshooting, ഡോക്സിലെ Publish troubleshooting എന്നിവ കാണുക, പിന്നെ പൊതുവായ AI നിർമ്മിച്ച ആപ്പ് ഡീബഗ് ചെയ്യുന്നത് ഗൈഡും.

വെളുത്ത പേജ് ചെക്ക്‌ലിസ്റ്റ്

• Console-ലെ ആദ്യത്തെ ചുവന്ന പിശക് വായിച്ചു
• 404 ആകുന്നതോ HTML തിരിച്ചു നൽകുന്നതോ ആയ .js/.css ഫയലുകൾക്കായി Network ടാബ് പരിശോധിച്ചു
• Base path ആപ്പ് സേവനം ചെയ്യുന്ന സ്ഥലവുമായി ഒത്തുപോകുന്നു
• ബിൽഡ് പൂർത്തിയായി, ബിൽഡ് ഔട്ട്പുട്ട് ഫോൾഡറാണ് publish ചെയ്യുന്നത്
• എല്ലാ ഫ്രണ്ട് എൻഡ് എൻവയോൺമെന്റ് വേരിയബിളുകളും തത്സമയ ബിൽഡിൽ സജ്ജം, പിന്നെ വീണ്ടും ബിൽഡ് ചെയ്തു
• ശൂന്യവും പുതിയതുമായ അക്കൗണ്ടുകൾക്കായി crash പരിഹരിച്ചു
• ഭാവിയിലെ crash-കൾ സന്ദേശം കാണിക്കാൻ error boundary സ്ഥാപിച്ചു
• അറിയാത്ത URL-കൾക്കായി catch-all റൂട്ട്
• Hard refresh-ന് ശേഷവും private വിൻഡോയിലും പരീക്ഷിച്ചു

ചോദ്യങ്ങൾ