sentry-javascript 🚀 - @ centry /ブラウザのサイズ

ねえ、これを持ってきてくれてありがとう。
バンドルサイズに関する懸念を理解し、一般的に同意しますが、圧縮されていない縮小ファイルサイズではなく、最初にgzipバンドルサイズを比較するのが妥当だと思います。

@sentry/browserは21.3799 KB
raven-js 13.44 KB

また、これはすべての人に当てはまるわけではありませんが、通常、WebサイトにSDKをセットアップするCDNローダーを使用するように人々に提供し、ガイドします。

参照： https ：//docs.sentry.io/quickstart/？platform = browser

このスクリプトのフットプリントとページ読み込み時間への影響は、同じ機能を維持しながら1KB未満でgzip圧縮されます。

だからtl; dr：
私たちはそれを認識しており、改善の余地があることはわかっていますが、現時点では最優先事項ではありません。

HazAT 2018年09月20日

👎40 😕35

圧縮されていない縮小ファイルサイズではなく、最初にgzipバンドルサイズを比較するのが妥当だと思います。

パフォーマンスの問題はjavascriptのダウンロードだけでなく、解析と実行からも発生するため、縮小されたサイズを比較することも公正であると私は主張します。〜92kbは非常に大きく、ローエンドデバイスで最大1秒の解析時間を追加する可能性があります（この1つのライブラリだけです！）。

CDNされたスクリプトの< 1KBの数をどこから取得するかわかりません。詳細を教えていただけますか？ https://browser.sentry-cdn.com/4.0.4/bundle.min.jsを開くと、22KBのgzip圧縮サイズが表示されます。

セントリーのSDKは、開発者が含める多くのライブラリの1つにすぎないことに注意してください。

PS：私は歩哨が大好きです、それは私たちにとって非常に役に立ちました。 Webパフォーマンスは、私が情熱を注いでいるものです。 ;）

klaemo 2018年09月25日

👍56

@klaemo
ふふ、心配いりません😅

私が言ったように、私たちは気づいています、そしてそれは私たちがそれを小さくしたくないというわけではありません。
私たちにとって最高の優先事項は、新しいSDKを出荷することでした。今後、バンドルサイズの改善に取り組んでいきます。
実行できる手順は他にもたくさんあります。たとえば、 tslib 、文字列を結合します...
したがって、改善の余地はたくさんあります。

申し訳ありませんが、以前に投稿したリンクはすでに古くなっています🙃
私は_Loader_を参照していました： https ：//docs.sentry.io/platforms/javascript/loader/
_Loader_にも、非同期の性質による制限がありますが、最終的には、SDKをフェッチして挿入します（非同期であっても）。これは、人々が求めているため、SDKを提供する代替手段です。

HazAT 2018年09月25日

@HazAT申し訳ありませんが、次のバージョンのリリース日を教えていただけますか？
つまり、＃masterブランチにはすでにいくつかの変更がありますが、まだリリースされていません。ただし、Angular5 +プロジェクトでは4xバージョンを使用できると判断しています。

rayzru 2018年09月25日

👎3

@rayzru 4.0.5をリリースしたばかりですが、トピックに関連する投稿を残してください。

HazAT 2018年09月25日

👍1

私の意見では、これは間違いなくリグレッションであり、新しいバージョンに更新しない重大な理由です。

💯私はそれに気付くまでアップグレードしようとしていました：

以前： https ：//bundlephobia.com/result？p = raven-js @ 3.27.0
後： https ：//bundlephobia.com/result？p = @ sentry / browser @ 4.0.1

capture d ecran 2018-10-03 a 15 07 27

少なくともパッケージサイズは小さいですが、⚠️バンドル内のgzip圧縮されたJavaScriptの⚠️ + 10KBは重要だと思います。私たちは待って、良い仕事を続けます:)

oliviertassinari 2018年10月03日

👍23

@HazATesmファイルを生成することは可能でしょうか。これにより、Webpackは連結とツリーの揺れでより良い結果を得ることができます。

