LogRock: Logging के माध्यम से परीक्षण

LogRock: Logging के माध्यम से परीक्षण

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

विकास के दौरान, प्रतिक्रिया जेएस अनुप्रयोगों के लिए एक मॉड्यूल बनाया गया था - लॉगरॉक (जीथब) ।

यह मॉड्यूल आपको आधुनिक लॉगिंग अनुप्रयोगों को व्यवस्थित करने की अनुमति देता है। लॉग के आधार पर, हम परीक्षण करते हैं। इस लेख में मैं आपको इस मॉड्यूल का उपयोग करने की पेचीदगियों और लॉगिंग के माध्यम से परीक्षण को व्यवस्थित करने के तरीके के बारे में बताऊंगा।

क्या समस्या है?

यदि आप एक जीवित जीव के साथ कार्यक्रम की तुलना करते हैं, तो इसमें एक बग एक बीमारी है। इस "बीमारी" का कारण कई कारक हो सकते हैं, जिसमें किसी विशेष उपयोगकर्ता का वातावरण भी शामिल है। यह विशेष रूप से सच है अगर हम एक वेब प्लेटफॉर्म पर विचार कर रहे हैं। कभी-कभी एक कारण संबंध बहुत जटिल होता है, और परीक्षण के दौरान पाया गया बग कई घटनाओं का परिणाम है।

मानव बीमारियों के साथ, कोई भी रोगी की तुलना में अपने लक्षणों को बेहतर नहीं बताएगा, कोई भी परीक्षक यह नहीं बता पाएगा कि क्या हुआ, कार्यक्रम से बेहतर है।

क्या करें?

यह समझने के लिए कि क्या हो रहा है, हमें उन कार्यों की एक सूची की आवश्यकता है जो उपयोगकर्ता ने हमारे आवेदन में किए थे।

ताकि हमारा कार्यक्रम खुद हमें यह बता सके कि "क्या होता है", हम LogRock मॉड्यूल (github) को लेंगे और इसे ElasticSearch, LogStash और Kibana के साथ जोड़ेंगे।


ElasticSearch एक शक्तिशाली पूर्ण-पाठ खोज इंजन है। आप यहां ElasticSearch ट्यूटोरियल देख सकते हैं ।
LogStash विभिन्न स्रोतों से लॉग एकत्र करने की एक प्रणाली है, जो ElasticSearch सहित लॉग भेज सकता है।
Kibana कई ऐड-ऑन के साथ ElasticSearch के लिए एक वेब इंटरफ़ेस है।

यह कैसे काम करता है?

त्रुटि (या सिर्फ मांग पर) के मामले में, एप्लिकेशन सर्वर पर लॉग भेजता है जहां वे एक फ़ाइल में सहेजे जाते हैं। Logstash incrementally डेटाबेस में ElasticSearch में डेटा बचाता है। उपयोगकर्ता Kibana में लॉग करता है और सहेजे गए लॉग देखता है।


यह एक अच्छी तरह से सिक्त किबाना की तरह दिखता है। यह ElasticSearch का डेटा प्रदर्शित करता है। किबाना टेबल, ग्राफ, नक्शे, आदि के रूप में डेटा प्रदर्शित कर सकता है, जो हमारे आवेदन के साथ क्या हो रहा है, इसका विश्लेषण करने और समझने के लिए बहुत सुविधाजनक है।

इस लेख में, मैं ElasticStack की स्थापना पर चर्चा नहीं करूँगा!

एक लॉगिंग सिस्टम बनाना

एक उदाहरण के रूप में, हम रीजेंट में लिखे एक-पेज जेएस एप्लिकेशन में लॉगिंग सिस्टम को एकीकृत करेंगे। यह वास्तव में महत्वपूर्ण नहीं है कि आपके एप्लिकेशन पर कौन सा ढाँचा लिखा जाएगा। मैं एक लॉग सिस्टम के निर्माण के दृष्टिकोण का वर्णन करने का प्रयास करूंगा।

1. ग्राहक

1.0 LogRock। स्थापना

LogRock से लिंक करें

स्थापित करने के लिए, आपको प्रदर्शन करना होगा:

npm install logrock  yarn add logrock 

१.१ LogRock। अनुप्रयोग सेटअप

आरंभ करने के लिए, हमारे एप्लिकेशन को एक घटक में लपेटें

 import { LoggerContainer } from "logrock"; <LoggerContainer> <App /> </LoggerContainer> 

LoggerContainer एक घटक है जो आपकी एप्लिकेशन त्रुटियों के प्रति प्रतिक्रिया करता है और एक स्टैक बनाता है।

