Sentry-javascript: अतुल्यकालिक लोडिंग और कैप्चरिंग त्रुटियाँ

+1

+1

+1

+1

हर कोई जिसने इस पर टिप्पणी की है - @karolisdzeja द्वारा समाधान में क्या गलत है?

अंतत:, मुझे यकीन नहीं है कि हम Raven.js स्रोत में एक सुविधा कैसे जोड़ सकते हैं जो तब काम करती है जब Raven.js स्रोत पृष्ठ पर नहीं होता है। मुझे लगता है कि यह हमेशा अंततः एक कस्टम समाधान होगा; ज्यादा से ज्यादा हम अपने डॉक्स में "कैसे करें" जोड़ सकते हैं।

@benvinegar समाधान ठीक दिखता है, लेकिन यह बेहतर होगा यदि इसे आधिकारिक तौर पर समर्थित और दस्तावेज किया गया हो। यादृच्छिक सार का मूल्यांकन करने पर संतरी टीम पर भरोसा करने में मुझे खुशी है।

दरअसल, एक बेहतर समाधान ट्विटर के जेएस एसडीके कोड जैसा कुछ होगा: https://dev.twitter.com/web/javascript/loading

पृष्ठ लोड पर एक फ़ंक्शन कतार सेट करें जो तब खपत हो जाती है जब बाहरी जेएस लोड हो जाता है, प्रॉक्सी ऑब्जेक्ट को बदल देता है। और सुनिश्चित करें कि सभी API कॉल प्रॉक्सी को .ready() कॉल जैसी किसी चीज़ से गुज़रती हैं।

यह सुनिश्चित करता है कि प्रत्येक फ़ंक्शन को व्यक्तिगत रूप से प्रॉक्सी किए बिना, केवल कैप्चर मैसेज के बजाय जेएस लोड होने से पहले किसी भी कॉल को कतारबद्ध किया जा सकता है।

मैं सिर्फ raven.js को अतुल्यकालिक/स्थगित लोड करने में सक्षम होना पसंद करूंगा और चिंता करने की ज़रूरत नहीं है।

सार के साथ अन्य समस्याएं: यह window.onerror को रोकता है और कुछ अनियंत्रित वैश्विक चर पेश करता है।

यह पूर्ण-विशेषताओं वाले ट्रेसकिटविंडोऑनएरर फ़ंक्शन का भी उपयोग नहीं करता है जो raven.js लोड होने पर उपयोग करता है।

मैंने ऊपर दिए गए सार को थोड़ा बदल दिया: https://gist.github.com/oroce/ec3786ba7eff59963842220c3ffc56b4

कोई लीक चर नहीं है। मैंने window.onerror हैंडलर रखा, लेकिन window.addEventListener('error', fn) का उपयोग करने में संकोच न करें।

रेवेन से निर्यात किए गए फ़ंक्शन के रूप में बिंदु पर सबसे बड़ी मदद traceKitWindowOnError । चूंकि यह वह फ़ंक्शन है जिसे त्रुटि होने पर कॉल किया जाता है: https://github.com/getsentry/raven-js/blob/master/dist/raven.js#L2074

मुझे पता है कि हमारे पास इतना उचित स्टैकट्रेस नहीं होगा, लेकिन हमारे पास अभी जो है उससे बेहतर कुछ होगा।

ऐसा करने के साथ अन्य डाउनसाइड्स हैं:

• रेवेन लोड होने से पहले त्रुटियों को पकड़ने के लिए window.onerror पर भरोसा करके, प्रत्येक ब्राउज़र के लिए स्टैकट्रैक उपलब्ध नहीं हैं
  
  
  
  • स्टैक ट्रेस न होने के अलावा, यह समूहीकरण को नकारात्मक रूप से प्रभावित करेगा
  
  
  • यही कारण है कि install() इंस्ट्रूमेंटेशन को आजमाता/पकड़ता है
  
  
• सिंथेटिक निशान काम नहीं करेंगे (वे सभी इस कोड से उत्पन्न होने के रूप में दिखाई देंगे)
• कोई ब्रेडक्रंब संग्रह नहीं

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

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

