Sentry-javascript: @sentry/размер браузера

Эй, спасибо, что подняли это.
Хотя мы понимаем и в целом согласны с вашими опасениями по поводу размера пакета, я думаю, будет справедливо сначала сравнить размеры пакета gzip, а не размер несжатого мини-файла:

@sentry/browser составляет 21,3799 КБ
raven-js 13,44 КБ

Кроме того, хотя это может быть применимо не ко всем, мы предоставляем и обычно помогаем людям использовать наш загрузчик CDN, который настроит SDK для вас на вашем веб-сайте.

см.: https://docs.sentry.io/quickstart/?platform=browser

Занимаемая площадь и влияние на время загрузки страницы этого скрипта <1 КБ заархивированы с сохранением той же функциональности.

так что вкратце:
Мы знаем об этом, мы знаем, что есть возможности для улучшения, но сейчас это не является главным приоритетом.

Я думаю, будет справедливо сначала сравнить размеры пакета gzip вместо размера несжатого минифицированного файла:

Я бы сказал, что также справедливо сравнивать уменьшенные размеры, поскольку проблемы с производительностью возникают не только из-за загрузки javascript, но также из-за синтаксического анализа и выполнения. ~ 92 КБ довольно много и может добавить до 1 секунды времени анализа на младших устройствах (только для этой одной библиотеки!).

Я не уверен, откуда вы берете число < 1KB для сценария CDN. Не могли бы вы уточнить? Когда я открываю https://browser.sentry-cdn.com/4.0.4/bundle.min.js , я вижу сжатый файл размером 22 КБ.

Вы должны знать, что sdk от sentry — это лишь одна из многих библиотек, которые включают разработчики.

PS: я люблю сентри, это было очень полезно для нас. Веб-производительность — это то, чем я увлечен. ;)

@klaemo
Хе-хе, не беспокойтесь 😅

Как я уже сказал, мы знаем, и не то чтобы мы не хотели, чтобы он был меньше.
Наивысшим приоритетом для нас была поставка нового SDK, мы будем работать над увеличением размера пакета с течением времени.
Мы можем предпринять еще много шагов, например: использовать tslib , объединить строки...
Так что есть много возможностей для улучшений.

Извините, ссылка, которую я разместил ранее, уже устарела 🙃
Я имел в виду _Loader_: https://docs.sentry.io/platforms/javascript/loader/
Хотя у _Loader_ также есть свои ограничения из-за его асинхронной природы, и, в конце концов, он по-прежнему извлекает и внедряет SDK (даже если он асинхронный), это альтернатива, которую мы предлагаем, потому что люди просили об этом.

@HazAT Извините, ребята, но не могли бы вы указать дату выпуска следующей версии?
Я имею в виду, что в ветке #master уже есть некоторые изменения, но они еще не выпущены. Тем не менее, он решает, что версия 4x может использоваться для проектов Angular5+.

@rayzru Только что выпустил 4.0.5 , но, пожалуйста, сохраняйте сообщения, связанные с этой темой.

На мой взгляд, это определенно регресс и серьезная причина не обновляться до новой версии.

💯 Я как раз собирался обновиться, пока не заметил, что:

• до: https://bundlephobia.com/[email protected]
• после: https://bundlephobia.com/result?p=@sentry/browser @4.0.1

По крайней мере , размер пакета меньше , но я думаю, что ⚠️ +10 КБ gzip-сжатого JavaScript в комплекте — это существенно. Будем ждать, продолжайте в том же духе :)

@HazAT Возможно ли создать файлы esm. Это позволило бы веб-пакету иметь лучший результат с конкатенацией и встряхиванием дерева.

Возможно, вы захотите добавить какой-нибудь инструмент CI для отслеживания размера пакета для каждого мерж-реквеста. После этой проблемы он фактически вырос до 100 КБ, см. https://bundlephobia.com/result?p=@sentry/browser @4.3.0.

Попробуйте, например, https://github.com/siddharthkp/bundlesize

