Web app ရှိ ဖြူဖတ်ဖတ် blank page ကို ပြင်နည်း

Blank white page ဆိုသည်မှာ အမြဲတမ်း အရာနှစ်ခုထဲမှ တစ်ခု ဖြစ်သည်: app ၏ JavaScript က ဘာမျှ မဆွဲမီ crash ဖြစ်သွားခြင်း၊ သို့မဟုတ် JavaScript လုံးဝ မ load ခြင်း။ Browser console ကို ဖွင့်ပါ (right-click → Inspect → Console) ပြီး ပထမ အနီရောင် error ကို ဖတ်ပါ၊ ထို့နောက် မ load ဖြစ်သော ဖိုင်များအတွက် Network tab ကို စစ်ပါ။ အများစုမှာ environment variable ပျောက်ခြင်း၊ base path မှား၊ build မပြီးခြင်း၊ သို့မဟုတ် component တစ်ခု၏ crash တို့ ဖြစ်သည်။

ဤလမ်းညွှန်သည် React၊ Vue သို့မဟုတ် အလားတူ framework များဖြင့် တည်ဆောက်ထားသော single-page app များ (AI builder များဖြင့် ပြုလုပ်ထားသည်များ အပါအဝင်) အတွက် ဖြစ်ပြီး blank page အများဆုံး ဖြစ်သည့်နေရာ ဖြစ်သည်။

စာမျက်နှာ ဖြူနေရခြင်း အကြောင်း

ခေတ်မီ single-page app (SPA) သည် browser သို့ အလွန်လွတ်သော HTML ဖိုင်ကို ပို့သည်၊ အောက်ပါအတိုင်း ခန့်မှန်းနိုင်သည်:

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

ထို့နောက် JavaScript က ထို ဗလာ div အတွင်း စာမျက်နှာတစ်ခုလုံးကို တည်ဆောက်သည်။ script load မဖြစ်လျှင် သို့မဟုတ် render မလုပ်မီ error တက်လျှင် div သည် ဗလာ ဆက်နေပြီး ဖြူသာ မြင်ရသည်။ စာမျက်နှာသည် မြင်သာသော နည်းဖြင့် "ပျက်" နေခြင်း မဟုတ်ပါ၊ ဘယ်တော့မှ မဆွဲခဲ့ခြင်းသာ ဖြစ်သည်။

ဤကြောင့် ပြင်ဆင်ခြင်းသည် အမြဲ developer tools မှ စတင်သည်၊ စာမျက်နှာကိုယ်တိုင်မှ မဟုတ်ပါ။

အဆင့် ၁: console ကို ဖတ်ပါ

Developer tools ကို ဖွင့်ပါ: စာမျက်နှာပေါ် right-click လုပ်ပြီး Inspect ရွေးပါ၊ သို့မဟုတ် F12 နှိပ်ပါ (Mac တွင် Cmd+Option+I)။ Console tab သို့သွားပြီး စာမျက်နှာကို reload လုပ်ပါ။

နောက်ဆုံး error မဟုတ်ဘဲ ပထမ အနီရောင် error ကို ကြည့်ပါ; နောက်ထပ် error များမှာ မကြာခဏ ဆက်စပ်ဖြစ်ပေါ်မှုများ ဖြစ်သည်။ ၎င်းပြောသည်များက အကြောင်းကို ညွှန်ပြသည်:

File အမည်နှင့် line number ပါသော error စာသား အပြည့်အစုံကို ကော်ပီကူးပါ။ AI builder သုံးနေလျှင် chat တွင် တိုက်ရိုက် ကူးထည့်ပါ။

အဆင့် ၂: ဖိုင်များ load ဖြစ်မဖြစ် စစ်ပါ

Network tab ကို ဖွင့်ပြီး Disable cache ကို အမှန်ခြစ်ကာ reload လုပ်ပါ။ .js နှင့် .css ဖိုင် request များကို ကြည့်ပါ။

• JavaScript ဖိုင်တွင် Status 404: စာမျက်နှာက server ပေါ်တွင် မရှိသော ဖိုင်ကို တောင်းနေသည်။
• Status 200 ဖြစ်သော်လည်း type က text/html: server က script အစား စာမျက်နှာ (မကြာခဏ index.html ကိုယ်တိုင်၊ SPA fallback ကြောင့်) ပြန်ခဲ့သည်။ အကြောင်းတူ: ဖိုင်သည် စာမျက်နှာ မျှော်သော နေရာတွင် မရှိ။

အဖြစ်များသော အကြောင်းများ:

Base path မှား။ App ကို example.com/app/ ဟူသော sub-folder မှ ပြသနေသော်လည်း /assets/... မှ ဖိုင်များ load ရန် build လုပ်ထားလျှင် script request အားလုံး လွဲသွားသည်။ Vite တွင် ၎င်းသည် vite.config ရှိ base option ဖြစ်သည်; Create React App တွင် homepage field ဖြစ်သည်; Next.js တွင် basePath ဖြစ်သည်။ app ကို ပြသသော နေရာနှင့် ကိုက်ညီရမည်။

ဟောင်း index.html။ Build tool များက ဖိုင်များကို content hash ပါသော အမည်ပေးသည်၊ ဥပမာ index-a1b2c3.js။ deploy အသစ်ပြီးနောက် ဟောင်းဖိုင် ပျောက်သွားသည်။ browser သို့မဟုတ် CDN က ဟောင်း index.html ကို cache ထားလျှင် ဟောင်းဖိုင်ကို တောင်းပြီး ဘာမျှ မရပါ။ Hard refresh (Cmd+Shift+R သို့မဟုတ် Ctrl+Shift+R) က ၎င်းကို အတည်ပြုပေးသည်။ ရေရှည် ဖြေရှင်းနည်းမှာ index.html ကို တိုတို သို့မဟုတ် cache မပါသော header ဖြင့် serve လုပ်ပြီး hash ပါသော ဖိုင်များကို ကြာကြာ cache ထားခြင်း ဖြစ်သည်။

Build မပြီးခဲ့ သို့မဟုတ် deploy မလုပ်ခဲ့။ Build ပျက်ခဲ့လျှင် host က ဟောင်း သို့မဟုတ် ဗလာ output folder ကို ပြနိုင်သည်။ Build log တွင် error များ ရှိမရှိ စစ်ပါ။

မှားသော folder ကို publish လုပ်ထား။ Host က build output (များသောအားဖြင့် dist သို့မဟုတ် build) ကို ပြသရမည်၊ project ၏ source folder ကို မဟုတ်ပါ။ Source ကို ပြသလျှင် /src/main.tsx ကို ညွှန်သော index.html ရမည်၊ ၎င်းကို browser က run မနိုင်ပါ။

အဆင့် ၃: Environment variable များကို စစ်ပါ

Frontend app များသည် မကြာခဏ API URL သို့မဟုတ် public key ကဲ့သို့ setting များကို build အချိန်တွင် ဖတ်သည်။ live build တွင် variable ပျောက်နေလျှင် createClient(undefined, undefined) ကဲ့သို့ code က ချက်ချင်း throw လုပ်ပြီး စာမျက်နှာ ဖြူသွားသည်။

သိထားရမည့်အရာများ:

• Vite တွင် VITE_ ဖြင့် စသော variable များကိုသာ browser code တွင် ရနိုင်ပြီး import.meta.env.VITE_NAME ဟု ဖတ်သည်။ Create React App တွင် REACT_APP_ ဖြစ်သည်; Next.js တွင် NEXT_PUBLIC_ ဖြစ်သည်။
• ဤတန်ဖိုးများကို app build လုပ်ချိန်တွင် ထည့်ထားသည်။ Build ပြီးမှ variable ထည့်လျှင် rebuild နှင့် redeploy မလုပ်မချင်း ဘာမျှ မပြောင်းပါ။
• Preview သို့မဟုတ် local စက်တွင် .env ဖိုင် ရှိနိုင်ပြီး production build တွင် မရှိနိုင်ပါ။ တူညီသော variable များကို host ပေါ်တွင် သတ်မှတ်ပါ။
• ဤ prefix ပါသော အရာအားလုံး public JavaScript ထဲ ရောက်သည်။ public တန်ဖိုးများသာ ထည့်ပါ၊ secret key များကို ဘယ်တော့မှ မထည့်ပါနှင့်။

မြန်သော စမ်းသပ်ချက်: console error ထဲ setting အမည်အနီး undefined ကို ရှာပါ၊ သို့မဟုတ် မေးပါ:

Published app က blank page ပြနေသည်။ Frontend ဖတ်သော environment variable အားလုံးကို စာရင်းလုပ်ပြီး live build တွင် မည်သည်တို့ ပျောက်နေသလဲ သို့မဟုတ် ဗလာလဲ စစ်ဆေးပါ၊ ပျောက်နေလျှင် blank page အစား ရှင်းလင်းသော error မက်ဆေ့ချ် ပြသအောင် ပြင်ပါ။

