Sentry-javascript: @ संतरी/ब्राउज़र का आकार

अरे, इसे लाने के लिए धन्यवाद।
जबकि हम बंडल आकार के बारे में आपकी चिंताओं को समझते हैं और आम तौर पर सहमत हैं, मुझे लगता है कि असम्पीडित छोटा फ़ाइल आकार के बजाय पहले gzip बंडल आकार की तुलना करना उचित है:

@sentry/browser है 21.3799 KB
raven-js 13.44 केबी

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

देखें: https://docs.sentry.io/quickstart/?platform=browser

इस स्क्रिप्ट के आपके पगेलोड समय पर पदचिह्न और प्रभाव <1KB gzipped समान कार्यक्षमता रखते हुए।

तो टीएल; डॉ:
हम इसके बारे में जानते हैं, हम जानते हैं कि इसमें सुधार की गुंजाइश है लेकिन अभी यह सर्वोच्च प्राथमिकता नहीं है।

मुझे लगता है कि असम्पीडित छोटा फ़ाइल आकार के बजाय पहले gzip बंडल आकार की तुलना करना उचित है:

मैं तर्क दूंगा कि छोटे आकार की तुलना करना भी उचित है क्योंकि निष्पादन के मुद्दे न केवल जावास्क्रिप्ट को डाउनलोड करने से उत्पन्न होते हैं, बल्कि पार्सिंग और निष्पादन से भी उत्पन्न होते हैं। ~92kb काफी भारी है और कम-अंत वाले उपकरणों पर 1s तक पार्स समय जोड़ सकता है (सिर्फ इस एक पुस्तकालय के लिए!)।

मुझे नहीं पता कि आप CDN'ed स्क्रिप्ट के लिए < 1KB की संख्या कहाँ से लेंगे। क्या आप विस्तृत कर सकते हैं? जब मैं https://browser.sentry-cdn.com/4.0.4/bundle.min.js खोलता हूं तो मुझे 22KB का gzipped आकार दिखाई देता है।

आपको पता होना चाहिए कि संतरी का एसडीके कई पुस्तकालयों में से एक है जिसमें डेवलपर्स शामिल हैं।

पुनश्च: मुझे संतरी पसंद है, यह हमारे लिए बहुत मददगार रहा है। वेब प्रदर्शन कुछ ऐसा है जिसके बारे में मैं भावुक हूं। ;)

@klaemo
हे, कोई चिंता नहीं

जैसा मैंने कहा, हम जागरूक हैं और ऐसा नहीं है कि हम नहीं चाहते कि यह छोटा हो।
हमारे लिए सर्वोच्च प्राथमिकता नए एसडीके को शिप करना था, हम समय के साथ बंडल के आकार को बेहतर बनाने के लिए काम करेंगे।
हम और भी कई कदम उठा सकते हैं, उदाहरण के लिए: tslib का उपयोग करें, स्ट्रिंग्स को मिलाएं ...
इसलिए सुधार के लिए बहुत जगह है।

क्षमा करें, जो लिंक मैंने पहले पोस्ट किया था वह पहले से ही पुराना है
मैं _Loader_ की बात कर रहा था: https://docs.sentry.io/platforms/javascript/loader/
जबकि _Loader_ की भी इसकी एसिंक प्रकृति के कारण इसकी सीमाएं हैं और अंत में, यह अभी भी एसडीके को प्राप्त करता है और इंजेक्ट करता है (भले ही यह एसिंक हो) यह एक विकल्प है जिसे हम पेश करते हैं क्योंकि लोगों ने इसके लिए कहा था।

@HazAT क्षमा करें, दोस्तों, लेकिन क्या आप अगले संस्करण की रिलीज़ की तारीख प्रदान कर सकते हैं?
मेरा मतलब है, #मास्टर शाखा में पहले से ही कुछ बदलाव हैं लेकिन अभी तक जारी नहीं किए गए हैं। वह निर्णय ले रहा है कि 4x संस्करण हालांकि Angular5+ परियोजनाओं के लिए प्रयोग करने योग्य है।

@rayzru ने अभी-अभी 4.0.5 जारी किया है, लेकिन कृपया विषय से संबंधित पोस्ट रखें।

मेरी राय में, यह निश्चित रूप से एक प्रतिगमन है और नए संस्करण में अपडेट न होने का गंभीर कारण है।

💯 मैं तब तक अपग्रेड करने ही वाला था जब तक कि मैंने इस पर ध्यान नहीं दिया:

• पहले: https://bundlephobia.com/[email protected]
• इसके बाद: https://bundlephobia.com/result?p=@sentry/browser @4.0.1

कम से कम पैकेज का आकार छोटा है , लेकिन मुझे लगता है कि बंडल में ️ +10 KB gzipped JavaScript महत्वपूर्ण है। हम इंतजार करेंगे, अच्छा काम करते रहेंगे :)

@HazAT क्या esm फाइलें बनाना संभव हो सकता है। यह वेबपैक को संयोजन और पेड़ के झटकों के साथ बेहतर परिणाम देने की अनुमति देगा।