इसके अलावा हमारे बंडल में रेवेन को बंडल करना एक समाधान है, लेकिन जैसे ही आप अपने फ्रंटएंड कोड को फोल्ड ऑप्टिमाइज़ेशन के साथ अनुकूलित करना शुरू करते हैं, जैसे फ़ैक्टर-बंडल जैसे टूल का उपयोग करके अपने बंडल को कई में विभाजित करना या अधिक गति प्राप्त करने के लिए आप कई बंडल शामिल करते हैं, उपर्युक्त समाधान एक बेहतर आईएमओ हो सकता है, लेकिन मैं सुझावों के लिए खुला हूं।

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

/**
 * Setup Js error lazy tracking
 * - Pros: doesn't block rendering, onload event
 * - Cons: lower quality error reports for lazy errors
 *
 * <strong i="9">@author</strong> vinhlh
 *
 * <strong i="10">@param</strong>  {object} window
 * <strong i="11">@param</strong>  {object} labJs
 * <strong i="12">@param</strong>  {string} ravenCdn
 * <strong i="13">@param</strong>  {string} sentryDsn
 */
(function(window, labJs, ravenCdn, sentryDsn) {
  var errors = [];
  var oldOnError = window.onerror;

  window.onerror = function() {
    errors.push(arguments);
    oldOnError && oldOnError.apply(this, arguments);
  };
  window.addEventListener('load', function() {
    labJs
      .script(ravenCdn)
      .wait(function() {
        window.onerror = oldOnError;
        Raven.config(sentryDsn).install();
        errors.forEach(function(args) {
          window.onerror.apply(this, args);
        });
      });
  });
})(window, $LAB, 'raven-js-3.8.1/dist/raven.js', 'https://[email protected]/9');

मुझे लगता है कि हम शायद ऊपर दिए गए की तरह एक एसिंक स्निपेट दस्तावेज करेंगे, लेकिन उल्लेख करें कि यह ट्रेडऑफ के साथ आता है।

बस एक और टिप्पणी। वे ट्रेडऑफ़ स्वीकार्य लग सकते हैं, लेकिन मैं उपयोगकर्ताओं से कम-निष्ठा त्रुटियों के बारे में बहुत सारे समर्थन टिकटों से निपटता हूं जो वे अनुभव कर रहे हैं (गलत तरीके से) रेवेन.जेएस से प्राप्त होने के लिए माना जाता है। मेरा डर यह है कि अगर मैं लोगों को एसिंक्स दृष्टिकोण का उपयोग करने के लिए प्रोत्साहित करता हूं, तो मेरे पास अधिक से अधिक लोग मुझसे पूछेंगे कि "कोई स्टैक ट्रेस क्यों नहीं है" और अन्य शिकायतें जब ऐसा होता है क्योंकि यह दृष्टिकोण कम निष्ठा है। मैं इसे स्वीकार करने को तैयार हूं, लेकिन यह निगलने के लिए एक कठिन गोली है। मैं

@ बेनविनेगर मैं पूरी तरह से प्राप्त

@oroce - हाँ, यह इस धागे में लोगों के साथ 100% चिंता का विषय नहीं है, लेकिन जो लोग चेतावनी को ठीक से समझे बिना इस रणनीति का पालन कर सकते हैं (उदाहरण के लिए केवल कॉपी/पेस्ट करना)।

मैं स्निपेट को Install डॉक्स में जोड़ने की योजना के साथ इस मुद्दे को खुला रखूंगा - और मैं हर जगह चेतावनियों का एक गुच्छा डालूंगा।

यहां आपकी भागीदारी के लिए फिर से धन्यवाद / मुझे ऐसा करने के लिए राजी करना।

यहां वह स्निपेट है जिसका उपयोग हम पारदर्शी रूप से रेवेन विधियों को कॉल करने के लिए करते हैं: https://gist.github.com/Kl0tl/ed0a9e74462a2294f4c8842f5389d8ea।