အဆင့် ၄: Crash ကို ပြင်ပါ

Console တွင် ပုံမှန် JavaScript error ပြလျှင် code သည် render လုပ်နေစဉ် crash ဖြစ်ခဲ့သည်။ AI-built app များတွင် အဖြစ်များသော အကြောင်းများ:

• Data မ load သေး။ Component က user မရောက်ခင် user.name ကို ဖတ်သည်။ ပြင်နည်းမှာ loading state သို့မဟုတ် optional chaining (user?.name)။
• Data လွတ်နေခြင်း။ Account အသစ်တွင် record မရှိ၊ code က list တွင် item အနည်းဆုံး တစ်ခု ရှိသည်ဟု ယူဆသည်။
• မမျှော်လင့်သော data ပုံစံ။ API က list အစား error object ပြန်ခဲ့သည်။
• Import ပျောက်နေခြင်း ဖိုင်အမည်ပြောင်း သို့မဟုတ် ရွှေ့ပြီးနောက်။
• Server-side rendering အတွင်း browser-only API သုံးခြင်း၊ ဥပမာ Next.js server component တွင် window သို့မဟုတ် localStorage။

AI သို့ error အပြည့်အစုံ၊ စာမျက်နှာ၊ နှင့် ဘယ် account ဖြင့် log in ဝင်ထားသလဲ ပေးပါ:

Dashboard စာမျက်နှာသည် အသုံးပြုသူအသစ်များအတွက် blank ဖြစ်နေသည်။ Console: TypeError: Cannot read properties of undefined (reading 'map') at ProjectList.tsx:18။ ကျွန်ုပ် account ဖြင့် အလုပ်လုပ်သည်၊ ၎င်းတွင် project များ ရှိသည်။ Account ဗလာ ဖြစ်လျှင် "No projects yet" ပြအောင် ပြင်ပြီး preview တွင် account အသစ်ဖြင့် စစ်ဆေးပါ။

အဆင့် ၅: Error boundary ထည့်ပါ

React တွင် crash ဖြစ်သော component တစ်ခုက app တစ်ခုလုံးကို ဖြုတ်ချနိုင်သည်၊ ထို့ကြောင့် အမှားသေးသေးလေးက စာမျက်နှာ လုံးဝ ဗလာ ဖြစ်စေသည်။ Error boundary ဆိုသည်မှာ အောက်ရှိ render error များကို ဖမ်းပြီး fallback ပြသပေးသော component ဖြစ်သည်။

အဓိက route များ ပတ်လည်တွင် "Something went wrong" ပြပြီး Reload ခလုတ်ပါသော error boundary ထည့်ပါ၊ error ကို console သို့ log လုပ်ပါ။ Header နှင့် navigation ကို boundary အပြင်တွင် ထားပါ၊ ၎င်းတို့ ဆက် render ဖြစ်စေရန်။

ဤသည်က bug ကို မပြင်ပေးသော်လည်း ဝင်ကြည့်သူများက ဖြူသော မျက်နှာပြင်အစား မက်ဆေ့ချ်ကို မြင်ရပြီး သင်က ဘယ်နေရာ ပျက်ခဲ့သလဲ မြင်နိုင်သည်။

အဆင့် ၆: Error မရှိဘဲ ဖြူနေသေးလျှင်

Console ရှင်းနေပြီး script များ load ဖြစ်လျှင်:

• Elements tab ကို စစ်ပါ။ <div id="root"> အတွင်း content ရှိသလား? ရှိလျှင် render ဖြစ်နေသော်လည်း မြင်ရခြင်း မရှိပါ: အဖြူပေါ်အဖြူစာ၊ opacity: 0၊ display: none၊ သို့မဟုတ် မျက်နှာပြင်တစ်ခုလုံး ဖုံးထားသော element။
• Router ကို စစ်ပါ။ လက်ရှိ URL နှင့် ကိုက်ညီသော route မရှိပြီး "not found" route မရှိလျှင် router အချို့က ဘာမျှ မပြပါ။ 404 စာမျက်နှာ ပြသော catch-all route ထည့်ပါ။
• Mount point ကို စစ်ပါ။ Code က ရှိသော element ထဲ mount လုပ်ရမည်။ index.html တွင် id="app" ရှိပြီး code က root ကို ရှာလျှင် ဘာမျှ မပေါ်ပါ (React က မကြာခဏ error log ပြသည်)။
• Browser extension ကို စစ်ပါ။ Private window တွင် စမ်းကြည့်ပါ။ Ad blocker အချို့က analytics သို့မဟုတ် ads ကဲ့သို့ အမည်ရှိ script များကို ပိတ်ဆို့တတ်သည်။