आप प्रत्येक मर्ज अनुरोध के लिए पैकेज के बंडल आकार को ट्रैक करने के लिए कुछ CI टूल जोड़ना चाह सकते हैं। इस मुद्दे के बाद से यह वास्तव में 100 केबी तक बढ़ गया है, देखें https://bundlephobia.com/result?p=@sentry/browser @4.3.0

उदाहरण के लिए प्रयास करें https://github.com/siddharthkp/bundlesize

वेबपैक में प्रवेश बिंदु के लिए डिफ़ॉल्ट प्रदर्शन बजट 250 kb है, यह सुनिश्चित करने के लिए कि आपको किसी भी डिवाइस और नेटवर्क पर अच्छा प्रदर्शन मिले। 100 kb संतरी उस बजट का काफी हिस्सा लेता है।

कृपया हमें अपडेट रखें कि क्या इस प्रतिगमन को ठीक करना रोडमैप पर है, या यदि पुस्तकालय बिना आकार के बजट के बढ़ता रहेगा।

हम ग्राहकों को भुगतान कर रहे हैं और बैकएंड, नेटिव और वेब दोनों पर संतरी में भारी निवेश कर रहे हैं, लेकिन लाइब्रेरी के आकार के 3x से अधिक का अपग्रेड (रेवेन-जेएस@3.23.1 31 केबी है) ऐसा कुछ नहीं है जिसे हम उचित ठहरा सकते हैं।

@jacobrask आप पुस्तकालय के पुराने संस्करण से चिपके रह सकते हैं, यह वही है जो हम https://www.onepixel.com/ पर करते हैं, यह ठीक काम कर रहा है।

@jacobrask यह निश्चित रूप से हमारी सूची में है और हम यह भी सोचते हैं कि कुछ कम लटकने वाले फल हैं जहां हम आसानी से अपने बंडल आकार को कम कर सकते हैं।
अधिक से अधिक लोग इसके लिए पूछ रहे हैं इसलिए हम शायद उम्मीद से जल्द ही इससे निपट लेंगे।

@हज़त
संतरी ब्राउज़र एसडीके रोलअप बंडल को अनुकूलित किया जा सकता है। बंडल मिनट जेएस फ़ाइल में, कई tslib कोड दोहराए जाते हैं। जैसे __जनरेटर, __असाइन। ब्राउज़र एनवी में, एक कोड साझा करना सबसे अच्छा है। लेकिनब्राउज़र प्रोजेक्ट डिस्ट फ़ाइल के अन्य पैकेजों का उपयोग करता है। हो सकता है कि gzip का आकार 23K से घटाकर 16K कर दें।

बंडल का आकार 4.3.2 . में समान है
https://bundlephobia.com/result?p=@sentry/browser @4.3.2 से परिवर्तनों की परवाह किए बिना
https://github.com/getsentry/sentry-javascript/pull/1738 :(

@vkrol हमें कम से कम npm पैकेज के लिए @gaterking द्वारा किए गए परिवर्तनों को वापस करना पड़ा।
दूसरी ओर सीडीएन पर बंडल छोटा होना चाहिए।

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

@ हज़त ठीक है, धन्यवाद।

@vkrol हमें कम से कम npm पैकेज के लिए @gaterking द्वारा किए गए परिवर्तनों को वापस करना पड़ा।
दूसरी ओर सीडीएन पर बंडल छोटा होना चाहिए।

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

आशा है जल्द से जल्द।

@gaterking @kamilogorek इसे पहले से ही https://github.com/getsentry/sentry-javascript/pull/1751 ठीक कर दिया है
हमें बस एक "तत्काल" रिलीज़ करनी थी इसलिए हमने इसे वापस कर दिया।

क्लाइंट-साइड पर, मैं मूल रूप से चाहता हूं कि यह त्रुटियों को कैप्चर करे और उन्हें एपीआई में जमा करे।

यह पुस्तकालय और क्या कर रहा है जो इतना जटिल है?

यह समझना वाकई मुश्किल है कि एक साधारण त्रुटि-रिपोर्टर को इतने बड़े पदचिह्न की आवश्यकता क्यों है

@ माइंडप्ले-डीके यह ज्यादातर इसलिए है क्योंकि जावास्क्रिप्ट और ब्राउज़र एक गड़बड़ हैं ^^
हमें टूटे/गलत स्टैक ट्रेस को ठीक करने के लिए बहुत कुछ करने की ज़रूरत है।
"बस त्रुटियों को पकड़ने" का सरल कार्य भी जितना लगता है उससे कहीं अधिक जटिल है।

यह समझना वाकई मुश्किल है कि एक साधारण त्रुटि-रिपोर्टर को इतने बड़े पदचिह्न की आवश्यकता क्यों है

@ माइंडप्ले-डीके क्योंकि यह आसान नहीं है।

यहां सभी ब्राउज़रों में त्रुटियों को कैप्चर करने और उन्हें प्रयोग करने योग्य डेटा संरचना में एकीकृत करने के लिए कोड दिया गया है: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

हाल ही में आकार में कमी पर अच्छा किया, बहुत सराहना की। मैं

लिंक की गई फ़ाइल पर एक त्वरित नज़र ओपेरा 10 के लिए त्रुटियों को संभालने के लिए कोड दिखाती है, क्या यह वास्तव में अभी भी आवश्यक है? ट्रेसकिट भी रेवेन से (वर्तमान में) 2x आकार वृद्धि के लिए जिम्मेदार नहीं है, जो पहले से ही बड़ा था।