hlehmann 2018年10月19日

👍3

マージリクエストごとにパッケージのバンドルサイズを追跡するCIツールを追加することをお勧めします。この問題が実際に100kBに増加したため、 https： //bundlephobia.com/result？p = @ sentry / browser @ 4.3.0を参照してください。

たとえば、 https：//github.com/siddharthkp/bundlesizeを試してください

Webpackのエントリポイントのデフォルトのパフォーマンスバジェットは250kbで、どのデバイスやネットワークでも適切なパフォーマンスを確実に得ることができます。セントリーの100kbは、その予算のかなりの部分を占めます。

jacobrask 2018年11月12日

👍5

このリグレッションの修正がロードマップにある場合、またはライブラリがサイズの予算なしで成長し続ける場合は、最新情報を入手してください。

私たちは顧客に支払いをしており、バックエンド、ネイティブ、Webの両方でSentryに多額の投資を行っていますが、ライブラリのサイズの3倍以上（[email protected]は31 kB）にアップグレードすることは正当化できません。

jacobrask 2018年11月13日

👍3

@jacobrask古いバージョンのライブラリに固執することができます。これは、 https： //www.onepixel.com/で行っていることであり、正常に機能しています👌。
dont-confuse-motion-with-progress

oliviertassinari 2018年11月13日

👍4

@jacobraskそれは間違いなく私たちのリストにあり、バンドルサイズを簡単に減らすことができるいくつかのぶら下がっている果物もあると思います。
ますます多くの人がこれを求めているので、おそらく予想よりも早くこれに取り組むでしょう。

HazAT 2018年11月13日

👍38

@HazAT
SentryブラウザSDKロールアップバンドルを最適化できます。バンドルminjsファイルには、繰り返される多くのtslibコードがあります。 __generator、__ assignなど。ブラウザ環境では、1つのコードを共有するのが最善です。ただし、ブラウザプロジェクトは別のパッケージdistファイルを使用します。たぶんgzipサイズを23Kから16Kに減らしてください。

gaterking 2018年11月14日

バンドルサイズは4.3.2でも同じです
https://bundlephobia.com/result?p=@sentry/browser @ 4.3.2からの変更に関係なく、
https://github.com/getsentry/sentry-javascript/pull/1738 :(

vkrol 2018年11月18日

@vkrol少なくともnpmパッケージでは、 @ gaterkingが行った変更を元に戻す必要がありました。
一方、CDNのバンドルはもっと小さくする必要があります。

確かに変更を再度追加しますが、たとえばtslibに依存する必要があるため、それについて話す必要があります。
また、タイピングがどのように生成されたかが壊れていました。

HazAT 2018年11月19日

@HazAT OK、ありがとう。

vkrol 2018年11月19日

@vkrol少なくともnpmパッケージでは、 @ gaterkingが行った変更を元に戻す必要がありました。
一方、CDNのバンドルはもっと小さくする必要があります。
確かに変更を再度追加しますが、たとえばtslibに依存する必要があるため、それについて話す必要があります。
また、タイピングがどのように生成されたかが壊れていました。

できるだけ早く願っています。

gaterking 2018年11月19日

@ gaterking @ kamilogorekすでに修正済みhttps://github.com/getsentry/sentry-javascript/pull/1751
「緊急」リリースを実行する必要があったため、元に戻しました。

HazAT 2018年11月19日

👍2 🎉1

クライアント側では、基本的にこれでエラーをキャプチャしてAPIに送信する必要があります。

このライブラリがこれほど複雑なことをしている他に何がありますか？

より単純なエラーレポーターがそのようなかなりのフットプリントを必要とする理由を理解するのは本当に難しいです😐

mindplay-dk 2018年11月27日

👍6

@ mindplay-dkこれは主にJavaScriptとブラウザが混乱しているためです^^
壊れた/間違ったスタックトレースを修正するために多くのことを行う必要があります。
「エラーをキャッチする」という単純なタスクも、見た目よりもはるかに複雑です。

HazAT 2018年11月27日