Refresh လုပ်မှသာ ဖြူသွားလျှင်?

ပင်မစာမျက်နှာ အလုပ်လုပ်သော်လည်း /dashboard ကို refresh လုပ်လျှင် blank သို့မဟုတ် 404 ဖြစ်လျှင် server က app route များအတွက် index.html ပို့ရမည်ဆိုတာ မသိပါ။ ၎င်းသည် routing fallback ပြဿနာ ဖြစ်ပြီး deploy ပြီးနောက် 404 error များ ပြင်နည်း တွင် ဖုံးထားသည်။

အဖြစ်များသော အမှားများ

• ပထမဆုံး error အစား နောက်ဆုံး error ကို ဖတ်ခြင်း။ ပထမ အနီရောင် မျဉ်းသည် များသောအားဖြင့် အကြောင်းဖြစ်သည်။
• Rebuild မလုပ်ဘဲ environment variable သတ်မှတ်ခြင်း။ Frontend variable များကို build အချိန်တွင် ပြင်ဆင်ထားသည်။
• သင့် account ဖြင့်သာ စမ်းခြင်း။ Account ဗလာ crash များသည် blank page အဖြစ်အများဆုံး အကြောင်းများထဲမှ တစ်ခု ဖြစ်သည်။
• Deploy အောင်မြင်ခဲ့သည်ဟု ယူဆခြင်း။ Code ကို debug မလုပ်မီ build log ကို စစ်ပါ။
• Browser cache ကို အကြောင်းအားလုံး အပြစ်တင်ခြင်း။ Hard refresh က စက္ကန့်ပိုင်းအတွင်း ဖယ်ရှားပေးသည်; စာမျက်နှာ ဆက်ဖြူနေလျှင် တခြား အရာ ဖြစ်သည်။

Mythex ရှိ blank page များ

Preview ဖြူနေလျှင် app run နေမနေ ဦးစွာ စစ်ပါ (Code → terminal ကို ဖွင့်ပါ)၊ ထို့နောက် မှန်ကန်သော server ကို စတင်ရန် Mythex ကို တောင်းဆိုပါ၊ preview toolbar ရှိ Refresh ကို နှိပ်ပါ၊ သို့မဟုတ် /fix ကို သုံးပါ။ Published URL ဖြူနေလျှင် docs က တစ်မိနစ်စောင့်ပြီး hard-refresh လုပ်ရန်၊ publish မလုပ်မီ env var နှင့် database ကို သတ်မှတ်ပြီးဖြစ်ကြောင်း အတည်ပြုရန်နှင့် hosting ခွင့်ပြုချက်ကို စစ်ရန် အကြံပြုသည်။ Published app သည် snapshot ဖြစ်ကြောင်း မှတ်ထားပါ: ပြင်ပြီးနောက် ထပ် publish လုပ်ပါ။ ပြောင်းလဲမှုတစ်ခုက ဖြစ်စေခဲ့လျှင် နောက်ဆုံး ကောင်းသော reply ပေါ်ရှိ Revert to this point က project ကို ပြန်ပြောင်းပေးသည်။ Troubleshooting နှင့် docs ရှိ Publish troubleshooting ကို ကြည့်ပါ၊ ထို့အပြင် ယေဘုယျ လမ်းညွှန် AI-built app ကို debug လုပ်နည်း ကိုလည်း ကြည့်ပါ။

Blank page checklist

• Console ရှိ ပထမ အနီရောင် error ကို ဖတ်ပြီး
• Network tab တွင် 404 ဖြစ်သော သို့မဟုတ် HTML ပြန်သော .js/.css ဖိုင်များကို စစ်ပြီး
• Base path သည် app ကို ပြသသော နေရာနှင့် ကိုက်ညီသည်
• Build ပြီးပြီး publish လုပ်သော output folder မှာ မှန်ကန်သည်
• Frontend environment variable အားလုံး live build တွင် သတ်မှတ်ပြီး rebuild လုပ်ပြီး
• Crash ပြင်ပြီး၊ အသစ်နှင့် ဗလာ account များအတွက်ပါ
• အနာဂတ် crash များက မက်ဆေ့ချ် ပြစေရန် error boundary ရှိသည်
• မသိသော URL များအတွက် catch-all route ရှိသည်
• Hard refresh နှင့် private window တွင် စမ်းပြီးပြီ

မေးခွန်းများ