Бюджет производительности по умолчанию для точки входа в Webpack составляет 250 КБ, чтобы обеспечить достойную производительность на любом устройстве и в любой сети. 100 КБ Sentry занимают довольно много в этом бюджете.

Пожалуйста, держите нас в курсе, если исправление этой регрессии вообще включено в дорожную карту, или если библиотека будет продолжать расти без размера бюджета.

Мы платим клиентам и вкладываем значительные средства в Sentry как в бэкэнде, так и в веб-версии, но обновление до более чем трехкратного размера библиотеки ([email protected] составляет 31 КБ) не является чем-то, что мы можем оправдать.

@jacobrask Вы можете использовать более старую версию библиотеки, это то, что мы делаем на https://www.onepixel.com/ , она работает нормально 👌.

@jacobrask Это определенно в нашем списке, и мы также думаем, что есть несколько низко висящих фруктов, где мы можем легко уменьшить размер нашего пакета.
Все больше и больше людей просят об этом, поэтому мы, вероятно, займемся этим раньше, чем ожидалось.

@ХазАТ
Пакет Sentry browser SDK может быть оптимизирован. В файле бандла min js повторяется много кода tslib. Например, __generator, __assign. В браузере env лучше всего использовать один код. Но проект браузера использует другой дистрибутивный файл пакетов. Возможно, уменьшите размер gzip с 23 КБ до 16 КБ.

Размер пакета такой же, как и в 4.3.2.
https://bundlephobia.com/result?p=@sentry/browser @4.3.2 независимо от изменений с
https://github.com/getsentry/sentry-javascript/pull/1738 :(

@vkrol Нам пришлось отменить изменения, внесенные @gaterking , по крайней мере, для пакета npm.
Пакет на CDN, с другой стороны, должен быть меньше.

Мы обязательно добавим изменения, но нам нужно поговорить об этом, так как нам нужна зависимость, например, от tslib .
Также было нарушено то, как были сгенерированы типы.

@HazAT Хорошо, спасибо.

@vkrol Нам пришлось отменить изменения, внесенные @gaterking , по крайней мере, для пакета npm.
Пакет на CDN, с другой стороны, должен быть меньше.

Мы обязательно добавим изменения, но нам нужно поговорить об этом, так как нам нужна зависимость, например, от tslib .
Также было нарушено то, как были сгенерированы типы.

Надеюсь как можно скорее.

@gaterking @kamilogorek Уже исправил https://github.com/getsentry/sentry-javascript/pull/1751
Нам просто нужно было сделать «срочный» релиз, поэтому мы отменили его.

На стороне клиента я в основном хочу, чтобы это фиксировало ошибки и отправляло их в API.

Что еще эта библиотека делает такого сложного?

Действительно трудно понять, почему более простой генератор ошибок должен занимать такое значительное место 😐

@mindplay-dk Это в основном потому, что JavaScript и браузеры в беспорядке ^^
Нам нужно много исправить сломанные/неправильные трассировки стека.
Простая задача «просто ловить ошибки» также намного сложнее, чем кажется.

Действительно трудно понять, почему более простой генератор ошибок должен занимать такое значительное место 😐

@mindplay-dk, потому что это не просто.

Вот код для простого захвата ошибок во всех браузерах и объединения их в полезную структуру данных: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts.

Хорошая работа по недавнему уменьшению размера, большое спасибо. 👍

Беглый взгляд на связанный файл показывает код для обработки ошибок для Opera 10, действительно ли он все еще требуется? TraceKit также не учитывает (в настоящее время) двукратное увеличение размера по сравнению с Raven, который и без того был большим.

Некоторые предложения:

• Удалить md5
• Уменьшите использование async/await, он плохо компилируется в ES5. Сравните https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 с выходным кодом (поиск «processEvent» в производственном пакете). Весь этот файл становится огромным в производственном комплекте.