कुछ सुझाव:

• एमडी5 . निकालें
• async/प्रतीक्षा का उपयोग कम करें, यह ES5 को खराब तरीके से संकलित करता है। https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 की तुलना आउटपुट कोड से करें (प्रोडक्शन बंडल में "प्रोसेसइवेंट" खोजें)। वह पूरी फाइल प्रोडक्शन बंडल में बड़ी हो जाती है।

क्या पैकेज/कोर जैसे अन्य पैकेजों में कुछ साझा कोड ( app:///${base} rewriteframes.ts में) है? वे क्लाइंट द्वारा उपयोग नहीं किए जाते हैं, लेकिन नोड द्वारा उपयोग किए जाते हैं।

क्योंकि यह सरल नहीं है।

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

केवल सहायकों को कम करने की कोशिश करने के बजाय आप पहले से ही उल्लेखित ईएसएम फाइलें प्रदान कर सकते हैं, यह आसान है और आज भी एक सर्वोत्तम अभ्यास है।

async/प्रतीक्षा का उपयोग कम करें, यह ES5 को खराब तरीके से संकलित करता है। https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 की तुलना आउटपुट कोड से करें (प्रोडक्शन बंडल में "प्रोसेसइवेंट" खोजें)। वह पूरी फाइल प्रोडक्शन बंडल में बड़ी हो जाती है।

यह गलत तरीका है, ES5 के लिए और अधिक अनुकूलित करने के बजाय 80.07% के लिए अनुकूलित करना अधिक महत्वपूर्ण है जो आधुनिक ब्राउज़र का उपयोग कर रहे हैं।

उन सभी के लिए जिन्हें पुराने ब्राउज़र का समर्थन चाहिए:
Async फ़ंक्शंस किसी भी ब्राउज़र द्वारा समर्थित हैं जो <script type="module"> (caniuse: esm , async ) का समर्थन करता है, इसलिए केवल पुराने ब्राउज़र के उपयोगकर्ताओं को अधिक प्रतीक्षा करने की आवश्यकता होती है (वैसे भी उनके लिए अधिक समय लगता है)

सबूत:
160KB (es5, बंडल) > 119KB (esm, प्लेन फ़ाइलें)

तो कृपया esm फ़ाइल (भी) को बंडल करें, यह module और target को /tsconfig.esm.json (जो tsconfig.build.json ) से esnext में बदलना जितना आसान है, उतना ही आसान है। tsconfig.esm.json फाइलों को पैकेज में tsconfig.build.json फाइलों के समान जोड़कर, इसे बिल्ड और पैकेज में जोड़ें और package.json में एक मॉड्यूल प्रविष्टि निर्दिष्ट करें

अगर आप चाहें तो मैं उसके लिए एक पीआर जोड़ सकता हूं।

अगर आप चाहें तो मैं उसके लिए एक पीआर जोड़ सकता हूं।

मुझे वह @cromefire अच्छा लगेगा :)

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

या इससे भी बेहतर अगर यह वेबपैक एनवी की तरह काम कर सकता है, ताकि उपयोगकर्ता आवश्यक ब्राउज़र समर्थन निर्दिष्ट कर सके। ओएफसी, यह एक आसान पेसी फीचर नहीं है, लेकिन बस इसे वहां फेंकना चाहता था :)

बहुत बढ़िया उत्पाद!

उस नए पीआर के साथ आप बेबेल को कॉन्फ़िगर कर सकते हैं, हालांकि आप केवल उन ब्राउज़रों का समर्थन करना चाहते हैं जिनकी आपको आवश्यकता है

@ संतरी/ब्राउज़र का आकार रेवेन-जेएस के आकार के दोगुने से अधिक बड़ा है: 86 केबी बनाम 39 केबी (छोटा)।

FYI करें: @sentry/browser के नवीनतम संस्करण का आकार बढ़ाकर 91.8 kB कर दिया गया है। स्रोत: https://bundlephobia.com/result?p=@sentry/browser @4.5.0।

@cromefire पुस्तकालय के आकार को अनुकूलित करने के साथ आपके काम के लिए धन्यवाद!

मैंने अभी v4.5.0 से नए esm बिल्ड का उपयोग करने की कोशिश की लेकिन मुझे बहुत सारी त्रुटियां मिलीं। उन सभी को ट्रिगर किया गया क्योंकि @sentry/utils/esm से मॉड्यूल को हल नहीं किया जा सका।

