10 अक्टूबर, 2018 को, हमारी टीम ने रिएक्ट नेटिव पर एप्लिकेशन का एक नया संस्करण जारी किया। हम इससे प्रसन्न और गौरवान्वित हैं।

लेकिन डरावनी चीज है: कुछ घंटों के बाद, एंड्रॉइड के लिए विफलताओं की संख्या अचानक बढ़ जाती है।


एंड्रॉइड के लिए 10,000 क्रैश

हमारा संतरी क्रैश मॉनिटरिंग टूल पागल हो रहा है।

सभी मामलों में, हमें JSApplicationIllegalArgumentException Error while updating property 'left' in shadow node of type: RCTView" त्रुटि जैसी त्रुटि दिखाई देती है, JSApplicationIllegalArgumentException Error while updating property 'left' in shadow node of type: RCTView" ।

रिएक्ट नेटिव में, यह आमतौर पर होता है यदि आप गलत प्रकार के साथ एक संपत्ति निर्धारित करते हैं। लेकिन परीक्षण के दौरान त्रुटि क्यों नहीं दिखाई दी? हम पर, प्रत्येक डेवलपर कई उपकरणों पर नए रिलीज का सावधानीपूर्वक परीक्षण करता है।

त्रुटियां भी बल्कि यादृच्छिक लगती हैं, वे गुणों के किसी भी संयोजन पर पड़ने लगती हैं और छाया नोड्स टाइप करती हैं। उदाहरण के लिए, यहां पहले तीन हैं:

• Error while updating property 'paddingTop' in shadow node of type: RCTView
• Error while updating property 'height' in shadow node of type: RCTImageView
• Error while updating property 'fill' of a view managed by: RNSVGPath

ऐसा लगता है कि त्रुटि किसी भी डिवाइस पर और एंड्रॉइड के किसी भी संस्करण में संतरी रिपोर्ट को देखते हुए होती है।


एंड्रॉइड 8.0.0 के लिए अधिकांश क्रैश क्रैश होते हैं, लेकिन यह हमारे उपयोगकर्ता आधार के अनुरूप है

चलो इसे वापस खेलते हैं!

तो, बग को ठीक करने से पहले पहला कदम इसे पुन: पेश करना है, है ना? सौभाग्य से, संतरी लॉग के लिए धन्यवाद, हम पता लगा सकते हैं कि क्रैश होने से पहले उपयोगकर्ता क्या करते हैं।

टा-एक-एक, चलो देखते हैं ...



हम्म, अधिकांश मामलों में, उपयोगकर्ता बस एप्लिकेशन खोलते हैं और - बूम, एक दुर्घटना होती है।

ठीक है, चलो फिर से कोशिश करते हैं। हम छह Android उपकरणों पर एप्लिकेशन इंस्टॉल करते हैं, इसे खोलते हैं और कई बार बाहर निकलते हैं। कोई गड़बड़ नहीं! इसके अलावा, देव मोड में इसे स्थानीय रूप से खेलना असंभव है।

ठीक है, यह व्यर्थ लगता है। विफलताएं अभी भी काफी यादृच्छिक हैं और 10% मामलों में होती हैं। ऐसा लगता है कि आपके पास 10 में से 1 मौका है कि एप्लिकेशन स्टार्टअप पर क्रैश हो जाएगा।

स्टैक ट्रेस विश्लेषण

इस विफलता को पुन: उत्पन्न करने के लिए, आइए समझने की कोशिश करें कि यह कहां से आता है ...


जैसा कि पहले उल्लेख किया गया है, हमारे पास कई अलग-अलग त्रुटियां हैं। और हर किसी के समान है, लेकिन थोड़ा अलग निशान।

ठीक है, चलो पहले एक लेते हैं:

 java.lang.ArrayIndexOutOfBoundsException: length=10; index=-1 at android.support.v4.util.Pools$SimplePool.release(Pools.java:116) at com.facebook.react.bridge.DynamicFromMap.recycle(DynamicFromMap.java:40) at com.facebook.react.uimanager.LayoutShadowNode.setHeight(LayoutShadowNode.java:168) at java.lang.reflect.Method.invoke(Method.java) ... java.lang.reflect.InvocationTargetException: null at java.lang.reflect.Method.invoke(Method.java) ... com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: RNSVGSvgView at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:113) ... 

तो समस्या android/support/v4/util/Pools.java ।

हम्म, हम एंड्रॉइड सपोर्ट लाइब्रेरी में बहुत गहरे हैं, यहां कोई भी लाभ प्राप्त करना मुश्किल है।

दूसरा रास्ता खोजो

त्रुटि का मूल कारण खोजने का एक और तरीका है नवीनतम रिलीज़ के लिए नए परिवर्तनों की जांच करना। विशेष रूप से जो देशी एंड्रॉइड कोड को प्रभावित करते हैं। दो परिकल्पनाएँ उत्पन्न होती हैं:

• हमने नेटिव नेविगेशन को अपडेट किया, जहां प्रत्येक स्क्रीन के लिए एंड्रॉइड के लिए देशी टुकड़े का उपयोग किया जाता है।
• हमने प्रतिक्रिया-मूल-svg को अपडेट किया। एसवीजी घटकों से संबंधित कुछ अपवाद थे, लेकिन शायद ही ऐसा हो।

हम इस समय त्रुटि को पुन: उत्पन्न नहीं कर सकते, इसलिए सबसे अच्छी रणनीति है:

1. दो पुस्तकालयों में से एक को रोल करें। इसे 10% उपयोगकर्ताओं के लिए रोल आउट करें, जो कि प्ले स्टोर में तुच्छ रूप से किया गया है। विफलता के बने रहने पर कई उपयोगकर्ताओं के साथ जाँच करें। इस प्रकार, हम परिकल्पना की पुष्टि या खंडन करते हैं।
   
   
   लेकिन वापस रोल करने के लिए एक पुस्तकालय कैसे चुनें? बेशक, आप एक सिक्का टॉस कर सकते हैं, लेकिन क्या यह सबसे अच्छा विकल्प है?
   
   
   
   
   

   बिंदु पर पहुंचें

   
   आइए पिछले ट्रेस पर करीब से नज़र डालें। शायद इससे लाइब्रेरी को निर्धारित करने में मदद मिलेगी।
   
   

    /** * Simple (non-synchronized) pool of objects. * * @param The pooled type. */ public static class SimplePool implements Pool { private final Object[] mPool; private int mPoolSize; ... @Override public boolean release(T instance) { if (isInPool(instance)) { throw new IllegalStateException("Already in the pool!"); } if (mPoolSize < mPool.length) { mPool[mPoolSize] = instance; mPoolSize++; return true; } return false; } 

   
   एक विफलता थी। त्रुटि java.lang.ArrayIndexOutOfBoundsException: length=10; index=-1 java.lang.ArrayIndexOutOfBoundsException: length=10; index=-1 मतलब है कि mPool 10 आकार का एक सरणी है, लेकिन mPoolSize=-1 ।
   
   ठीक है, mPoolSize=-1 कैसे mPoolSize=-1 ? उपरोक्त recycle विधि के अलावा, mPoolSize को बदलने का एकमात्र स्थान SimplePool क्लास का acquire तरीका है:
   
   

    public T acquire() { if (mPoolSize > 0) { final int lastPooledIndex = mPoolSize - 1; T instance = (T) mPool[lastPooledIndex]; mPool[lastPooledIndex] = null; mPoolSize--; return instance; } return null; } 

   
   इसलिए, एक नकारात्मक mPoolSize मान प्राप्त करने का एकमात्र तरीका mPoolSize=0 साथ इसे कम करना है। लेकिन यह स्थिति के साथ कैसे संभव है mPoolSize > 0 ?
   
   हम एंड्रॉइड स्टूडियो में ब्रेकपॉइंट लगाते हैं और देखते हैं कि आवेदन शुरू होने पर क्या होता है। मेरा मतलब है, if यह शर्त है, तो इस कोड को ठीक काम करना चाहिए!
   
   

   अंत में, एक रहस्योद्घाटन!

   
   
   
   
   DynamicFromMap स्थिर लिंक के लिए SimplePool ।
   
   

    private static final Pools.SimplePool<DynamicFromMap> sPool = new Pools.SimplePool<>(10); 

   
   ध्यान से सेट ब्रेकप्वाइंट के साथ प्ले बटन के कई दसियों क्लिक के बाद, हम देखते हैं कि mqt_native_modules थ्रेड्स SimplePool.acquire और SimplePool.release फ़ंक्शन को प्रतिक्रियाशील घटक की शैली गुणों (घटक width गुण के नीचे) को नियंत्रित करने के लिए रिएक्ट नेटिव का उपयोग करते हैं।
   
   
   
   लेकिन वे भी मुख्य धारा मुख्य द्वारा पहुँचा रहे हैं!
   
   
   
   ऊपर, हम देखते हैं कि वे मुख्य धारा में fill संपत्ति को अद्यतन करने के लिए उपयोग किए जाते हैं, आमतौर पर react-native-svg घटक के लिए! दरअसल, देशी svg एनिमेशन के प्रदर्शन में सुधार करने के लिए केवल सातवें संस्करण के साथ react-native-svg लाइब्रेरी ने DynamicFromMap का उपयोग करना शुरू किया।
   
   और-और-और ... एक फ़ंक्शन को दो थ्रेड्स से बुलाया जा सकता है, लेकिन DynamicFromMap SimplePool थ्रेड-सुरक्षित तरीके से उपयोग नहीं करता है। "थ्रेड सेफ," कहते हैं?
   
   

   थ्रेड सुरक्षा, सिद्धांत का एक सा

   
   एकल-थ्रेडेड जावास्क्रिप्ट में, डेवलपर्स को आमतौर पर थ्रेड सुरक्षा से निपटने की आवश्यकता नहीं होती है।
   
   दूसरी ओर, जावा समानांतर या बहुस्तरीय कार्यक्रमों की अवधारणा का समर्थन करता है। कई धागे एक ही कार्यक्रम के भीतर चल सकते हैं और संभावित रूप से सामान्य डेटा संरचना तक पहुंच सकते हैं, जो कभी-कभी अप्रत्याशित परिणाम की ओर जाता है।
   
   एक सरल उदाहरण लें: नीचे दी गई छवि ए और बी प्रवाहित करने वाले शो समानांतर हैं:
   
   
   • एक पूर्णांक पढ़ें;
   • इसके मूल्य में वृद्धि;
   • उसे वापस करो।
   
   
   
   
   स्ट्रीम बी संभावित रूप से अपडेट करने से पहले डेटा मान को एक्सेस कर सकता है। हमें 19 अंतिम मूल्य देने के लिए दो अलग-अलग चरणों की उम्मीद थी। इसके बजाय, हम 18 प्राप्त कर सकते हैं। ऐसी स्थिति जहां डेटा की अंतिम स्थिति प्रवाह संचालन के सापेक्ष क्रम पर निर्भर करती है, एक दौड़ स्थिति कहलाती है। समस्या यह है कि यह स्थिति हर समय नहीं होती है। शायद, उपरोक्त मामले में, मान को बढ़ाने के लिए आगे बढ़ने से पहले थ्रेड बी का एक और काम है, जो थ्रेड ए को मूल्य को अपडेट करने के लिए पर्याप्त समय देता है। यह विफलता को पुन: उत्पन्न करने के लिए यादृच्छिकता और अक्षमता की व्याख्या करता है।
   
   यदि एक दौड़ की स्थिति के जोखिम के बिना कई थ्रेड्स द्वारा एक साथ ऑपरेशन किया जा सकता है, तो डेटा संरचना को थ्रेड सुरक्षित माना जाता है।
   
   जब एक थ्रेड किसी विशेष डेटा तत्व के लिए पढ़ता है, तो दूसरे थ्रेड को इस तत्व को संशोधित करने या हटाने का अधिकार नहीं होना चाहिए (इसे एटमॉसिटी कहा जाता है)। पिछले उदाहरण में, यदि अद्यतन चक्र परमाणु थे, तो दौड़ की स्थिति से बचा जा सकता था। थ्रेड बी तब तक प्रतीक्षा करेगा जब तक थ्रेड ए ऑपरेशन को पूरा नहीं करता है, और फिर खुद शुरू होता है।
   
   

   हमारे मामले में, ऐसा हो सकता है:

   
   
   
   
   क्योंकि DynamicFromMap में DynamicFromMap एक स्थैतिक लिंक होता है, जबकि DynamicFromMap कॉल कई थ्रेड से आती है, जबकि SimplePool में acquire विधि को शामिल करते SimplePool ।
   
   ऊपर चित्रण में, थ्रेड ए विधि को कॉल करता है, स्थिति को सत्य के रूप में मूल्यांकन करता है , लेकिन यह अभी तक mPoolSize (जो थ्रेड बी के साथ संयोजन के रूप में उपयोग किया जाता है) के मूल्य को कम करने में कामयाब नहीं हुआ है, जबकि थ्रेड बी भी इस पद्धति को कॉल करता है और स्थिति को भी सच mPoolSize है । इसके बाद, प्रत्येक कॉल mPoolSize के मूल्य को कम करेगा, जिसके परिणामस्वरूप "असंभव" मूल्य होगा।
   
   

   सुधार

   
   सुधार विकल्पों का अध्ययन करते हुए, हमने प्रतिक्रिया-मूल के लिए एक पूल अनुरोध पाया, जो अभी तक शाखा में शामिल नहीं हुआ है - और यह इस मामले में थ्रेड सुरक्षा प्रदान करता है।
   
   
   
   फिर हमने यूजर्स के लिए रिएक्ट नेटिव का एक निश्चित संस्करण पेश किया। दुर्घटना अंत में तय हो गई है, चीयर्स!
   
   
   
   
   तो, जेनिक डुप्लेसिस (रिएक्ट नेटिव कोर में योगदानकर्ता) और माइकल सैंड ( react-native-svg अनुचर) की मदद के लिए धन्यवाद, रिएक्ट नेटिव 0.57 के अगले मामूली संस्करण में पैच शामिल है ।
   
   इस बग को ठीक करने के लिए कुछ प्रयास किए गए, लेकिन यह प्रतिक्रिया-मूल और प्रतिक्रिया-मूल-एसवीजी में गहराई से उतरने का एक शानदार अवसर था। एक अच्छा डिबगर और कुछ अच्छी तरह से रखा ब्रेकप्वाइंट महत्वपूर्ण हैं। मुझे उम्मीद है कि आपने भी इस कहानी से कुछ उपयोगी सीखा होगा!