👍1

より単純なエラーレポーターがそのようなかなりのフットプリントを必要とする理由を理解するのは本当に難しいです😐

@ mindplay-dkそれは単純ではないからです。

すべてのブラウザでエラーをキャプチャし、それらを使用可能なデータ構造に統合するためのコードは次のとおりです： https ：//github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

kamilogorek 2018年11月27日

❤6

最近のサイズ縮小でよくやった、大いに感謝します。 👍

リンクされたファイルをひと目見ると、Opera 10のエラーを処理するためのコードが表示されますが、それでも本当に必要ですか？ TraceKitは、すでに大きかったRavenからの（現在の）2倍のサイズの増加も考慮していません。

いくつかの提案：

md5を削除します
async / awaitの使用を減らしてください。ES5へのコンパイルが不十分です。 https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378を出力コードと比較します（本番バンドルで「processEvent」を検索します）。そのファイル全体が本番バンドルで巨大になります。

jacobrask 2018年11月27日

👍1

package / coreなどの別のパッケージに共有コード（rewriteframes.tsのapp:///${base} ）はありますか？これらはクライアントでは使用されませんが、ノードで使用されます。

gaterking 2018年11月28日

単純ではないからです。

@kamilogorek yikes 、あなたは明らかに正しいです...私はJavaScriptが混乱していることに気づきました-私はこれまでこの分野を掘り下げたことがなかったと思います、これがどれほど悪いかはわかりませんでした。 JSでスタックトレースを処理する簡単な方法は本当にないと思います。ただ。うわぁ。 😐

mindplay-dk 2018年11月28日

ヘルパーを最小化しようとする代わりに、すでに述べたesmファイルを提供するだけで済みます。これは簡単で、今日のベストプラクティスですらあります。

async / awaitの使用を減らしてください。ES5へのコンパイルが不十分です。 https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378を出力コードと比較します（本番バンドルで「processEvent」を検索します）。そのファイル全体が本番バンドルで巨大になります。

これは間違った方法です。ES5用にさらに最適化するのではなく、最新のブラウザーを使用している80.07%用に最適化することがより重要です。

古いブラウザのサポートが必要なすべての人のために：
非同期関数は<script type="module">をサポートするすべてのブラウザーでサポートされているため（caniuse： esm 、 async ）、古いブラウザーのユーザーのみがより長く待つ必要があります（とにかく時間がかかります）

証拠：
160KB（es5、バンドル）> 119KB（esm、プレーンファイル）

したがって、esmファイルも（あまりにも）バンドルしてください。 /tsconfig.esm.json （ tsconfig.build.jsonを拡張）の設定moduleとtargetを$＃ esnextに変更するのと同じくらい簡単です。 tsconfig.build.json ＃$ファイルと同様のtsconfig.esm.json $ファイルをパッケージに追加し、ビルドとパッケージに追加して、 package.jsonのモジュールエントリを指定します

必要に応じて、そのためのPRを追加できます。

cromefire 2018年12月02日

👍8

必要に応じて、そのためのPRを追加できます。

@cromefireが大好きです:)

kamilogorek 2018年12月03日

vue cliのように、クラシックモードとモダンモードのどちらかを選択するオプションがあれば素晴らしいでしょう。最新バージョンはほとんどの最新ブラウザのみをサポートしているため、肥大化が少ない可能性があります。

または、webpack envのように機能して、ユーザーが必要なブラウザーサポートを指定できるようにするとさらに効果的です。多くの場合、これは簡単な機能ではありませんが、それを捨てたかっただけです:)

素晴らしい製品です！

bobmoff 2018年12月21日

その新しいPRを使用すると、babelを構成できますが、必要なブラウザーのみをサポートする必要があります

cromefire 2018年12月21日

👍1

@ sentry / browserのサイズはraven-jsのサイズの2倍以上です： 86kB対39kB（縮小）。

参考： @sentry/browserの最新バージョンのサイズは91.8kBに増加しました。出典： https ：//bundlephobia.com/result？p = @ sentry / browser @ 4.5.0

