ui: lazyload sentry

packages/ui-default/build/config/webpack.ts

@@ -23,7 +23,7 @@ const {
   list,
   targets,
 } = compat({
-  targets: '> 1%, chrome 70, firefox 60, safari 16, ios_saf 16, not ie 11, not op_mini all',
+  targets: '> 1%, chrome 70, firefox 90, safari 16, ios_saf 16, not ie 11, not op_mini all',
   modules: [
     'core-js/stable',
   ],
@@ -99,6 +99,7 @@ export default async function (env: { watch?: boolean, production?: boolean, mea
     devtool: env.production ? 'source-map' : false,
     entry: {
       [`hydro-${version}`]: './entry.js',
+      'sentry': './sentry.ts',
       'default.theme': './theme/default.js',
       'service-worker': './service-worker.ts',
     },
@@ -209,9 +210,9 @@ export default async function (env: { watch?: boolean, production?: boolean, mea
     },
     optimization: {
       splitChunks: {
-        minSize: 256000,
-        maxAsyncRequests: 5,
-        maxInitialRequests: 3,
+        minSize: 64000,
+        maxAsyncRequests: 10,
+        maxInitialRequests: 7,
         automaticNameDelimiter: '-',
         cacheGroups: {
           style: {
@@ -222,7 +223,7 @@ export default async function (env: { watch?: boolean, production?: boolean, mea
             enforce: true,
           },
           vendors: {
-            test: /[\\/]node_modules[\\/].+\.([jt]sx?|json|yaml)$/,
+            test: /[\\/]node_modules[\\/].+\.(m?[jt]sx?|json|yaml)$/,
             priority: -10,
             name(module) {
               const packageName = module.context.replace(/\\/g, '/').split('node_modules/').pop().split('/')[0];

packages/ui-default/entry.js

@@ -1,6 +1,5 @@
 import './polyfill';
 
-import * as Sentry from '@sentry/browser';
 import $ from 'jquery';
 
 window.Hydro = {
@@ -30,29 +29,6 @@ console.log(
 
 window.UiContext = JSON.parse(window.UiContext);
 window.UserContext = JSON.parse(window.UserContext);
-if (process.env.NODE_ENV === 'production' && UiContext.sentry_dsn) {
-  window.captureException = (e) => {
-    if (!e.isUserFacingError) Sentry.captureException(e);
-  };
-  Sentry.init({
-    dsn: UiContext.sentry_dsn,
-    release: `hydro-web@${process.env.VERSION}`,
-    integrations: [
-      Sentry.browserTracingIntegration(),
-      Sentry.browserApiErrorsIntegration(),
-      Sentry.replayIntegration({
-        networkRequestHeaders: ['Content-Type'],
-        networkResponseHeaders: ['Content-Type', 'Location'],
-      }),
-    ],
-    tracesSampleRate: 0.1,
-    tracePropagationTargets: ['localhost', /^\//, window.location.host],
-    replaysSessionSampleRate: 0.01,
-    replaysOnErrorSampleRate: 0.2,
-  });
-  Sentry.setTag('host', window.location.host);
-  Sentry.setTag('page_name', document.documentElement.getAttribute('data-page'));
-}
 try { __webpack_public_path__ = UiContext.cdn_prefix; } catch (e) { }
 if ('serviceWorker' in navigator) {
   const encodedConfig = encodeURIComponent(JSON.stringify(UiContext.SWConfig));
@@ -66,6 +42,15 @@ if ('serviceWorker' in navigator) {
 const PageLoader = '<div class="page-loader nojs--hide" style="display:none;"><div class="loader"></div></div>';
 $('body').prepend(PageLoader);
 $('.page-loader').fadeIn(500);
+if (process.env.NODE_ENV === 'production' && UiContext.sentry_dsn) {
+  window._sentryEvents = [];
+  window.captureException = (e) => {
+    if (!e.isUserFacingError) window._sentryEvents.push(e);
+  };
+  const script = document.createElement('script');
+  script.src = new URL('sentry.js', __webpack_public_path__).href;
+  document.body.appendChild(script);
+}
 
 document.addEventListener('DOMContentLoaded', async () => {
   Object.assign(window.UiContext, JSON.parse(window.UiContextNew));

packages/ui-default/sentry.ts

@@ -0,0 +1,26 @@
+import {
+  browserApiErrorsIntegration, browserTracingIntegration, captureException, init, replayIntegration, setTag,
+} from '@sentry/browser';
+
+init({
+  dsn: UiContext.sentry_dsn,
+  release: `hydro-web@${process.env.VERSION}`,
+  integrations: [
+    browserTracingIntegration(),
+    browserApiErrorsIntegration(),
+    replayIntegration({
+      networkRequestHeaders: ['Content-Type'],
+      networkResponseHeaders: ['Content-Type', 'Location'],
+    }),
+  ],
+  tracesSampleRate: 0.1,
+  tracePropagationTargets: ['localhost', /^\//, window.location.host],
+  replaysSessionSampleRate: 0.01,
+  replaysOnErrorSampleRate: 0.1,
+});
+setTag('host', window.location.host);
+setTag('page_name', document.documentElement.getAttribute('data-page'));
+window.captureException = (e: any) => {
+  if (!e.isUserFacingError) captureException(e);
+};
+(window as any)._sentryEvents.forEach(captureException);

packages/ui-default/service-worker.ts

@@ -89,7 +89,7 @@ self.addEventListener('notificationclick', (event) => {
 });
 
 const PRECACHE = `precache-${process.env.VERSION}`;
-const DO_NOT_PRECACHE = ['.worker.js', 'fonts', 'i.monaco'];
+const DO_NOT_PRECACHE = ['.worker.js', 'fonts'];
 
 function shouldCachePath(path: string) {
   if (!path.split('?')[0].split('/').pop()) return false;
@@ -121,7 +121,7 @@ let config: ServiceWorkerConfig = null;
 function initConfig() {
   config = JSON.parse(new URLSearchParams(location.search).get('config'));
   config.hosts ||= [];
-  if (!config.domains?.length) config.domains = [location.host];
+  config.domains = Array.from(new Set([location.host, ...(config.domains || [])]));
   console.log('Config:', config);
 }