Есть ли общий код ( app:///${base} в rewriteframes.ts) в других пакетах, таких как package/core? Они не используются клиентом, но используются узлом.

потому что это не просто.

@kamilogorek yikes, вы, очевидно, правы ... Я понял, что JavaScript - это беспорядок - я думаю, я никогда раньше не копался в этой области, я не осознавал, насколько это плохо. Я думаю, что на самом деле нет простого способа обрабатывать трассировку стека в JS. Просто. Угу. 😐

Вместо того, чтобы просто пытаться минимизировать помощников, вы можете просто предоставить уже упомянутые файлы 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 ), поэтому только пользователям старых браузеров нужно ждать дольше (в любом случае для них это занимает больше времени).

Доказательство:
160 КБ (ES5, в комплекте)> 119 КБ (ESM, простые файлы)

Поэтому, пожалуйста, объедините файл esm (тоже), это так же просто, как изменить настройку module и target в /tsconfig.esm.json (которая расширяет tsconfig.build.json ) на esnext , добавив в пакеты файлы tsconfig.esm.json , аналогичные файлам tsconfig.build.json , добавьте их в сборку и пакет и укажите запись модуля в файле package.json

Если хотите, я могу добавить PR для этого.

Если хотите, я могу добавить PR для этого.

Мне бы это понравилось @cromefire :)

Было бы здорово, если бы была возможность выбирать между классическим и современным режимом, например vue cli. Где современная версия поддерживает только большинство современных браузеров и, следовательно, может быть менее раздутой.

Или даже лучше, если бы он мог работать как webpack env, чтобы пользователь мог указать необходимую поддержку браузера. Конечно, это не простая функция, но я просто хотел ее выбросить :)

Потрясающий продукт!

С этим новым PR вы можете настроить babel, однако вы хотите поддерживать только те браузеры, которые вам нужны.

Размер @sentry/browser более чем в два раза превышает размер raven-js: 86 КБ против 39 КБ (уменьшенный).

К вашему сведению: размер последней версии @sentry/browser увеличен до 91,8 КБ . Источник: https://bundlephobia.com/result?p=@sentry/browser @4.5.0.

@cromefire Спасибо за вашу работу по оптимизации размера библиотеки!

Я только что попробовал использовать новую сборку esm из версии 4.5.0, но получил много ошибок. Все они срабатывают, потому что модули из @sentry/utils/esm не могут быть разрешены.

На самом деле я не нашел папки в node_modules после нового yarn install . (См. скриншот)

 ОШИБКА в ./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 . Я думаю, что проблема в этом: packages/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 . Возможно ли, что выходные данные обычной сборки перезаписывают выходные данные сборки esm? 🤔

Внутри моей папки node_modules пакет browser содержит выходные данные сборки как из обычного, так и из esm. Но пакет utils содержит только обычный вывод сборки в корневой папке.

Он уже выпущен?

Я немного поискал в исходном коде и сравнил @sentry/browser с @sentry/utils. Я думаю, что проблема в этом: packages/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 . Возможно ли, что выходные данные обычной сборки перезаписывают выходные данные сборки esm? 🤔

Нет, надо посмотреть esm tsconfig

Завтра посмотрю

Всем привет! Мы также изучали некоторые размеры пакетов в Sentry и наткнулись на это: https://github.com/getsentry/sentry-javascript/blob/master/packages/minimal/package.json#L20 .

Похоже, он добавляет кусок размера для очень немногих функций (распространение и назначение). Я не очень хорошо знаком с Typescript, но нужно ли это для этого во время выполнения?

Мне также непонятно, почему @sentry/types должен быть зависимостью _runtime_, а не находиться в devDependencies ...

@evocateur для всех пользователей машинописного текста это необходимо. Typescript оптимизирует все это.
(но может понадобиться для файлов .d.ts )

@IanMitchell Он используется не для сборки esm, а для обычных.

Пакет bundle.js версии 4.5.0 содержит много повторяющегося кода, например Severity, htmlElementAsString, htmlElementAsString, uuid4, parseUrl и т. д. Это не может быть задумано!

То же самое происходит, когда я делаю Bundle через import * as Sentry from '@sentry/browser'; (как единственную строку в файле) с помощью WebPack + Babel 7, тогда размер пакета составляет 326kb. См.: sentry.bundle.js.txt .
Мы используем ту же конфигурацию и для других наших пакетов, но sentry — единственный пакет с этой проблемой.