vkrol 2019年01月10日

@cromefireライブラリサイズの最適化にご協力いただきありがとうございます。

v4.5.0からの新しいesmビルドを使用しようとしましたが、多くのエラーが発生しました。 @sentry/utils/esmのモジュールを解決できなかったため、これらすべてがトリガーされます。

実際、新しいyarn installの後で、node_modulesにフォルダーが見つかりませんでした。（スクリーンショットを参照）

完全なエラーリスト



 ./node_modules/@sentry/core/esm/baseclient.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / async」を解決できません

 ./node_modules/@sentry/browser/esm/backend.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/browser/esm/tracekit.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/helpers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / browser / esm / integrations / pluggable'の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/core/esm/baseclient.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/core/esm/dsn.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/core/esm/integrations/extraerrordata.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / is」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/globalhandlers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/baseclient.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/basebackend.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/sdk.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/integration.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/integrations/dedupe.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/integrations/sdkinformation.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / logger」を解決できません

 ./node_modules/@sentry/hub/esm/hub.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / hub / esm'の '@ sentry / utils / esm / logger'を解決できません

 ./node_modules/@sentry/browser/esm/client.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/tracekit.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/useragent.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/trycatch.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/helpers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / browser / esm / integrations / pluggable'の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / browser / esm / integrations / pluggable'の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/pluggable/ember.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / browser / esm / integrations / pluggable'の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/transports/beacon.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / transports」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/browser/esm/transports/fetch.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / transports」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/core/esm/baseclient.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/core/esm/integrations/dedupe.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / misc」を解決できません

 ./node_modules/@sentry/hub/esm/scope.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / hub / esm'の '@ sentry / utils / esm / misc'を解決できません

 ./node_modules/@sentry/hub/esm/hub.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / hub / esm'の '@ sentry / utils / esm / misc'を解決できません

 ./node_modules/@sentry/browser/esm/parsers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/trycatch.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/helpers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/core/esm/api.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/core/esm/basebackend.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/core/esm/dsn.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / object」を解決できません

 ./node_modules/@sentry/hub/esm/scope.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / hub / esm'の '@ sentry / utils / esm / object'を解決できません

 ./node_modules/@sentry/core/esm/integrations/pluggable/rewriteframes.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / core / esm / integrations / pluggable'の「@sentry / utils / esm / path」を解決できません

 ./node_modules/@sentry/browser/esm/parsers.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / string」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / string」を解決できません

 ./node_modules/@sentry/core/esm/baseclient.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm」の「@sentry / utils / esm / string」を解決できません

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / core / esm / integrations」の「@sentry / utils / esm / string」を解決できません

 ./node_modules/@sentry/browser/esm/backend.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm」の「@sentry / utils / esm / supports」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / integrations」の「@sentry / utils / esm / supports」を解決できません

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.jsのエラー

モジュールが見つかりません：エラー： './ node_modules / @ sentry / browser / esm / integrations / pluggable'の「@sentry / utils / esm / supports」を解決できません

 ./node_modules/@sentry/browser/esm/transports/fetch.jsのエラー

モジュールが見つかりません：エラー：「。/node_modules / @ sentry / browser / esm / transports」の「@sentry / utils / esm / supports」を解決できません

screenshot 2019-01-10 at 4 37 45 pm

pascaliske 2019年01月10日

@pascaliske esmビルドはまだ実験段階にあり、まだ公開されていません。すべてがテストされたら実行し、結果をここに投稿します。

kamilogorek 2019年01月10日

@kamilogorekはい、わかっています。これらのエラーをお知らせしたかっただけです。 🙂

pascaliske 2019年01月10日

❤1

ありがとう、@ pascaliskeに感謝します！私たちはできるだけ早くESMサポートを提供しようとします:)

kamilogorek 2019年01月10日

👍1

@pascaliske最初yarn build試してください

cromefire 2019年01月10日

