Lazy load sentry only on errors

Credit:
https://www.voorhoede.nl/en/blog/load-sentry-asynchronously-only-on-error/

hugo/src/js/app.js

@@ -1,6 +1,16 @@
 // TODO: fix babel-loader and use import
 require('./polyfills');
 
+let sentryInitialized = false;
+
+async function loadSentry() {
+  if (!sentryInitialized) {
+    sentryInitialized = true;
+    const {initSentry} = await import('./sentry');
+    await initSentry();
+  }
+}
+
 if (process.env.NODE_ENV !== 'production') {
   // Include here for dev, but inline for prod
   require('./inline');
@@ -13,6 +23,8 @@ if (process.env.NODE_ENV === 'production' || process.env.MIX_TURBO) {
   require('./quicklink');
 }
 
+// Lazy load Sentry only on error
 if (process.env.NODE_ENV === 'production' || process.env.ENABLE_SENTRY) {
-  require('./sentry');
-}
+  window.addEventListener('error', loadSentry);
+  window.addEventListener('unhandledrejection', loadSentry);
+}

hugo/src/js/sentry.js

@@ -1,5 +1,7 @@
-import * as Sentry from '@sentry/browser';
-
-Sentry.init({
-  dsn: 'https://[email protected]/1467904',
-});
+export async function initSentry() {
+  const Sentry = await import('@sentry/browser');
+  Sentry.init({
+    dsn: 'https://[email protected]/1467904',
+  });
+  return Sentry;
+}