वास्तव में मुझे नए yarn install के बाद node_modules में फ़ोल्डर्स नहीं मिले। (स्क्रीनशॉट देखें)

 ./node_modules/@sentry/core/esm/baseclient.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/async' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/backend.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/tracekit.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/helpers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/browser/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/baseclient.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/dsn.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/extraerrordata.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/is' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/globalhandlers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/baseclient.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/basebackend.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/sdk.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integration.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/dedupe.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/sdkinformation.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/hub/esm/hub.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/logger' को './node_modules/@sentry/hub/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/client.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/tracekit.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/useragent.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/trycatch.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/helpers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/pluggable/ember.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/transports/beacon.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/transports' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/transports/fetch.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/browser/esm/transports' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/baseclient.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/dedupe.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/hub/esm/scope.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/hub/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/hub/esm/hub.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/misc' को './node_modules/@sentry/hub/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/parsers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/trycatch.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/helpers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/api.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/basebackend.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/dsn.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/hub/esm/scope.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/object' को './node_modules/@sentry/hub/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/pluggable/rewriteframes.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/path' को './node_modules/@sentry/core/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/parsers.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/string' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/string' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/baseclient.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/string' को './node_modules/@sentry/core/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/string' को './node_modules/@sentry/core/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/backend.js . में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/supports' को './node_modules/@sentry/browser/esm' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/supports' को './node_modules/@sentry/browser/esm/integrations' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/supports' को './node_modules/@sentry/browser/esm/integrations/pluggable' में हल नहीं कर सकता

 ./node_modules/@sentry/browser/esm/transports/fetch.js में त्रुटि

 मॉड्यूल नहीं मिला: त्रुटि: '@sentry/utils/esm/supports' को './node_modules/@sentry/browser/esm/transports' में हल नहीं कर सकता

@pascaliske esm बिल्ड अभी भी प्रयोग के चरण में है और हमने इसे अभी तक सार्वजनिक रूप से प्रलेखित नहीं किया है। सब कुछ पूरी तरह से जांचे जाने के बाद हम इसे करेंगे और अपने निष्कर्ष यहां पोस्ट करेंगे।

@kamilogorek हाँ, मुझे पता है। बस आपको इन त्रुटियों के बारे में बताना चाहता हूं। मैं

धन्यवाद, इसकी सराहना करें @pascaliske! हम जल्द से जल्द ESM सहायता प्रदान करने का प्रयास करेंगे :)

@pascaliske पहले yarn build कोशिश करें

@cromefire नहीं, यह मुझे सोचने में मदद नहीं करेगा। मैंने अभी पैकेज को npm से डाउनलोड किया है, इसलिए कोई बिल्ड वातावरण उपलब्ध नहीं है। मैं

मैंने स्रोत कोड के माध्यम से थोड़ी खोज की और @sentry/browser @sentry/utils से की। मुझे लगता है कि यह समस्या है: package/utils/tsconfig.build.json#L5 बनाम package/browser/tsconfig.build.json#L5 । क्या यह संभव है कि सामान्य बिल्ड आउटपुट esm बिल्ड आउटपुट को अधिलेखित कर दे? मैं

मेरे नोड_मॉड्यूल्स फ़ोल्डर के अंदर browser पैकेज में सामान्य और ईएसएम दोनों से बिल्ड आउटपुट होता है। लेकिन utils पैकेज में रूट फ़ोल्डर में केवल सामान्य बिल्ड आउटपुट होता है।

क्या यह पहले ही जारी हो चुका है?

मैंने स्रोत कोड के माध्यम से थोड़ी खोज की और @sentry/ब्राउज़र की तुलना @sentry/utils से की। मुझे लगता है कि यह समस्या है: package/utils/tsconfig.build.json#L5 बनाम package/browser/tsconfig.build.json#L5। क्या यह संभव है कि सामान्य बिल्ड आउटपुट esm बिल्ड आउटपुट को अधिलेखित कर दे? मैं

नहीं, आपको esm tsconfig . को देखना होगा

कल देख लेंगे

सभी को प्रणाम! हम संतरी में कुछ बंडल आकारों के बारे में भी सोच रहे हैं, और हमें यह पता चला: https://github.com/getsentry/sentry-javascript/blob/master/packages/minimal/package.json#L20

ऐसा लगता है कि यह बहुत कम कार्यों (फैलने और असाइन करने) के लिए आकार का एक हिस्सा जोड़ रहा है। मैं टाइपस्क्रिप्ट से बहुत परिचित नहीं हूँ, लेकिन क्या यह रनटाइम पर इसके लिए आवश्यक है?

यह मेरे लिए भी स्पष्ट नहीं है कि @sentry/types को _runtime_ निर्भरता होने की आवश्यकता क्यों है, और devDependencies में स्थित नहीं है ...

टाइपप्रति के सभी उपयोगकर्ताओं के लिए @evocateur यह आवश्यक है। टाइपस्क्रिप्ट इसे पूरी तरह से अनुकूलित करता है।
(लेकिन .d.ts फाइलों के लिए इसकी आवश्यकता हो सकती है)

@IanMitchell इसका उपयोग esm बिल्ड के लिए नहीं, बल्कि सामान्य लोगों के लिए किया जाता है

4.5.0 के बंडल जेएस में बहुत सारे डुप्लिकेट कोड होते हैं, जैसे गंभीरता, htmlElementAsString, htmlElementAsString, uuid4, parseUrl और इसी तरह। यह इरादा नहीं किया जा सकता है!

ऐसा ही तब होता है जब मैं WebPack + Babel 7 का उपयोग करके import * as Sentry from '@sentry/browser'; (फ़ाइल में एकमात्र पंक्ति के रूप में) के माध्यम से एक बंडल करता हूं, तो बंडल का आकार 326kb होता है। देखें: संतरी.बंडल. js.txt
हम अपने अन्य बंडलों के लिए भी उसी कॉन्फ़िगरेशन का उपयोग करते हैं, लेकिन उस समस्या के साथ संतरी ही एकमात्र बंडल है।