@cromefireいいえ、これは私が思うのに役立ちません。 npmからパッケージをダウンロードしたので、利用可能なビルド環境がありません。 🙂

ソースコードを少し検索して、 @sentry/browserと@sentry/utilsを比較しました。これが問題だと思います： packages / utils / tsconfig.build.json＃L5とpackages / browser / tsconfig.build.json＃L5 。通常のビルド出力がesmビルド出力を上書きする可能性はありますか？ 🤔

node_modulesフォルダー内のbrowserパッケージには、通常とesmの両方からのビルド出力が含まれています。ただし、 utilsパッケージには、ルートフォルダーに通常のビルド出力しか含まれていません。

pascaliske 2019年01月10日

すでにリリースされていますか？

cromefire 2019年01月10日

😄1

ソースコードを少し検索して、@ centry / browserと@sentry / utilsを比較しました。これが問題だと思います：packages / utils / tsconfig.build.json＃L5とpackages / browser / tsconfig.build.json＃L5。通常のビルド出力がesmビルド出力を上書きする可能性はありますか？ 🤔

いいえ、esmtsconfigを確認する必要があります

cromefire 2019年01月10日

明日見ていきます

cromefire 2019年01月10日

やあみんな！また、Sentryのバンドルサイズのいくつかを調べて、これに出くわしました： https ：//github.com/getsentry/sentry-javascript/blob/master/packages/minimal/package.json#L20

ごく少数の関数（拡散と割り当て）にサイズのチャンクを追加しているようです。私はTypescriptにあまり詳しくありませんが、実行時にこれを行う必要がありますか？

IanMitchell 2019年01月11日

また、 @sentry/typesが_runtime_依存関係である必要があり、 devDependenciesに配置されていない理由もわかりません...

evocateur 2019年01月11日

❤1 👍1

typescriptのすべてのユーザーの@evocateurこれは必要です。 Typescriptはそれをすべて最適化します。
（ただし、 .d.tsファイルには必要な場合があります）

cromefire 2019年01月11日

@IanMitchell esmビルドには使用されませんが、通常のビルドには使用されます

cromefire 2019年01月11日

4.5.0のbundle.jsには、Severity、htmlElementAsString、htmlElementAsString、uuid4、parseUrlなどの重複コードが多数含まれています。これは意図できません！

WebPack + Babel 7を使用してimport * as Sentry from '@sentry/browser'; （ファイル内の唯一の行として）を介してバンドルを実行した場合も同じことが起こり、バンドルされたサイズは326kbになります。参照： sentry.bundle.js.txt
他のバンドルにも同じ構成を使用していますが、この問題が発生するバンドルは歩哨だけです。

bundle.min.jsの内部に重複するコードはありません。これは、ロールアップによるツリーの揺れの結果である可能性があります。

したがって、一時的な解決策はimport '@sentry/browser/build/bundle.min.js';を使用することです

RiZKiT 2019年01月11日

👍1

4.5.0のbundle.jsには、Severity、htmlElementAsString、htmlElementAsString、uuid4、parseUrlなどの重複コードが多数含まれています。これは意図できません！

これが、 esmビルドがある理由です（または少なくとも1つの理由です）。とにかくバンドラーを使用している場合は、ビルド前のバンドルを使用するよりも効率的です。（これはベータ版であり、現在も壊れています）

cromefire 2019年01月11日

これをもう一度見てみると、これを小さくすることはできないと思います。ずっと小さい。

ソースマップをサポートするスタックトレースは、このライブラリで最も複雑なものである必要があります。そうではないように見えますか？フットプリントのほとんどは、node.jsクライアントと共有するコアフレームワークからのもののようです。フットプリントは実際には問題ではないと確信しています。

誤解しないでください。これは美しいアーキテクチャであり、TypeScriptの非常に優れた機能です。

しかし、クライアント側では、それはあまり意味がありません。小さくて高速にロードする必要があります。特にこれほど低レベルのものの場合、ソースコードが美しいかどうかは問題ではありません。私が知る限り、その印象的なのは、アーキテクチャが将来的に多くのバイトを消費していることです。