В пакете bundle.min.js нет повторяющегося кода внутри , что может быть результатом сотрясения дерева при сворачивании.

Итак, временное решение — использовать import '@sentry/browser/build/bundle.min.js';

Пакет bundle.js версии 4.5.0 содержит много повторяющегося кода, например Severity, htmlElementAsString, htmlElementAsString, uuid4, parseUrl и т. д. Это не может быть задумано!

Вот почему (или по крайней мере одна из причин) существует сборка esm . В любом случае, если у вас есть упаковщик, это более эффективно, чем использование предварительной сборки. (Это всего лишь бета-версия, и сейчас она все еще не работает)

Глядя на это снова, я не верю, что это не может быть меньше. Значительно меньше.

Трассировка стека с поддержкой исходной карты должна быть самой сложной вещью в этой библиотеке — и похоже, что это не так? Похоже, что большая часть отпечатка приходится на основную структуру, которую он разделяет с клиентом node.js, где я уверен, что на самом деле это не проблема.

Не поймите меня неправильно, это красивая часть архитектуры — очень хорошая работа TypeScript.

Но на стороне клиента это мало что значит. Он должен быть небольшим и быстро загружаться — особенно для чего-то такого низкого уровня, как это, на самом деле не имеет значения, красивый исходный код или нет. Насколько я могу судить, все, что впечатляет, — это архитектура, которая требует большого количества байтов.

Для сравнения:

Я наткнулся на TrackJS , который имеет аналогичные возможности (кросс-браузерная трассировка стека с исходными картами) в пакете ~ 10 КБ.

Исходный TraceKit составляет ~ 3 КБ мин + gz.

Я нашел эту библиотеку , которая может выполнять бит исходной карты (на стороне клиента) в ~ 8 КБ min + gz или ~ 10 КБ с полифилами x-браузера.

Помимо этого, нужно собрать несколько битов информации о браузере, завернуть в ожидаемый формат JSON и опубликовать ее, что не должно превышать несколько КБ мин+гз. Должен ли?

Я чувствую, что это просто больше архитектуры, чем то, что нужно большинству людей. Если мне вообще нужна какая-либо поддержка плагинов, может быть, мне нужен простой хук, который позволит мне вставлять информацию в сообщение JSON, но это все.

Я знаю, что в наши дни принято развертывать мегабайты JS, но у нас действуют строгие политики в отношении контента, чтобы гарантировать, что мы выпускаем проекты, которые быстро загружаются на мобильных устройствах, и я не могу оправдать расходы более половины нашего бюджета JS на ошибки. ведение журнала - может быть, максимум 10%, поэтому что-то вроде ~ 15-20 КБ кажется разумным.

Мне нравится ваш продукт, но я не могу развернуть этот клиент 😐

Для чего-то подобного может быть хорошей идеей делегировать синтаксический анализ трассировки стека и исходной карты на сервер, где размер не имеет значения.

Для чего-то подобного может быть хорошей идеей делегировать синтаксический анализ трассировки стека и исходной карты на сервер, где размер не имеет значения.

@cromefire интересная идея. Интересно, это то, что, например, TrackJS делает, чтобы уменьшить размер? (Их клиент проприетарный - доступен только минимизированный исходный код, поэтому трудно сказать, что они делают. Допустим, я мог бы установить его и посмотреть, что передается по сети...)

Вот более простой пакет для разрешения исходных карт в браузере: source-map-resolve at ~2KB min+gz... это без полифиллов, но (если это сработает), я думаю, мы сможем получить ~10KB для современные браузеры, которым не нужны полифиллы.

это без полифиллов

Полифилов не должно быть в билде esm , так что это тоже может работать, но в баченде их будет еще меньше

Сборка @cromefire ESM теперь должна быть доступна в 4.5.1 . Все еще не задокументировано, так как мы хотим убедиться, что это проверено в бою, но пока все хорошо. Я проверил обычную сборку веб-пакета с помощью загрузчика babel, и она работает как шарм.