मॉक में निश्चित रूप से सुधार किया जा सकता है लेकिन हमें अधिक कार्यात्मकताओं को दोहराने की आवश्यकता नहीं है। Object.defineProperty हमें Raven ठीक बाद हुक करने की अनुमति देता है, लेकिन शायद स्क्रिप्ट लोड इवेंट पर्याप्त है। इसे सक्षम करने का आधिकारिक तरीका होना अच्छा होगा।

अरे दोस्तों, बस सोच रहा था कि रेगुन जिस तरह से अतुल्यकालिक रूप से करता है, उसमें कुछ गड़बड़ है या नहीं?
मुझे यकीन नहीं है, लेकिन ऐसा लगता है कि किनारे के मामलों को अच्छी तरह से संभालना है? हो सकता है मैं गलत हूं :)

@Kl0tl बहुत बढ़िया, धन्यवाद

यह एक गतिशील आयात का उपयोग करके बहुत आसान है। अभी भी स्टेज 3 में है लेकिन वेबपैक द्वारा समर्थित है।

हम केवल वादे को एक कतार के रूप में उपयोग करते हैं। एक बार पूर्ण हो जाने पर सभी कॉलबैक क्रम में निष्पादित होते हैं।

const RavenPromise = import('raven-js'); // async load raven bundle

// initial setup
RavenPromise.then(Raven => {
    Raven.config('url-to-sentry', options).install();
}):

// exported log function
export const logMessage = (level, logger, text) => {
    RavenPromise.then(Raven => {
        Raven.captureMessage(text, {level, logger});
    });
};

इसी तरह @zanona मैं भी Raygun या Google Analytics की तरह एक साधारण ट्रैकिंग कोड रखना पसंद करूंगा। यहां analytics.js के लिए एक उदाहरण दिया गया है:

<script async src="https://www.google-analytics.com/analytics.js"></script>
<script>
    window.ga = window.ga || function () {
        (ga.q = ga.q || []).push(arguments)
    }
    ga.l = +new Date

    ga('create', 'UA-XXXXX-Y', 'auto')
    ga('send', 'pageview')
</script>

@benvinegar क्या

@kireerik यह निश्चित रूप से लागू किया जाएगा (सबसे अधिक संभावना है कि एक दस्तावेज के रूप में कैसे करें), लेकिन मैं अब आपको एक सटीक तिथि अनुमान नहीं दे सकता।

@kamilogorek बहुत अच्छा लगता है (मुझे समाधान के रूप में कामकाज पसंद नहीं है)। कोई दिक्कत नहीं है!

रुचि रखने वाले किसी भी व्यक्ति के लिए, मैंने रैवेनज को असीमित रूप से लोड करने का एक और तरीका बताया है:
https://gist.github.com/MaxMilton/e2338b02b7381fc7bef2ccd96f434201

यह @oroce द्वारा कोड पर आधारित है, लेकिन मुख्य अंतर यह है कि मैं बेहतर प्रदर्शन के लिए दस्तावेज़ शीर्ष में एक नियमित <script async src'='..."> टैग का उपयोग करता हूं (ब्राउज़र पहले संसाधन लाने का शेड्यूल कर सकते हैं) + मैं इसे लपेटने से परेशान नहीं हूं एक आईआईएफई और अन्य छोटे बदलाव।

@MaxMilton अच्छा लगा! मैंने आपके आधार पर अपना स्वाद बनाया है:

<script async src="https://cdn.ravenjs.com/3.22.1/raven.min.js" crossorigin="anonymous" id="raven"></script>
<script>
    (function (sentryDataSourceName) {
        var raven = document.getElementById('raven')
        , isNotLoaded = true
        , errors = []
        raven.onreadystatechange = raven.onload = function () {
            if (isNotLoaded) {
                Raven.config(sentryDataSourceName).install()
                isNotLoaded = !isNotLoaded
                errors.forEach(function (error) {
                    Raven.captureException(error[4] || new Error(error[0]), {
                        extra: {
                            file: error[1]
                            , line: error[2]
                            , col: error[3]
                        }
                    })
                })
            }
        }
        window.onerror = function (message, source, lineNumber, colmnNumber, error) {
            if (isNotLoaded)
                errors.push([message, source, lineNumber, colmnNumber, error])
        }
    })('https://<key>@sentry.io/<project>')