比較のために：

私はTrackJSに出くわしました。これは、〜10KBのパッケージで同様の機能（ソースマップを使用したクロスブラウザースタックトレース）を備えています。

元のTraceKitは約3KBmin + gzです。

x-browserポリフィルを使用して〜8KB min + gzまたは〜10KBでソースマップビット（クライアント側）を実行できるこのライブラリを見つけました。

それを超えて、それはブラウザ情報の数ビットを収集し、期待されるJSON形式でラップし、それを投稿することの問題です-それは数KB min + gzを超えてはなりません。それが必要ですか？

これは、ほとんどの人が必要としているものよりもはるかに多くのアーキテクチャであるように感じます。プラグインのサポートが必要な場合は、JSON投稿に情報をプラグインできる単純なフックが必要かもしれませんが、それだけです。

最近はメガバイトのJSをデプロイするのが一般的ですが、モバイルで高速に読み込まれるプロジェクトを確実に出荷するために、厳格なコンテンツポリシーが機能しており、JS予算の半分以上をエラーに費やすことを正当化することはできません-ロギング-おそらく10％がトップなので、15〜20KBのようなものが妥当と思われます。

私はあなたの製品が大好きですが、このクライアントを展開することはできません😐

mindplay-dk 2019年01月13日

👍11

このような場合は、スタックトレースとソースマップの解析をサーバーに委任することをお勧めします。サーバーでは、サイズは関係ありません。

cromefire 2019年01月13日

👍2

このような場合は、スタックトレースとソースマップの解析をサーバーに委任することをお勧めします。サーバーでは、サイズは関係ありません。

@cromefire面白いアイデア。それが、たとえばTrackJSがサイズを抑えるために行うことなのだろうか。（彼らのクライアントはプロプライエタリです-縮小されたソースしか利用できないので、彼らが何をしているのかを言うのは難しいです。私がそれをインストールして、何がネットワーク上を移動するかを見ることができたとしましょう...）

mindplay-dk 2019年01月13日

ブラウザでソースマップを解決するためのより簡単なパッケージは次のとおりです。source -map- resolveat〜2KB min + gz ...これはポリフィルなしですが、（これが機能する場合）ポリフィルを必要としない最新のブラウザ。

mindplay-dk 2019年01月13日

それはポリフィルなしです

ポリフィルはesmビルドに含めるべきではないので、それも機能する可能性がありますが、バッケンドではさらに少なくなります

cromefire 2019年01月13日

@cromefireESMビルドは4.5.1で利用できるようになりました。戦闘テスト済みであることを確認したいので、まだ文書化されていませんが、これまでのところ非常に優れています。私は通常のwebpackビルドをbabelloaderでチェックしましたが、それは魅力のように機能します。

それを超えて、それはブラウザ情報の数ビットを収集し、期待されるJSON形式でラップし、それを投稿することの問題です-それは数KB min + gzを超えてはなりません。それが必要ですか？

@ mindplay-dkクライアント側では、スタックトレースの解決は実行されません。それはすべてサーバー上で行われるため、最初にソースマップをアップロードして、それらのサポートを取得する必要があります。

しかし、私たちがしていることは次のとおりです。

Sentryに送信されるデータを変更/フィルタリング/拡張できるカスタムフックを提供するイベントプロセッサ
すべてのネイティブAPIラッピングを処理します
すべてのユーザーインタラクション、ネットワークコール、ナビゲーションからブレッドクラムをキャプチャします
ユーザーエージェントデータを抽出する
リンクされたエラーから追加のエラーデータを抽出するため、他の言語のように複数のエラーレベルを作成できます
両方のグローバルエラーハンドラーをリッスンします
複数のネットワークトランスポートを提供して、ユーザーが常に現在の環境に最適なトランスポートを取得できるようにします
エッジケースの10分の1、さまざまなエラー（カスタムオブジェクトも含む）オブジェクト、およびさまざまなネイティブ実装を処理します
スペアまたは壊れたエラー情報へのフォールバックを提供する
何か問題が発生した場合に、独自のSentryインスタンスがフラッディングしたり、無料のイベントが不足したりしないように、イベントをバッファリングします