बंडल.मिन.जेएस के अंदर डुप्लिकेट कोड नहीं है , जो रोलअप के साथ पेड़ के हिलने का परिणाम हो सकता है।

तो, एक अस्थायी समाधान import '@sentry/browser/build/bundle.min.js'; . का उपयोग करना है

4.5.0 के बंडल जेएस में बहुत सारे डुप्लिकेट कोड होते हैं, जैसे गंभीरता, htmlElementAsString, htmlElementAsString, uuid4, parseUrl और इसी तरह। यह इरादा नहीं किया जा सकता है!

यही कारण है (या यह कम से कम एक कारण है) esm बिल्ड है। यदि आपके पास एक बंडलर है, तो यह प्रीबिल्ड बंडल का उपयोग करने से अधिक कुशल है। (यह अभी बीटा है और अभी भी टूटा हुआ है)

इसे फिर से देखते हुए, और मुझे विश्वास नहीं होता कि यह छोटा नहीं हो सकता। बहुत छोटा।

स्रोत-मानचित्र समर्थन के साथ स्टैक-निशान इस पुस्तकालय में अब तक की सबसे जटिल चीज होनी चाहिए - और ऐसा नहीं लगता है? ऐसा लगता है कि अधिकांश पदचिह्न मूल ढांचे से हैं, जिसे वह नोड.जेएस क्लाइंट के साथ साझा करता है, जहां मुझे यकीन है कि पदचिह्न वास्तव में चिंता का विषय नहीं है।

मुझे गलत मत समझो, यह वास्तुकला का एक सुंदर टुकड़ा है - बहुत अच्छा टाइपस्क्रिप्ट काम।

लेकिन क्लाइंट-साइड पर, इसका ज्यादा मतलब नहीं है। इसे छोटा होना चाहिए और तेजी से लोड होना चाहिए - विशेष रूप से निम्न-स्तर जैसी किसी चीज़ के लिए, इससे कोई फर्क नहीं पड़ता कि स्रोत-कोड सुंदर है या नहीं। जहां तक ​​​​मैं कह सकता हूं, वह सब प्रभावशाली वास्तुकला है जो लाइन के नीचे बहुत सारे बाइट्स खर्च कर रही है।

तुलना के लिए:

मैं TrackJS में आया, जिसमें ~ 10KB पैकेज में समान क्षमताएं (स्रोत-मानचित्रों के साथ क्रॉस-ब्राउज़र स्टैक-ट्रेस) हैं।

मूल TraceKit ~3KB मिनट+gz है।

मुझे यह पुस्तकालय मिला जो स्रोत-मानचित्र बिट (क्लाइंट-साइड पर) ~ 8 केबी मिनट + जीजे या ~ 10 केबी में एक्स-ब्राउज़र पॉलीफिल के साथ कर सकता है।

इसके अलावा, यह ब्राउज़र जानकारी के कुछ बिट्स एकत्र करने, अपेक्षित JSON प्रारूप में लपेटने और इसे पोस्ट करने का मामला है - जो कुछ KB मिनट + gz से अधिक नहीं होना चाहिए। इसे होना चाहिए?

मुझे ऐसा लगता है कि अधिकांश लोगों को जो चाहिए, उससे कहीं अधिक वास्तुकला है। अगर मुझे किसी भी प्लगइन समर्थन की आवश्यकता है, तो शायद मुझे एक साधारण हुक चाहिए जो मुझे JSON पोस्ट में जानकारी प्लग करने देता है, लेकिन यह इसके बारे में है।

मुझे पता है कि इन दिनों जेएस के मेगाबाइट्स को तैनात करना आम बात है, लेकिन हमारे पास काम पर सख्त सामग्री नीतियां हैं, यह सुनिश्चित करने के लिए कि हम मोबाइल पर तेजी से लोड होने वाली परियोजनाओं को शिप करें, और मैं अपने जेएस बजट के आधे से अधिक को त्रुटि पर खर्च करने का औचित्य नहीं बता सकता- लॉगिंग - शायद 10% सबसे ऊपर है, इसलिए ~ 15-20 KB जैसा कुछ उचित लगता है।

मुझे आपके उत्पाद से प्यार है, लेकिन मैं इस ग्राहक को तैनात नहीं कर सकता

इस तरह कुछ के लिए सर्वर पर स्टैकट्रैक और स्रोत-मानचित्र पार्सिंग को सौंपना एक अच्छा विचार हो सकता है, जहां आकार अप्रासंगिक है

इस तरह कुछ के लिए सर्वर पर स्टैकट्रैक और स्रोत-मानचित्र पार्सिंग को सौंपना एक अच्छा विचार हो सकता है, जहां आकार अप्रासंगिक है

@cromefire दिलचस्प विचार। मुझे आश्चर्य है कि क्या यही है जैसे ट्रैकजेएस आकार को कम रखने के लिए करता है? (उनका ग्राहक मालिकाना है - केवल छोटा स्रोत उपलब्ध है, इसलिए यह कहना मुश्किल है कि वे क्या करते हैं। मान लीजिए कि मैं इसे स्थापित कर सकता हूं और देख सकता हूं कि तार पर क्या यात्रा होती है ...)