स्टैक उपयोगकर्ता के ऑपरेटिंग सिस्टम, ब्राउज़र के बारे में जानकारी के साथ एक ऑब्जेक्ट है, जो माउस या कीबोर्ड बटन दबाया गया था और निश्चित रूप से, क्रियाएं सबर्रे, जहां हमारे सिस्टम में प्रदर्शन किए गए सभी उपयोगकर्ता कार्य रिकॉर्ड किए गए हैं।

LoggerContainer में कई सेटिंग्स हैं, उनमें से कुछ पर विचार करें

 <LoggerContainer active={true|false} limit={20} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

सक्रिय - लकड़हारे को सक्षम या अक्षम करना

सीमा - उपयोगकर्ता द्वारा हाल ही में सहेजे गए कार्यों की संख्या पर एक सीमा निर्धारित करता है। यदि उपयोगकर्ता 21 कार्य करता है, तो इस सरणी में पहला स्वचालित रूप से हटा दिया जाएगा। इस प्रकार, हमारे पास पिछले 20 कार्य होंगे जो त्रुटि से पहले थे।

onError - कॉलबैक जिसे एरर होने पर कॉल किया जाता है। स्टैक ऑब्जेक्ट इसमें आता है, जिसमें पर्यावरण, उपयोगकर्ता कार्यों आदि के बारे में सभी जानकारी संग्रहीत होती है। यह इस कॉलबैक से है कि हमें इस डेटा को ElasticSearch या बैकएंड पर भेजने की आवश्यकता है, या इसे आगे के विश्लेषण और निगरानी के लिए फ़ाइल में सहेजना है।

१.२ LogRock। लॉगिंग

उपयोगकर्ता कार्यों के उच्च-गुणवत्ता वाले लॉगिंग बनाने के लिए, हमें अपने कोड को लॉग-कॉल के साथ कवर करना होगा।

LogRock मॉड्यूल एक लकड़हारा है जो एक LoggerContainer के साथ जुड़ा हुआ है

मान लीजिए हमारे पास एक घटक है

 import React, { useState } from "react"; export default function Toggle(props) { const [toggleState, setToggleState] = useState("off"); function toggle() { setToggleState(toggleState === "off" ? "on" : "off"); } return <div className={`switch ${toggleState}`} onClick={toggle} />; } 

इसे लॉग से ठीक से कवर करने के लिए, हमें टॉगल विधि को संशोधित करना होगा

 function toggle() { let state = toggleState === "off" ? "on" : "off"; logger.info(`React.Toggle|Toggle component changed state ${state}`); setToggleState(state); } 

हमने एक लकड़हारा जोड़ा है जिसमें जानकारी को 2 भागों में विभाजित किया गया है। React। टॉगल हमें दिखाता है कि यह क्रिया प्रतिक्रिया के स्तर पर हुई, टॉगल घटक, और फिर हमारे पास इस घटक में आने वाली क्रिया और वर्तमान स्थिति की मौखिक व्याख्या है। स्तरों में इस तरह का अलगाव आवश्यक नहीं है, लेकिन इस दृष्टिकोण के साथ यह स्पष्ट हो जाएगा कि वास्तव में हमारे कोड को कहां निष्पादित किया गया था।

हम एक त्रुटि के मामले में, "घटकडाईकैच" विधि का उपयोग कर सकते हैं, जिसे प्रतिक्रिया संस्करण 16 में पेश किया गया था।

2. सर्वर इंटरैक्शन

निम्नलिखित उदाहरण पर विचार करें।

मान लीजिए हमारे पास एक विधि है जो एक बैकएंड से उपयोगकर्ता डेटा एकत्र करती है। विधि अतुल्यकालिक है, तर्क का हिस्सा बैकएंड में छिपा हुआ है। इस कोड को सही तरीके से कैसे लॉग करें?

सबसे पहले, चूंकि हमारे पास एक क्लाइंट एप्लिकेशन है, इसलिए सर्वर पर जाने वाले सभी अनुरोध पृष्ठ को फिर से लोड किए बिना, एकल उपयोगकर्ता सत्र से गुजरेंगे। सर्वर पर कार्रवाइयों के साथ क्लाइंट पर कार्रवाइयों को संबद्ध करने के लिए, हमें एक वैश्विक सत्र बनाना होगा और इसे हेडर से सर्वर के प्रत्येक अनुरोध में जोड़ना होगा। सर्वर पर, हम किसी भी लकड़हारे का उपयोग कर सकते हैं, जो हमारे तर्क को फ्रंटएंड से उदाहरण के रूप में कवर करेगा, और त्रुटि के मामले में इस डेटा को एलास्टिक से बैकेंड प्लेट में संलग्न सेशन के साथ भेजें।

