diff --git a/packages/ui-default/build/config/webpack.ts b/packages/ui-default/build/config/webpack.ts index 0647aabae..2d082c5ae 100644 --- a/packages/ui-default/build/config/webpack.ts +++ b/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]; diff --git a/packages/ui-default/entry.js b/packages/ui-default/entry.js index e9c706f3b..777485e0a 100644 --- a/packages/ui-default/entry.js +++ b/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 = ''; $('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)); diff --git a/packages/ui-default/sentry.ts b/packages/ui-default/sentry.ts new file mode 100644 index 000000000..37a22a5f2 --- /dev/null +++ b/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); diff --git a/packages/ui-default/service-worker.ts b/packages/ui-default/service-worker.ts index 511b5748a..189ea6b0c 100644 --- a/packages/ui-default/service-worker.ts +++ b/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); }