यहाँ ब्राउज़र में स्रोत-मानचित्रों को हल करने के लिए एक सरल पैकेज है: स्रोत-मानचित्र-समाधान ~2KB min+gz पर ... वह पॉलीफ़िल के बिना है, लेकिन (यदि यह काम करता है) मुझे लगता है कि हमें ~ 10KB हिट करने में सक्षम होना चाहिए आधुनिक ब्राउज़र जिन्हें पॉलीफ़िल की आवश्यकता नहीं है।

वह पॉलीफिल के बिना है

पॉलीफ़िल esm बिल्ड में नहीं होने चाहिए, ताकि यह भी काम कर सके, लेकिन बैचेंड में यह और भी कम होगा

@cromefire ESM बिल्ड अब 4.5.1 में उपलब्ध होना चाहिए। अभी भी प्रलेखित नहीं है क्योंकि हम यह सुनिश्चित करना चाहते हैं कि यह युद्ध-परीक्षण है, लेकिन अभी तक इतना अच्छा है। मैंने बेबेल लोडर के साथ नियमित वेबपैक बिल्ड की जाँच की और यह एक आकर्षण की तरह काम करता है।

इसके अलावा, यह ब्राउज़र जानकारी के कुछ बिट्स एकत्र करने, अपेक्षित JSON प्रारूप में लपेटने और इसे पोस्ट करने का मामला है - जो कुछ KB मिनट + gz से अधिक नहीं होना चाहिए। इसे होना चाहिए?

@ माइंडप्ले-डीके हम क्लाइंट-साइड पर कोई स्टैक-ट्रेस समाधान नहीं करते हैं। यह सब सर्वर पर किया गया है, इसलिए आपको उनके लिए समर्थन प्राप्त करने के लिए सबसे पहले स्रोत मानचित्र अपलोड करने की आवश्यकता है।

हालांकि हम क्या करते हैं:

• इवेंट प्रोसेसर कस्टम हुक प्रदान करने के लिए जो आपको संतरी को भेजे गए डेटा को संशोधित/फ़िल्टर/बढ़ाने की अनुमति देता है
• सभी देशी एपीआई रैपिंग का ध्यान रखें
• सभी उपयोगकर्ता इंटरैक्शन, नेटवर्क कॉल, नेविगेशन से ब्रेडक्रंब कैप्चर करें
• उपयोगकर्ता एजेंट डेटा निकालें
• लिंक की गई त्रुटियों से अतिरिक्त त्रुटि डेटा निकालें, ताकि आप अन्य भाषाओं की तरह बहु-त्रुटि स्तर बना सकें
• दोनों वैश्विक त्रुटि संचालकों को सुनें
• एकाधिक नेटवर्क ट्रांसपोर्ट प्रदान करें, ताकि उपयोगकर्ता को अपने वर्तमान परिवेश के लिए हमेशा सर्वश्रेष्ठ मिल सके
• किनारे के मामलों के दसवें हिस्से और विभिन्न त्रुटि (यहां तक ​​​​कि कस्टम वाले) वस्तुओं और विभिन्न मूल कार्यान्वयन का ध्यान रखें
• अतिरिक्त या टूटी हुई त्रुटि जानकारी के लिए फ़ॉलबैक प्रदान करें
• बफ़र ईवेंट ताकि आप अपने स्वयं के संतरी इंस्टेंस को बाढ़ न दें या कुछ गलत होने पर मुफ्त ईवेंट से बाहर न निकलें

कुछ लोगों का नाम बताने के लिए। मैं वास्तव में चाहता हूं कि यह "पकड़ने में त्रुटि, कुछ डेटा जोड़ें और इसे भेजें" जितना आसान होगा।
वास्तविक दुनिया में हालांकि, दसियों इनपुट हैं, दसियों स्रोत त्रुटि (जो सभी अलग-अलग डेटा प्रदान करते हैं) और दसियों वातावरण जो व्यवहार में भिन्न होते हैं, से आ सकते हैं।
हम निश्चित रूप से इस पर काम करते रहेंगे कि इसे ~10-15kB तक कैसे लाया जाए, लेकिन इसमें कुछ समय लगेगा। हमारे पास केवल इतने संसाधन हैं (लोगों/समय पढ़ें) हम अभी खर्च कर सकते हैं।

मुझे पता है कि इन दिनों जेएस के मेगाबाइट्स को तैनात करना आम बात है, लेकिन हमारे पास काम पर सख्त सामग्री नीतियां हैं, यह सुनिश्चित करने के लिए कि हम मोबाइल पर तेजी से लोड होने वाली परियोजनाओं को शिप करें, और मैं अपने जेएस बजट के आधे से अधिक को त्रुटि पर खर्च करने का औचित्य नहीं बता सकता- लॉगिंग - शायद 10% सबसे ऊपर है, इसलिए ~ 15-20 KB जैसा कुछ उचित लगता है।

आप तब हमारे लोडर का उपयोग कर सकते हैं - https://docs.sentry.io/platforms/javascript/loader/ :)

आप तब हमारे लोडर का उपयोग कर सकते हैं - https://docs.sentry.io/platforms/javascript/loader/ :)

