ඔබේ React වෙබ් අඩවිය හදිසි ලෙස සුදු තිරයකට පත්වීම, පරිශීලකයන් "ඇප් එක අහෝසි වුණා" කියා පැමිණීම ඔබට අමුතු සිදුවීමක් විය හැක. මේ වගේ ගැටලුව බොහෝවිට පරිච්ඡේදනය කළ නොහැකි "Heisenbug" එකක් ලෙස හැඳින්වේ. එහි මූලික හේතුව බ්රවුසරයේ Google Translate වැනි ස්වයංක්රීය පරිවර්තකයයි.
Google Translate වෙබ් පිටුවේ පෙළ තෝරා ගැනීමට, එම පෙළ අලුත් ටැග් වලට වැටුප් කරයි. එමෙන්ම, React පද්ධතිය DOM (Document Object Model) සමඟ සම්බන්ධ වන විට, එය මූලිකවම තැනූ ගොඩනැගිල්ල (fiber tree) පදනම් කරගෙන ක්රියා කරයි. පරිවර්තකය පෙළ අලුත් කොටස් වලට හරවා දීමෙන්, React හි පසුබැසි DOM node එක වෙනස් වීමත් සමඟ, "insertBefore" හෝ "removeChild" වැනි ක්රියාවලීන් අසාර්ථක වෙයි. එම නිසා React හදිසියේම දෝෂයක් එල්ල කර, සම්පූර්ණ කොම්පොනන්ට් ගසක් අහිමි වීම හෝ සුදු තිරයක් පෙන්වීම සිදු වේ.
ගැටලුවේ තාක්ෂණික විස්තරය
React එකේ අභ්යන්තර fiber tree එක පරිශීලක UI එකේ සෑම අංගයක් කුමක්දැයි සටහන් කරයි. Google Translate එක තේරුම් ගැනීමට, පෙළ node එක බෙදා, ටැග් වලින් වටා හරවයි. එවිට, React පසුපසින් තබා තිබූ මුල් text node එක ඉවත් වෙයි. ඊළඟ UI update එකේ React පරණ node එක තවත් නොමැති බවට පසුබැසි දෝෂයක් එල්ල කරයි. මෙය "NotFoundError: Failed to execute 'insertBefore' on 'Node'" වැනි පණිවුඩයක් ලෙස පෙනේ.
ප්රතිකාර මාර්ග
- Translate API භාවිතා කිරීම: පිටුවේ ස්වයංක්රීය පරිවර්තනය අක්රිය කර, Google Translate API හරහා සර්වර් පාර්ශවයෙන් පරිවර්තනය ලබා ගන්න.
- React.StrictMode හෝ Error Boundary යොදා ගැනීම: අහෝසි වීම වැළැක්වීමට දෝෂ අලවනය කිරීම.
- DOM mutations වලට සලකුණු කිරීම: useEffect හෝ useLayoutEffect තුළ DOM වෙනස්කම් සලකුණු කර, React සදහා පාලනය කරගන්න.
- translate="no" attribute එකක් එක් කිරීම: පරිවර්තනය නොකළ යුතු අංශ වලට මෙම ගුණය එක් කර, Translate engine එකට හසුරවන්න.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණික පරිසරය දියුණු වෙමින් පවතින අතර, බොහෝ සංවර්ධකයින් React භාවිතා කරයි. අන්තර්ජාලයෙහි බහු භාෂා පරිශීලකයන් ගණනාවක් ඇති නිසා, Google Translate වැනි උපාංග භාවිතය සාමාන්යය. මෙම ගැටලුව හඳුනාගැනීම, ශ්රී ලංකාවේ සිසුන්, සංවර්ධකයින් සහ ව්යාපාරිකයින්ට පහත ප්රයෝජන ලබා දේ:
- ඉදිරියේදී බහු-භාෂා UI නිර්මාණය කරන විට, අලෙවිකරණය සහ පරිශීලක අත්දැකීම අඩුවීම වැළැක්වීමට උපදෙස් ලබා ගත හැක.
- දෝෂ හඳුනා ගැනීමේ ක්රමවේද (Error Boundary) පිළිබඳ දැනුම වැඩිදියුණු කර, වැඩි විශ්වාසනීය වෙබ් යෙදුම් නිර්මාණය කළ හැක.
- ස්ථානයීය ව්යාපාර සඳහා, පාරිභෝගිකයින්ගේ භාෂා පසුබැසීම මත අඩු පරිශීලක අත්දැකීමක් නොමැතිව සේවා සැපයීමේ හැකියාව ලැබේ.
අවසන් වශයෙන්, මෙම ගැටලුව ඔබේ React යෙදුමට අහෝසි වීමක් නොව, බ්රවුසර පරිවර්තකයන් සමඟ අන්තර්ක්රියා කරන විට සිදුවන ස්වාභාවික ගැටලුවක් බව තේරුම් ගත යුතුය. ඉහත සඳහන් පියවර අනුගමනය කිරීමෙන්, ඔබේ යෙදුම ස්ථායිව, බහු-භාෂා පරිශීලකයන්ටත් අඩු ප්රතිචාරයක් ලබා දීමට හැකි වේ.