1. हम ग्राहक पर सत्र उत्पन्न करते हैं

 window.SESSION_ID = `sessionid-${Math.random().toString(36).substr(3, 9)}`; 

2. हमें सर्वर के सभी अनुरोधों के लिए सत्र को सेट करना होगा। यदि हम प्रश्नों के लिए पुस्तकालयों का उपयोग करते हैं, तो सभी प्रश्नों के लिए एक सत्र घोषित करके यह बहुत सरल है।

 let fetch = axios.create({...}); fetch.defaults.headers.common.sessionId = window.SESSION_ID; 

3. LoggerContainer में SessionID के लिए एक विशेष क्षेत्र है

 <LoggerContainer active={true|false} sessionID={window.SESSION_ID} limit={20} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

4. अनुरोध स्वयं (क्लाइंट पर) इस तरह दिखाई देगा:

 logger.info(`store.getData|User is ready for loading... User ID is ${id}`); getData('/api/v1/user', { id }) .then(userData => { logger.info(`store.getData|User have already loaded. User count is ${JSON.stringify(userData)}`); }) .catch(err => { logger.error(`store.getData|User loaded fail ${err.message}`); }); 

यह सब कैसे काम करेगा: हम क्लाइंट पर अनुरोध से पहले, एक लॉग लॉग करते हैं। हमारे कोड के अनुसार, हम देखते हैं कि सर्वर से डेटा लोड करना अब शुरू हो जाएगा। हमने अनुरोध के लिए एक सत्र संलग्न किया है। यदि हमारा बैकएंड इस सत्र के अतिरिक्त के साथ लॉग के साथ कवर किया गया है और अनुरोध विफल रहता है, तो हम देख सकते हैं कि बैकएंड पर क्या हुआ।

इस प्रकार, हम अपने आवेदन के पूरे चक्र की निगरानी करते हैं, न केवल क्लाइंट पर, बल्कि बैकएंड पर भी।

3. परीक्षक

एक परीक्षक के साथ काम करना प्रक्रिया का एक अलग वर्णन करने योग्य है।

चूंकि हमारे पास एक स्टार्टअप है, हमारे पास औपचारिक आवश्यकताएं नहीं हैं और कभी-कभी काम में सब कुछ तार्किक नहीं होता है।

यदि परीक्षक व्यवहार को नहीं समझता है, तो यह एक ऐसा मामला है जिस पर कम से कम विचार करने की आवश्यकता है। इसके अलावा, अक्सर, एक परीक्षक केवल एक स्थिति को दो बार दोहरा नहीं सकता है। चूंकि गलत व्यवहार के लिए कदम कई और गैर-तुच्छ हो सकते हैं। इसके अलावा, सभी त्रुटियां महत्वपूर्ण परिणाम नहीं देती हैं, जैसे अपवाद। उनमें से कुछ केवल आवेदन के व्यवहार को बदल सकते हैं, लेकिन सिस्टम द्वारा एक त्रुटि के रूप में व्याख्या नहीं की जा सकती है। इन उद्देश्यों के लिए, मंचन पर, आप लॉग्स भेजने के लिए बाध्य करने के लिए एप्लिकेशन हेडर में एक बटन जोड़ सकते हैं। परीक्षक देखता है कि कुछ सही काम नहीं कर रहा है, बटन पर क्लिक करता है और स्टैक को कार्रवाई के साथ ElasticSearch पर भेजता है।



अगर, फिर भी, एक महत्वपूर्ण त्रुटि हुई है, तो हमें इंटरफ़ेस को ब्लॉक करना होगा ताकि परीक्षक आगे क्लिक न करें और एक मृत अंत में न जाए।

इन उद्देश्यों के लिए, हम मौत की नीली स्क्रीन प्रदर्शित करते हैं।

हम इस महत्वपूर्ण त्रुटि के ढेर के साथ शीर्ष पर पाठ को देखते हैं, और नीचे - इसके पूर्व किए गए कार्य। हमें त्रुटि आईडी भी मिलती है, परीक्षक के लिए इसे चुनने और टिकट के साथ संलग्न करने के लिए यह पर्याप्त है। बाद में यह त्रुटि इस आईडी द्वारा किबाना में आसानी से पाई जा सकती है।


इन उद्देश्यों के लिए, LoggerContainer के अपने गुण हैं।

 <LoggerContainer active={true|false} limit={20} bsodActive={true} bsod={BSOD} onError={stack => { sendToServer(stack); }} > <App /> </LoggerContainer> 

bsodActive - BSOD को सक्षम बनाता है / अक्षम करता है (BSOD उत्पादन कोड पर लागू होता है)