लेकिन दुख की बात है कि वेबपैक का कोई समाधान नहीं है

कुछ लोगों का नाम बताने के लिए। मैं वास्तव में चाहता हूं कि यह "पकड़ने में त्रुटि, कुछ डेटा जोड़ें और इसे भेजें" जितना आसान होगा।

शायद किसी को tc39 पर कुछ प्रस्तावित करना चाहिए। मुझे यह देखना होगा कि प्रक्रिया कैसी है, लेकिन हो सकता है कि कोई स्टैकट्रैक पढ़ने के लिए मानकीकृत एपीआई का प्रस्ताव दे सके

लेकिन दुख की बात है कि वेबपैक का कोई समाधान नहीं है

वास्तव में आपका क्या मतलब है? एक पैकेज है जो लोडर के साथ सह-अस्तित्व में हो सकता है, जिसे आयात और बंडल किया जा सकता है, लेकिन एक बार त्रुटि या कैप्चर अपवाद कॉल होने पर एसिंक्रोनस रूप से लोड किए गए एसडीके के साथ संवाद करें?

वास्तव में आपका क्या मतलब है? एक पैकेज है जो लोडर के साथ सह-अस्तित्व में हो सकता है, जिसे आयात और बंडल किया जा सकता है, लेकिन एक बार त्रुटि या कैप्चर अपवाद कॉल होने पर एसिंक्रोनस रूप से लोड किए गए एसडीके के साथ संवाद करें?

हां, अगर मैं सही ढंग से पुनर्कथन करूं, तो लोडर केवल सीडीएन के माध्यम से उपलब्ध है

@cromefire हाँ, क्योंकि इसका उपयोग "स्निपेट" के रूप में किया जाना है। हालाँकि आप इसका कोड यहाँ देख सकते हैं https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js

ऐसा लगता है कि मुझे एक नया पीआर खोलना है, क्योंकि esm के साथ यह आपके अपने कोड से भी प्रयोग योग्य होगा

हमारे पास एक समाधान आ रहा है जो आपको loader के साथ minimal $0$#$ का उपयोग करने देगा और प्रभावी रूप से आपके अंतिम बंडल में केवल कुछ kB जोड़ देगा।

एक लोडर लिखना मुश्किल नहीं होना चाहिए जो 1kb से कम में लोड हो, तो क्यों नहीं, मैं एक त्वरित लिखने का प्रयास करूंगा

एक चीज जो यहां बहुत मदद कर सकती है वह यह है कि यदि कुछ कार्य वैकल्पिक हैं।

उदाहरण के लिए वास्तव में एक अच्छा न्यूनतम न्यूनतम हो सकता है:

• मूल त्रुटि स्टैक ट्रेस (परवाह न करें कि यह कुछ ब्राउज़रों पर इष्टतम नहीं है)
• उपभोक्ता अभिकर्ता
• TIMESTAMP
• यूआरएल
• सर्वर पर स्रोत मानचित्रों के साथ मिलान करें

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

हमने वेबपैक कोड विभाजन का उपयोग करके इसे हल किया और संतरी क्लाइंट को केवल त्रुटि पर लोड किया।

sentry.js

import * as Sentry from '@sentry/browser';
Sentry.init({
  ...
  integrations: integrations => {
    return integrations.filter(integration => integration.name !== 'GlobalHandlers');
  },
});
export const logError = error => Sentry.captureException(error);

errors.js

const captureError = async error => {
 const { logError } await import(/* webpackChunkName: "sentry" */ './sentry');
 logError(error);
}
window.onerror = (message, url, line, column, error) => captureError(error);
window.onunhandledrejection = event => captureError(event.reason);

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

यह कुछ ऐसा है जिसे मैंने #1846 . में लागू किया था

दूसरों के लिए मददगार हो सकता है:
मैंने वेबपैक ( 4.29.5 ) के साथ ESM बिल्ड का उपयोग किया:

• मानक निर्माण के बजाय ESM बिल्ड का उपयोग करने के लिए एक वेबपैक उपनाम जोड़ना क्योंकि $#$ package.json $#$ में कोई module घोषणा नहीं है

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': path.resolve(
            __dirname,
            'node_modules/@sentry/browser/esm',
        ),
    }

• हमारे babel-loader कॉन्फ़िगरेशन में sentry/.+/esm में एक बहिष्करण जोड़ें, क्योंकि ऐसा लगता है कि ESM बिल्ड में ES2015 की तुलना में नई सुविधाएँ शामिल हैं।

{
    test: /\.m?jsx?$/,
    loader: 'babel-loader',
    // compile sentry as the ESM build is new and ships modern features which break our supported browsers
    exclude: /(node_modules\/(?!(@sentry\/[^/]+\/esm))|bower_components)\//,
}

टिप्पणियाँ:

• हमने उपनामों का उपयोग किया है इसलिए हमें कोड में इसका उपयोग करते समय बंडलिंग के बारे में चिंता करने की ज़रूरत नहीं है (हम अन्य चीजों के साथ lodash-es के लिए भी ऐसा ही करते हैं)

@नीबू

आप बस @sentry/browser/esm पर रीडायरेक्ट कर सकते हैं:

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': '@sentry/browser/esm'
    }