ほんの数例を挙げると。「エラーをキャッチし、データを追加して送信する」のと同じくらい簡単にできることを本当に望んでいます。
ただし、現実の世界では、数十の入力があり、数十のソースエラーが発生する可能性があり（すべて異なるデータを提供します）、動作が異なる数十の環境があります。
これを約10〜15kBに下げる方法については、今後も確実に取り組んでいきますが、しばらく時間がかかります。私たちは今使うことができる非常に多くのリソース（人/時間を読む）しか持っていません。

最近はメガバイトのJSをデプロイするのが一般的ですが、モバイルで高速に読み込まれるプロジェクトを確実に出荷するために、厳格なコンテンツポリシーが機能しており、JS予算の半分以上をエラーに費やすことを正当化することはできません-ロギング-おそらく10％がトップなので、15〜20KBのようなものが妥当と思われます。

その後、ローダーを使用できます– https://docs.sentry.io/platforms/javascript/loader/ :)

kamilogorek 2019年01月14日

👍2

その後、ローダーを使用できます– https://docs.sentry.io/platforms/javascript/loader/ :)

しかし悲しいことに、webpackの解決策はありません

ほんの数例を挙げると。「エラーをキャッチし、データを追加して送信する」のと同じくらい簡単にできることを本当に望んでいます。

多分誰かがtc39で何かを提案するべきです。プロセスがどのようになっているのかを確認する必要がありますが、スタックトレースの読み取りなどの標準化されたAPIを提案できる人がいるかもしれません。

cromefire 2019年01月14日

しかし悲しいことに、webpackの解決策はありません

どういう意味？ローダーと共存できるパッケージがあり、インポートしてバンドルできますが、エラーまたはcaptureException呼び出しが発生すると、非同期でロードされたSDKと通信しますか？

kamilogorek 2019年01月14日

どういう意味？ローダーと共存できるパッケージがあり、インポートしてバンドルできますが、エラーまたはcaptureException呼び出しが発生すると、非同期でロードされたSDKと通信しますか？

はい、正しく要約すると、ローダーはcdn経由でのみ利用できます

cromefire 2019年01月14日

@cromefireはい、「スニペット」として使用することを目的としているためです。ただし、ここでコードを見つけることができますhttps://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js

kamilogorek 2019年01月14日

esmを使用すると、これも独自のコードから使用できるため、新しいPRを開く必要があるようです。

cromefire 2019年01月14日

loaderをminimal $と一緒に使用し、最終的なバンドルに数kBを効果的に追加できるソリューションが登場します。

kamilogorek 2019年01月14日

👍8

1kb未満でロードするローダーを作成するのは難しいことではないので、簡単なローダーを作成してみます。

cromefire 2019年01月14日

ここで大いに役立つ可能性があることの1つは、一部の機能がオプションであるかどうかです。

たとえば、本当に素晴らしい最低限のものは次のようになります。

ネイティブエラースタックトレース（一部のブラウザでは最適ではないことを気にしないでください）
ユーザーエージェント
タイムスタンプ
URL
サーバー上のソースマップと一致する

追加の機能は、単なるアドオンにすることができます。最新のブラウザのみをサポートしているため、古いブラウザの風変わりな動作をすべて回避する必要はありません。

LarsDenBakker 2019年01月15日

👍4

これは、webpackコード分割を使用し、エラー時にのみ歩哨クライアントをロードすることで解決しました。

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);

ブレッドクラムの作成、追加、タグの追加など、さらにいくつかのことを行いますが、歩哨クライアントを使用してバンドルを大きくしないことも可能です。

danielhusar 2019年01月26日

👍30 🚀7

これは私が＃1846で実装したものです

cromefire 2019年01月26日

他の人に役立つかもしれません：
私は次の方法でESMビルドをwebpack（ 4.29.5 ）で使用しました。

