በድር መተግበሪያዎ ውስጥ ባዶ ነጭ ገጽን እንዴት ማስተካከል

ባዶ ነጭ ገጽ ብዙ ጊዜ ሁለት ነገሮች ማለት ነው፦ የመተግበሪያው 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 ትር ይሂዱ እና ገጹን ያድሱ።

የመጀመሪያውን ቀይ ስህተት ይመልከቱ፤ በኋላ ያሉት ብዙ ጊዜ የጎንዮሽ ውጤቶች ናቸው። ምን እንደሚል መንስኤውን ይጠቁማል፦

ሙሉውን የስህተት ጽሑፍ ይቅዱ፣ የፋይል ስምና የመስመር ቁጥርን ጨምሮ። AI ገንቢ እየተጠቀሙ ከሆነ በቀጥታ ወደ ውይይቱ ይለጥፉት።

ደረጃ 2፡ ፋይሎቹ መጫናቸውን ያረጋግጡ

ወደ Network ትሩ ይሂዱ፣ Disable cacheን ምልክት ያድርጉ፣ እና ያድሱ። ለ.js እና .css ፋይሎች ጥያቄዎችን ይመልከቱ።

• JavaScript ፋይል ላይ ሁኔታ 404፦ ገጹ በሰርቨሩ ላይ የሌለ ፋይል እየጠየቀ ነው።
• ሁኔታ 200 ግን አይነቱ text/html፦ ሰርቨሩ ስክሪፕቱን ሳይሆን ገጽ (ብዙ ጊዜ index.html ራሱ፣ በSPA መመለሻ ምክንያት) መልሷል። ተመሳሳይ ዋና ምክንያት፦ ፋይሉ ገጹ ከሚጠብቀው ቦታ የለም።

የተለመዱ ምክንያቶች፦

የተሳሳተ 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፡ የአካባቢ ተለዋዋጮችን ያረጋግጡ

Frontend መተግበሪያዎች ብዙ ጊዜ እንደ የኤፒአይ URL ወይም የህዝብ ቁልፍ ያሉ ቅንብሮችን በግንባታ ጊዜ ያነባሉ። በቀጥታ ግንባታ ላይ ተለዋዋጭ ከጠፋ፣ እንደ createClient(undefined, undefined) ያለ ኮድ ወዲያው ይወረውራል፣ ገጹም ነጭ ይሆናል።

ማወቅ ያለባቸው ነገሮች፦

• በ Vite ውስጥ በአሳሽ ኮድ ውስጥ የሚገኙት VITE_ ቅድመ-ቅጥያ ያላቸው ተለዋዋጮች ብቻ ናቸው፣ በimport.meta.env.VITE_NAME ይነበባሉ። በ Create React App REACT_APP_ነው፤ በ Next.js NEXT_PUBLIC_ነው።
• እነዚህ እሴቶች በግንባታ ጊዜ ይጋገራሉ። ተለዋዋጭ ከግንባታው በኋላ ማከል ድጋሚ እስኪገነቡና እስኪያሰማሩ ምንም አይሠራም።
• ቅድመ-እይታው ወይም የአካባቢ ማሽኑ የምርት ግንባታው የሌለው .env ፋይል ሊኖረው ይችላል። ተመሳሳዩን ተለዋዋጮች በማስተናገጃው ላይ ያዋቅሩ።
• በእነዚህ ቅድመ-ቅጥያዎች ያለ ማንኛውም ነገር ወደ የህዝብ JavaScript ይገባል። የህዝብ እሴቶችን ብቻ ያስገቡ፣ ሚስጥራዊ ቁልፎችን በፍጹም አይደለም።

ፈጣን ፈተና፦ በኮንሶሉ ስህተት ውስጥ ከቅንብር ስም አጠገብ undefined ይፈልጉ፣ ወይም ይጠይቁ፦

የታተመው መተግበሪያ ባዶ ገጽ ያሳያል። frontend የሚያነበውን እያንዳንዱን የአካባቢ ተለዋዋጭ ዘርዝር፣ በቀጥታ ግንባታው ውስጥ የጠፉ ወይም ባዶ የሆኑትን ፈትሽ፣ እና አንዱ ሲጎድል ባዶ ገጽ ከመስጠት ይልቅ ግልጽ ስህተት እንዲያሳይ አድርግ።

ደረጃ 4፡ ብልሽቱን አስተካክል

ኮንሶሉ መደበኛ የJavaScript ስህተት ካሳየ ኮዱ በመስጠት ጊዜ ተበላሽቷል ማለት ነው። በ AI የተገነቡ መተግበሪያዎች ውስጥ የተለመዱ መንስኤዎች፦

• ውሂቡ ገና አልተጫነም። አንድ ክፍል user ከመድረሱ በፊት user.name ያነባል። መፍትሔው የመጫኛ ሁኔታ ወይም optional chaining (user?.name) ነው።
• ባዶ ውሂብ። አዲስ መለያ ምንም መዝገብ የለውም፣ ኮዱ ግን ዝርዝሩ ቢያንስ አንድ ንጥል እንዳለው ይገምታል።
• ያልተጠበቀ የውሂብ ቅርጽ። ኤፒአይ የስህተት ነገር መለሰ፣ የሚጠበቀውን ዝርዝር ሳይሆን።
• የጠፋ import ፋይል ከተሰየመ ወይም ከተንቀሳቀሰ በኋላ።
• በሰርቨር-ጎን መስጠት ጊዜ የአሳሽ-ብቻ API መጠቀም፣ ለምሳሌ በ Next.js የሰርቨር ክፍል ውስጥ window ወይም localStorage።