bsod एक घटक है। डिफ़ॉल्ट रूप से, यह उपरोक्त स्क्रीनशॉट जैसा दिखता है।

UI LoggerContainer में एक बटन प्रदर्शित करने के लिए, हम संदर्भ में उपयोग कर सकते हैं

 context.logger.onError(context.logger.getStackData()); 

4. LogRock। उपयोगकर्ता सहभागिता

आप कंसोल में लॉग को आउटपुट कर सकते हैं या उन्हें उपयोगकर्ता को दिखा सकते हैं, इसके लिए आपको स्टडआउट विधि का उपयोग करने की आवश्यकता है:

 <LoggerContainer active={true|false} limit={20} bsodActive={true} bsod={BSOD} onError={stack => { sendToServer(stack); }} stdout={(level, message, important) => { console[level](message); if (important) { alert(message); } }} > <App /> </LoggerContainer> 

stdout एक विधि है जो संदेशों को प्रदर्शित करने के लिए जिम्मेदार है।

संदेश को महत्वपूर्ण बनने के लिए, लकड़हारा के लिए दूसरा पैरामीटर सही होना पर्याप्त है। इस प्रकार, यह संदेश उपयोगकर्ता को पॉप-अप विंडो में प्रदर्शित किया जा सकता है, उदाहरण के लिए, यदि डेटा लोडिंग विफल हो गई है, तो हम एक त्रुटि संदेश प्रदर्शित कर सकते हैं।

 logger.log('Something was wrong', true); 

उन्नत लॉगिंग

यदि आप Redux, या इसी तरह के समाधानों का उपयोग एक स्टोर के साथ करते हैं, तो आप अपने एक्टिविटीज को प्रोसेस करने के लिए मिडलवेयर में लकड़हारा डाल सकते हैं, जिससे सभी महत्वपूर्ण क्रियाएं हमारे सिस्टम से गुजरेंगी।

प्रभावी लॉगिंग के लिए, आप अपने डेटा को प्रॉक्सी ऑब्जेक्ट में लपेट सकते हैं, और ऑब्जेक्ट के साथ सभी क्रियाओं पर लॉगर डाल सकते हैं।

लॉग-इन (पुस्तकालय विधियों, विरासत कोड विधियों) के साथ तृतीय-पक्ष विधियों को कवर करने के लिए, आप डेकोरेटर - "@" का उपयोग कर सकते हैं।

टिप्स

उत्पादन सहित लॉग एप्लिकेशन, क्योंकि वास्तविक उपयोगकर्ताओं की तुलना में बेहतर है, कोई भी परीक्षक कोई अड़चन नहीं पाएगा।

लाइसेंस समझौते में लॉग के संग्रह को इंगित करने के लिए मत भूलना।

पासवर्ड, बैंक विवरण और अन्य व्यक्तिगत जानकारी लॉग न करें!

लॉग्स की अतिरेक भी खराब है, हस्ताक्षर यथासंभव स्पष्ट करें।

विकल्प

वैकल्पिक तरीकों के रूप में, मैं हाइलाइट करता हूं:

• रोलबार अत्यधिक अनुकूलन योग्य है। आपको प्रति माह $ 150 के लिए 500 हजार त्रुटियों को लॉग करने की अनुमति देता है। यदि आप स्क्रैच से एप्लिकेशन विकसित कर रहे हैं तो मैं इसका उपयोग करने की सलाह देता हूं।
• संतरी को एकीकृत करना आसान है, लेकिन कम अनुकूलन योग्य है। आपको $ 200 प्रति माह 1 मिलियन ईवेंट लॉग करने देता है।

दोनों सेवाएं आपको लगभग समान कार्य करने और बैकएंड में एकीकृत करने की अनुमति देती हैं।

आगे क्या है

लॉगिंग केवल त्रुटियों की खोज नहीं है, यह उपयोगकर्ता के कार्यों, डेटा संग्रह की भी निगरानी कर रहा है। लॉगिंग Google Analytics और उपयोगकर्ता अनुभव परीक्षण का एक अच्छा पूरक हो सकता है।

निष्कर्ष

जब आप ऐप जारी करते हैं, तो जीवन उसके लिए शुरू होता है। अपने दिमाग की उपज के लिए जिम्मेदार रहें, प्रतिक्रिया प्राप्त करें, लॉग की निगरानी करें और इसे सुधारें। उच्च गुणवत्ता वाले सॉफ्टवेयर और समृद्धि लिखें :)

PS यदि आप कोणीय, Vue, आदि के लिए मॉड्यूल के विकास में मदद करना चाहते हैं मुझे अनुरोधों को खींचने में खुशी होगी - यहाँ ।