package.jsonにはmodule宣言がないため、標準ビルドではなくESMビルドを使用するためにwebpackエイリアスを追加します

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',
        ),
    }

ESMビルドにはES2015よりも新しい機能が含まれているように見えるため、 sentry/.+/esm babel-loader構成に追加します。

{
    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についても同様です）

Limess 2019年02月25日

@Limess

@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
}

また、必要に応じてbabel構成をカスタマイズすることを忘れないでください： babel docs 、そうでない場合は、esmバージョンを使用する価値はありません

cromefire 2019年02月25日

更新：バンドルサイズを大幅に削減するSDKの新しいメジャーバージョンを間もなくリリースします。

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

ビルド済みのCDNバージョンでも、より良い結果が得られます（bundlephobiaがどのように測定するかはわかりません）

ES6:  14.3535 kB
ES5:  15.6846 kB

とにかく、バンドルサイズをさらに縮小するためにまだ取り組んでいることをお知らせしたいと思いますが、これはすでに正しい方向への大きな一歩になるはずです。

アップグレードに関する注意： SDKには多くの内部変更があるため、これは大きな問題です。あなたの側で必要なコード変更はないはずです。現在、sentry.ioで新しいバージョンをテストして、その動作を確認しています。参照： https ：//github.com/getsentry/sentry/pull/12492

免責事項：私たちが行っているように、まだ本番環境で5.0.0-rc.xを使用しないでください🙈

HazAT 2019年03月21日

🎉23 👍19 👀3

@HazATはこれを真剣に受け止めてくれてありがとう！これは大きな前進です-私はすでにこれを今展開することについてあまり心配していません:-)

mindplay-dk 2019年03月23日

👍3

kamilogorek 2019年04月01日

❤17 👍17 🚀10 🎉10

@kamilogorek好奇心から、 3.xブランチの最後のバージョンを比較に追加できますか？

Sija 2019年04月01日

👍1

私はこの問題を締めくくります。今のところ、v4からv5への移行で導入した削減は正しい方向への傾向であると考えています。今後もさらに削減を図り、今後も増やすことを意識していきます。

簡単に言うと、マイレージを使用しているバンドラーによってマイレージが異なる可能性があるため、実際には「バンドル」サイズを比較するだけです。出荷するCDNバンドル番号は次のとおりです。

| パッケージ| バージョン| バイト単位のサイズ| サイズ（KB）| リンク|
| ----------------- | --------- | --------------- | ----- ------- | ------------------------------------------ ---------- |
| raven-js | 3.27.0 | 13741バイト| 〜13.4kB | https://cdn.ravenjs.com/3.27.0/raven.min.js |
| @ sentry / browser | 4.6.6 | 22607バイト| 〜22.1kB | https://browser.sentry-cdn.com/4.6.6/bundle.min.js |
| @ sentry / browser | 5.0.3 | 16059バイト| 〜15.7kB | https://browser.sentry-cdn.com/5.0.3/bundle.min.js |

v5では、出荷とesmビルドも行います。つまり、バンドラーを使用している場合は、未使用のコードパスをツリーシェイクできるはずです。

お待ちいただき、ありがとうございます🙇

HazAT 2019年04月02日

👍28 🎉13 ❤6

@HazAT @kamilogorek素晴らしい！

vkrol 2019年04月02日

@Limess今日でもこれを使用することは適切ですか： @sentry/browser/esm @sentry/browser ？

import * as Sentry from "@sentry/browser/esm";のようにインポートされ、 webpack -pにバンドルされていますが、バンドルサイズに違いはありません。プラグインやローダーのない裸のwebpack.config.jsもあります。

0xbkt 2020年10月05日

@ 0xbkt少なくとも今は、ロールアップを使用してアプリをバンドルする場合、バンドルサイズに違いはありません。

piotr-cz 2020年10月12日

Sentry-javascript: @ centry /ブラウザのサイズ

パッケージ+バージョン

バージョン：

説明

最も参考になるコメント

全てのコメント69件

関連する問題