ሙሉውን ስህተት፣ ገጹን፣ እና በምን መለያ እንደገቡ ለ AI ይስጡ፦

የዳሽቦርድ ገጹ ለአዲስ ተጠቃሚዎች ባዶ ነው። ኮንሶል፦ TypeError: Cannot read properties of undefined (reading 'map') በProjectList.tsx:18። ለመለያዬ ይሠራል ምክንያቱም ፕሮጀክቶች አሉት። ባዶ መለያ «ገና ፕሮጀክት የለም» እንዲያሳይ አስተካክለው፣ እና አዲስ መለያ በቅድመ-እይታው ፈትሽ።

ደረጃ 5፡ Error boundary ጨምር

በReact አንድ የሚበላሽ ክፍል ሙሉውን መተግበሪያ ሊያነሳ ይችላል፣ ለዚህም ነው ትንሽ ስህተት ሙሉ ባዶ ገጽ የሚያመጣው። Error boundary ከሱ በታች ያሉ የመስጠት ስህተቶችን የሚይዝና በምትኩ መውደቂያ የሚያሳይ ክፍል ነው።

ዋና መንገዶቹን የሚከብ error boundary ጨምር፣ «የሆነ ስህተት ተፈጥሯል» የሚል እና የ 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 ስህተቶችን ካሰማሩ በኋላ እንዴት ማስተካከል ውስጥ ተሸፍኗል።

የተለመዱ ስህተቶች

• የመጨረሻውን ስህተት ማንበብ ከመጀመሪያው ይልቅ። የመጀመሪያው ቀይ መስመር ብዙ ጊዜ መንስኤው ነው።
• የአካባቢ ተለዋዋጮችን ሳይገነቡ ማዋቀር። የFrontend ተለዋዋጮች በግንባታ ጊዜ ተስተካክለዋል።
• በራስዎ መለያ ብቻ መሞከር። ባዶ መለያ ብልሽቶች ከተለመዱት ባዶ-ገጽ መንስኤዎች አንዱ ነው።
• ማሰማራቱ እንደሠራ ማሰብ። ኮዱን ከማረምዎ በፊት የግንባታ መዝገቡን ይፈትሹ።
• ለሁሉም ነገር የአሳሽ መሸጎጫን መውቀስ። Hard refresh በሰከንዶች ያስወግደዋል፤ ገጹ አሁንም ባዶ ከሆነ ሌላ ነገር ነው።

በ Mythex ባዶ ገጾች

ቅድመ-እይታው ባዶ ከሆነ መጀመሪያ መተግበሪያው እየሠራ መሆኑን ያረጋግጡ (Code → terminal ይክፈቱ)፣ ከዚያ ወኪሉ ትክክለኛውን ሰርቨር እንዲጀምር ይጠይቁ፣ በቅድመ-እይታ መሣሪያ አሞሌው ላይ Refreshን ይጫኑ፣ ወይም **/fix**ን ይጠቀሙ። ለባዶ የታተመ URL ሰነዶቹ አንድ ደቂቃ እንዲጠብቁ፣ hard-refresh እንዲያደርጉ፣ ከማተምዎ በፊት የአካባቢ ተለዋዋጮችና ዳታቤዙ መዋቀራቸውን እንዲያረጋግጡ፣ እና የማስተናገጃ ድልድልዎን እንዲፈትሹ ይመክራሉ። የታተመ መተግበሪያ ቅጽበታዊ ቅጂ መሆኑን ያስታውሱ፦ ካስተካከሉ በኋላ እንደገና ያትሙ። ለውጥ ያመጣው ከሆነ፣ በመጨረሻው ጥሩ ምላሽ ላይ Revert to this point ፕሮጀክቱን ወደ ኋላ ይመልሳል። በሰነዶቹ መላ ፍለጋ እና የህትመት መላ ፍለጋ ይመልከቱ፣ እና ለአጠቃላይ መመሪያ የ AI የተገነባ መተግበሪያን እንዴት ማረም ይመልከቱ።

የባዶ ገጽ ማረጋገጫ ዝርዝር

• በኮንሶሉ ውስጥ የመጀመሪያውን ቀይ ስህተት አንብቧል
• በNetwork ትሩ ውስጥ 404 የሚሰጡ ወይም HTML የሚመልሱ .js/.css ፋይሎችን ፈትሿል
• base path መተግበሪያው ከሚቀርብበት ጋር ይዛመዳል
• ግንባታው ተጠናቅቋል፣ የግንባታው ውጤት አቃፊ ነው የሚታተመው
• ሁሉም የFrontend የአካባቢ ተለዋዋጮች በቀጥታ ግንባታ ላይ ተዋቅረዋል፣ ከዚያም እንደገና ተገንብቷል
• ብልሽቱ ተስተካክሏል፣ ባዶ እና አዲስ መለያዎችንም ጨምሮ
• ወደፊት ብልሽቶች መልዕክት እንዲያሳዩ error boundary አለ
• ለማይታወቁ URLዎች ካች-ኦል መንገድ አለ
• በhard refresh እና በግል መስኮት ከተፈተነ በኋላ ተረጋግጧል

ጥያቄዎች