</script>

मेरा भी कुछ सवाल है:

• क्या crossorigin विशेषता को script टैग पर परिभाषित करने की आवश्यकता है?
• क्या यह अन्य समाधान के बजाय त्रुटि वस्तु को पारित करने के लिए पर्याप्त है?

तुम क्या सोचते हो? इस पर लेखक (@kamilogorek) की क्या राय है?

@kireerik जब आप स्क्रिप्ट पर crossorigin="anonymous" डालते हैं तो यह आपको window.onerror ईवेंट के साथ त्रुटियों (उस बाहरी स्क्रिप्ट से) को पूरी तरह से कैप्चर करने की अनुमति देता है। यह ब्राउज़र को फ़ेच अनुरोध के साथ क्रेडेंशियल भेजने से भी रोकता है, जो आमतौर पर आप तृतीय पक्ष संसाधनों के साथ चाहते हैं। एमडीएन संदर्भ 1 , एमडीएन संदर्भ 2 ।

आप बस त्रुटि पास कर सकते हैं और यह उस समय के _अधिकतम_ काम करेगा। पुराने ब्राउज़र होने की चेतावनी (उदाहरण के लिए संस्करण 31 से पहले फ़ायरफ़ॉक्स) window.onerror ईवेंट के लिए columnNo या Error Object गुणों को पास नहीं करता है। इसलिए यदि आप वास्तव में अच्छी संगतता चाहते हैं तो आपको वह अतिरिक्त कार्य करने की आवश्यकता है। एमडीएन संदर्भ ।

संपादित करें: बोनस टिप: पता चला है कि जब आप डाल crossorigin किसी भी मूल्य में यह रूप में एक ही माना जाता है बिना crossorigin="anonymous" ।

FYI करें, मैंने अपने पिछले सार को किसी ऐसी चीज़ में अपडेट किया है जो बहुत अधिक उत्पादन के लिए तैयार है:

• वास्तव में क्या हो रहा है यह समझाने के लिए बहुत सारी टिप्पणियां
• बड़ी सफाई + वर्णनात्मक चर नामों का उपयोग करें (हमेशा एक अच्छा बोनस: पलक:)
• वैश्विक नाम स्थान को प्रदूषित न करने के लिए आईआईएफई में लपेटें
• त्रुटि सरणी आइटम को दिए गए गलत पैरा को ठीक करें

यदि आप सब कुछ समझना चाहते हैं तो सार देखें या यदि आप एक त्वरित कॉपी + पेस्ट पसंद करते हैं, तो यहां छोटा संस्करण है:

<!-- Sentry JS error tracking -->
<script async src="https://cdn.ravenjs.com/3.22.0/raven.min.js" crossorigin id="raven"></script>
<script>
(function(b,e,c,d){b.onerror=function(a,b,d,f,g){c||e.push([a,b,d,f,g])};b.onunhandledrejection=function(a){c||e.push([a.reason.reason||a.reason.message,a.type,JSON.stringify(a.reason)])};d.onreadystatechange=d.onload=function(){c||(c=!0,
Raven.config("___PUBLIC_DSN___").install(),
b.onunhandledrejection=function(a){Raven.captureException(Error(a.reason.reason||a.reason.message),{extra:{type:a.type,reason:JSON.stringify(a.reason)}})},e.forEach(function(a){Raven.captureException(a[4]||Error(a[0]),{extra:{file:a[1],line:a[2],col:a[3]}})}))}})(window,[],!1,document.getElementById("raven"));
</script>

<link rel="preconnect" href="https://sentry.io">