Помимо этого, нужно собрать несколько битов информации о браузере, завернуть в ожидаемый формат JSON и опубликовать ее, что не должно превышать несколько КБ мин+гз. Должен ли?

@mindplay-dk мы не выполняем разрешение трассировки стека на стороне клиента. Все это делается на сервере, поэтому вам нужно загрузить исходные карты в первую очередь, чтобы получить поддержку для них.

Что мы делаем, хотя это:

• обработчики событий для предоставления настраиваемых перехватчиков, которые позволяют вам изменять/фильтровать/улучшать данные, отправляемые в Sentry
• позаботьтесь обо всей нативной оболочке API
• собирать навигационные цепочки из всех пользовательских взаимодействий, сетевых вызовов, навигации
• извлечь данные пользовательского агента
• извлекать дополнительные данные об ошибках из связанных ошибок, чтобы вы могли создавать несколько уровней ошибок, как в других языках
• слушать оба глобальных обработчика ошибок
• предоставить несколько сетевых транспортов, чтобы пользователь всегда получал лучший для своей текущей среды
• позаботьтесь о десятках крайних случаев и различных объектах ошибок (даже пользовательских) и различных нативных реализациях
• предоставлять запасные или неработающие сведения об ошибках
• буферизовать события, чтобы вы не затопили свой собственный экземпляр Sentry или не исчерпали бесплатные события, если что-то пойдет не так

Просто назвать несколько. Я действительно хотел бы, чтобы это было так же просто, как «поймать ошибку, добавить некоторые данные и отправить их».
Однако в реальном мире существуют десятки входных данных, десятки источников, из которых может исходить ошибка (все они предоставляют разные данные) и десятки сред, поведение которых различается.
Мы определенно продолжим работу над тем, как уменьшить это до ~10-15 КБ, но это займет некоторое время. У нас есть столько ресурсов (читай людей/времени), сколько мы можем потратить сейчас.

Я знаю, что в наши дни принято развертывать мегабайты JS, но у нас действуют строгие политики в отношении контента, чтобы гарантировать, что мы выпускаем проекты, которые быстро загружаются на мобильных устройствах, и я не могу оправдать расходы более половины нашего бюджета JS на ошибки. ведение журнала - может быть, максимум 10%, поэтому что-то вроде ~ 15-20 КБ кажется разумным.

Тогда вы можете использовать наш загрузчик — https://docs.sentry.io/platforms/javascript/loader/ :)

Тогда вы можете использовать наш загрузчик — https://docs.sentry.io/platforms/javascript/loader/ :)

Но, к сожалению, нет решения для веб-пакета

Просто назвать несколько. Я действительно хотел бы, чтобы это было так же просто, как «поймать ошибку, добавить некоторые данные и отправить их».

Может быть, кто-то должен что-то предложить на tc39 . Мне нужно посмотреть, как идет процесс, но, возможно, кто-то может предложить стандартизированный API для чтения трассировки стека.

Но, к сожалению, нет решения для веб-пакета

Что ты конкретно имеешь ввиду? Наличие пакета, который мог бы сосуществовать с загрузчиком, который можно было бы импортировать и связывать, но затем взаимодействовать с асинхронно загружаемым SDK после возникновения ошибки или вызова CaptureException?

Что ты конкретно имеешь ввиду? Наличие пакета, который мог бы сосуществовать с загрузчиком, который можно было бы импортировать и связывать, но затем взаимодействовать с асинхронно загружаемым SDK после возникновения ошибки или вызова CaptureException?

Да, если я правильно понимаю, загрузчик доступен только через cdn.

@cromefire да, потому что он предназначен для использования в качестве «фрагмента». Однако вы можете найти его код здесь https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js .

Похоже, мне нужно открыть новый PR, потому что с esm это также можно было бы использовать из вашего собственного кода.

У нас есть решение, которое позволит вам использовать loader вместе с minimal и фактически добавит всего несколько КБ к вашему окончательному пакету.

Нетрудно написать загрузчик, который загружает это меньше 1 КБ, так почему бы и нет, я попробую написать быстрый

Одна вещь, которая может здесь очень помочь, — это если некоторые функции являются необязательными.