लेकिन आपको उपनाम जोड़ने की आवश्यकता नहीं है, बस @sentry/browser/esm . आयात करें

लोडर के लिए इसे इस तरह लिखना आसान है:

• यदि आपके पास बेबेल में अन्य चीजें हैं:

{
    test: /other_things/,
    include: [/@sentry\/.+\/esm/],
    exclude: /node_modules/,
    // config
}

• यदि आप नहीं करते हैं:

{
    test: /@sentry\/.+\/esm/,
    exclude: /node_modules/,
    // config
}

अपनी आवश्यकताओं के लिए बेबेल कॉन्फ़िगरेशन को अनुकूलित करना भी याद रखें: बेबेल डॉक्स , अन्यथा यह esm संस्करण का उपयोग करने के लायक नहीं है

अपडेट: हम जल्द ही एसडीके का नया प्रमुख संस्करण जारी करेंगे जो बंडल आकार को काफी कम कर देता है।

26.1 kB - https://bundlephobia.com/result?p=@sentry/browser @4.6.4
बनाम
17.2 kB - https://bundlephobia.com/result?p=@sentry/browser @5.0.0-rc.1

हमारे पूर्वनिर्मित सीडीएन संस्करण भी बेहतर परिणाम दिखाते हैं (सुनिश्चित नहीं है कि बंडलफोबिया सामान को कैसे मापता है)

ES6:  14.3535 kB
ES5:  15.6846 kB

वैसे भी, मैं आपको बताना चाहता हूं कि अभी भी बंडल के आकार को और कम करने पर काम कर रहे हैं लेकिन यह पहले से ही सही दिशा में एक बड़ा कदम होना चाहिए।

उन्नयन पर ध्यान दें: यह एक बड़ी टक्कर है क्योंकि एसडीके में कई आंतरिक परिवर्तन हैं। आपकी ओर से कोई कोड परिवर्तन आवश्यक नहीं होना चाहिए। वर्तमान में हम नए संस्करण का परीक्षण स्वयं संतरी.io पर कर रहे हैं यह देखने के लिए कि यह कैसा व्यवहार करता है। रेफरी: https://github.com/getsentry/sentry/pull/12492

अस्वीकरण: उत्पादन में अभी तक 5.0.0-rc.x का उपयोग न करें जैसा कि हम करते हैं

@HazAT इसे गंभीरता से लेने के लिए धन्यवाद! यह एक बड़ा कदम है - मैं इसे अब तैनात करने के बारे में बहुत कम चिंतित हूं :-)

@kamilogorek बस जिज्ञासा से बाहर, क्या आप 3.x शाखा से पिछले संस्करण की तुलना में जोड़ सकते हैं?

मैं इस मुद्दे को बंद कर रहा हूं, अभी के रूप में, हमें लगता है, हमने v4 से v5 की ओर बढ़ते हुए जो कमी पेश की है वह सही दिशा में एक प्रवृत्ति है। हम अभी भी इसे और कम करने की कोशिश करेंगे और हम इसे फिर से बढ़ाने के बारे में बहुत सचेत रहेंगे।

एक त्वरित टिप्पणी के रूप में, हम वास्तव में केवल अपने "बंडल" आकार की तुलना करना पसंद करते हैं, क्योंकि आप अपने माइलेज का उपयोग करने वाले बंडलर के आधार पर भिन्न हो सकते हैं, इसलिए यहां सीडीएन बंडल नंबर हम शिप करते हैं (पेड):

| पैकेज | संस्करण | बाइट्स में आकार | केबी में आकार | लिंक |
|-----------------|------------|---------------|----- -------|------------------------------------------ ----------|
| रेवेन-जेएस | 3.27.0 | 13741 बाइट्स | ~13.4kB | https://cdn.ravenjs.com/3.27.0/raven.min.js |
| @ संतरी/ब्राउज़र | 4.6.6 | 22607 बाइट्स | ~22.1 केबी | https://browser.sentry-cdn.com/4.6.6/bundle.min.js |
| @ संतरी/ब्राउज़र | 5.0.3 | 16059 बाइट्स | ~15.7kB | https://browser.sentry-cdn.com/5.0.3/bundle.min.js |

V5 के साथ हम शिप भी करते हैं और esm बिल्ड भी करते हैं, जिसका अर्थ है कि यदि आप एक बंडलर का उपयोग कर रहे हैं तो यह अप्रयुक्त कोड पथों को ट्रीशेक करने में सक्षम होना चाहिए।

आपके धैर्य के लिए आप सभी का धन्यवाद

@HazAT @kamilogorek awesome!

@Limess क्या आज भी इसका उपयोग करना प्रासंगिक है: @sentry/browser/esm के बजाय @sentry/browser ?

इसे import * as Sentry from "@sentry/browser/esm"; की तरह आयात किया जाता है और webpack -p के साथ बंडल किया जाता है लेकिन मुझे बंडल आकार में कोई अंतर नहीं दिखता है। मेरे पास एक नंगे webpack.config.js भी है जिसमें कोई प्लगइन्स या लोडर नहीं है।

@ 0xbkt बंडल आकार में कोई फर्क नहीं पड़ता, कम से कम अब रोलअप टू बंडल ऐप का उपयोग करते समय।