___PUBLIC_DSN___ को अपने DSN से बदलें और इसे अपने बंद होने वाले </head> टैग के पास कहीं सिर में चिपका दें। या यदि आप एक हिप्स्टर हैं जो अब <head> और <body> टैग का उपयोग नहीं करते हैं तो किसी भी महत्वपूर्ण/ऐप संसाधनों (जैसे सीएसएस) के बाद इसे शीर्ष के पास पेस्ट करें। आदर्श रूप से यह किसी भी अन्य जावास्क्रिप्ट से पहले होना चाहिए ताकि आप इस कोड के बाद लोड की गई स्क्रिप्ट से त्रुटियों को पकड़ सकें।

मेरे त्वरित परीक्षणों में कोई समस्या नहीं आई है इसलिए मुझे डिफ़ॉल्ट सिंक्रोनस संस्करण पर इसका उपयोग न करने का कोई कारण नहीं दिख रहा है।

अगर किसी के पास बेहतर दृष्टिकोण के लिए कोई विचार है तो मैं इसे सुनने के लिए उत्सुक हूं।

संपादित करें: इस टिप्पणी को इतनी बार संपादित करने के लिए क्षमा करें। यह अभी स्थिर स्तर पर है। इस राज्य में आने में मज़ा आया! :स्माइली:

https://docs.sentry.io/clients/javascript/install/#async -loading

एक बार संतरी पुस्तकालय लोड हो जाने के बाद, त्रुटि रिपोर्टिंग गुणवत्ता बिल्कुल सिंक लोड करने के समान ही होती है? (मुझे ऐसा लगता है, बस जाँच कर रहा हूँ)

उन दस्तावेज़ों में भी जिन्हें आप जोड़ना चाहते हैं, आप lib लोड होने तक रेवेन का उपयोग नहीं कर सकते हैं, शायद विकल्पों में कॉलबैक फ़ंक्शन प्रदान करें ताकि आप उपयोगकर्ता संदर्भ आदि सेट कर सकें?

@dalyr95 से सहमत हैं। एक कॉलबैक फ़ंक्शन उपयोगी होगा। शायद एक कस्टम रेवेन लोड इवेंट।

मेरे पास @ dalyr95 के समान अनुरोध है। अभी setUserContext() को कॉल करने का एकमात्र तरीका लोडर स्निपेट को संशोधित करना है जो मुख्य कॉन्फ़िग ऑब्जेक्ट पर कॉलबैक में पास करने में सक्षम होने के रूप में साफ नहीं है।

नमस्ते, समस्या की रिपोर्ट करने के लिए धन्यवाद।

हम अपने एसडीके की अगली प्रमुख रिलीज पर काम करने की प्रक्रिया में हैं।
उसके कारण, हमें वर्तमान संस्करण (प्रमुख या सुरक्षा बग को छोड़कर) पर काम करना पड़ा।
हम जल्द से जल्द सभी रिपोर्टों पर वापस आने का प्रयास करेंगे, इसलिए कृपया धैर्य रखें।

समझने के लिए धन्यवाद,
चीयर्स!

मेरा समाधान 'undefined'!=k.setup&&k.setup(); को .install() कॉल के तुरंत बाद जोड़ना था, फिर मैंने अपने पोस्ट इनिट कोड के साथ setup से SENTRY_SDK नामक एक फ़ंक्शन जोड़ा।

एसिंक लोडर के साथ, मैं उपयोगकर्ता संदर्भ और अन्य जानकारी को दूसरे तर्क के रूप में पास करके सेट करने में सक्षम था Raven.config :

<script>
    Raven.config("https://<mydsn>@sentry.io/<projectid>", 
      {"release":"0.3.1",
       "environment":"dev",
       "user": {"id":"7b031fa0-32ff-46fe-b94b-e6bc201c3c5f",
                "organisation-id":"b1a50c41-b85e-4c50-9cec-c55ff36cf6d1"}}).install();
</script>

मुझे लगता है कि इसके लिए सबकुछ पहले से मौजूद है, इसे बेहतर दस्तावेज किया जा सकता है।

@danielcompton केवल बैकएंड एपीआई के माध्यम से उपयोगकर्ता की जानकारी प्राप्त कर सकता है?