Например, действительно хорошим минимумом может быть:

• встроенная трассировка стека ошибок (не важно, что она не оптимальна для некоторых браузеров)
• пользовательский агент
• отметка времени
• URL-адрес
• совпадать с исходными картами на сервере

Любые дополнительные функции могут быть просто дополнением. Мы поддерживаем только современные браузеры, поэтому нам не нужно обходить странное поведение старых браузеров.

Мы решили эту проблему, используя разделение кода веб-пакета и загрузив часовой клиент только при ошибке.

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

Мы делаем еще кое-что, например, заполняем хлебные крошки, добавляем дополнительные элементы, добавляем теги и т. д., но можно использовать клиент sentry и не увеличивать размер пакета.

Примерно так я реализовал в #1846.

Может быть полезно другим:
Я использовал сборку ESM с веб-пакетом ( 4.29.5 ):

• добавление псевдонима веб-пакета для использования сборки ESM, а не стандартной сборки, поскольку в module нет объявления package.json

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

• добавьте исключение для sentry/.+/esm в нашу конфигурацию babel-loader , так как кажется, что сборка 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

Для загрузчика проще написать так:

• Если у вас есть другие вещи в Babel:

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

• Если вы этого не сделаете:

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

Также не забудьте настроить конфигурацию babel под свои нужды: babel docs , иначе не стоит использовать версию esm.

Обновление: скоро мы выпустим новую основную версию 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 даже показывают лучшие результаты (не уверен, как пакетная фобия измеряет вещи)

ES6:  14.3535 kB
ES5:  15.6846 kB

В любом случае, я хотел сообщить вам, что мы все еще работаем над дальнейшим уменьшением размера пакета, но это уже должно быть огромным шагом в правильном направлении.

Примечание по обновлению: это серьезный удар, поскольку в SDK есть много внутренних изменений. С вашей стороны не должно быть никаких изменений кода. В настоящее время мы сами тестируем новую версию на sentry.io, чтобы увидеть, как она себя ведет. ссылка: https://github.com/getsentry/sentry/pull/12492

Отказ от ответственности: пока не используйте 5.0.0-rc.x в продакшене, как это делаем мы 🙈

@HazAT , спасибо, что отнеслись к этому серьезно! это большой шаг вперед - я уже гораздо меньше беспокоюсь о развертывании этого сейчас :-)

@kamilogorek Просто из любопытства, не могли бы вы добавить к сравнению последнюю версию из ветки 3.x ?

Я закрываю этот вопрос, на данный момент мы считаем, что сокращение, которое мы ввели при переходе с версии 4 на версию 5, является тенденцией в правильном направлении. Мы по-прежнему будем пытаться уменьшить его, и мы будем очень сознательно увеличивать его когда-либо снова.

В качестве небольшого замечания: нам действительно нравится сравнивать только размер нашего «пакета», поскольку в зависимости от того, какой пакет пакетов вы используете, ваш пробег может варьироваться, поэтому вот номер пакета CDN, который мы отправляем (ped):

| Пакет | Версия | Размер в байтах | Размер в КБ | Ссылка |
|-----------------|---------|----------------|----- -------|--------------------------- ----------|
| ворон-js | 3.27.0 | 13741 байт | ~13,4 КБ | 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,7 КБ | https://browser.sentry-cdn.com/5.0.3/bundle.min.js |

С v5 мы также отправляем и собираем esm , что означает, что если вы используете сборщик, он должен иметь возможность древовидно трясти неиспользуемые пути кода.

Всем спасибо за терпение 🙇

@HazAT @kamilogorek круто !

@Limess Актуально ли использовать это сегодня: @sentry/browser/esm вместо @sentry/browser ?

Он импортируется как import * as Sentry from "@sentry/browser/esm"; и поставляется в комплекте с webpack -p , но я не вижу разницы в размерах пакетов. У меня также есть голая webpack.config.js без плагинов или загрузчиков.

@ 0xbkt Размер пакета не имеет значения, по крайней мере, сейчас, когда используется объединение для объединения приложений.