feat(core): add global error handler (#8509)

packages/frontend/core/src/bootstrap/app.ts

@@ -1,4 +0,0 @@
-import '@affine/env/constant';
-import '../types/types.d.ts';
-
-export { setupGlobal as setupEnvironment } from '@affine/env/global';

packages/frontend/core/src/bootstrap/browser.ts

@@ -0,0 +1,5 @@
+// ORDER MATTERS
+import './global-error-handler';
+import './env';
+import './public-path';
+import './polyfill/browser';

packages/frontend/core/src/bootstrap/electron.ts

@@ -0,0 +1,4 @@
+// ORDER MATTERS
+import './env';
+import './public-path';
+import './polyfill/electron';

packages/frontend/core/src/bootstrap/env.ts

@@ -0,0 +1,6 @@
+import '@affine/env/constant';
+import '../types/types.d.ts';
+
+import { setupGlobal } from '@affine/env/global';
+
+setupGlobal();

packages/frontend/core/src/bootstrap/global-error-handler.ts

@@ -0,0 +1,81 @@
+/* eslint-disable no-var */
+import errorImg from './error.png';
+
+var errorEl: HTMLDivElement | null = null;
+function showGlobalErrorPage() {
+  if (errorEl) {
+    return;
+  }
+
+  errorEl = document.createElement('div');
+  errorEl.innerHTML = [
+    '<style>',
+    '.gue {display:flex;flex-direction:column;align-items:center;justify-content:center;width:380px;}',
+    '.gue img{width:380px;}',
+    '.gue div{padding:16px 40px 0 40px;text-align:center;}',
+    '.gue .p1{color:#141414;line-height:24px;font-weight:500;}',
+    '.gue .p2{color:#7A7A7A;line-height:22px;}',
+    '</style>',
+    '<div class="gue">',
+    '<img src="',
+    errorImg,
+    '" />',
+    '<div>',
+    '<p class="p1">Unsupported Environment</p>',
+    '<p class="p2">',
+    'It looks like AFFiNE cannot run in this environment.',
+    "Please ensure you are using a supported browser or update your device's operating system to the latest version.",
+    'If the issue persists, visit our <a href="https://github.com/toeverything/AFFiNE/issues">support page</a> for further assistance.',
+    '</p>',
+    '</div>',
+    '</div>',
+  ].join('');
+  errorEl.setAttribute(
+    'style',
+    'position:absolute;top:0;left:0;height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;z-index:999;'
+  );
+  document.body.append(errorEl);
+}
+
+function registerGlobalErrorHandler() {
+  function handleGlobalUnrecoverableError(
+    e: ErrorEvent | PromiseRejectionEvent
+  ) {
+    var error =
+      'error' in e ? e.error : e.reason instanceof Error ? e.reason : null;
+    console.error('unhandled unrecoverable error', error);
+
+    const shouldCache =
+      // syntax error
+      error && error instanceof SyntaxError;
+
+    if (!shouldCache) {
+      return;
+    }
+
+    e.stopImmediatePropagation();
+    showGlobalErrorPage();
+  }
+  if (typeof document !== 'undefined') {
+    globalThis.addEventListener(
+      'unhandledrejection',
+      handleGlobalUnrecoverableError
+    );
+    globalThis.addEventListener('error', handleGlobalUnrecoverableError);
+  }
+}
+
+function ensureBasicEnvironment() {
+  var globals = ['Promise', 'Map', 'fetch', 'customElements'];
+
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (var i = 0; i < globals.length; i++) {
+    if (!(globals[i] in globalThis)) {
+      showGlobalErrorPage();
+      return;
+    }
+  }
+}
+
+registerGlobalErrorHandler();
+ensureBasicEnvironment();

packages/frontend/core/src/bootstrap/index.ts

@@ -1,15 +0,0 @@
-import '../types/types.d.ts';
-
-import { setupEnvironment } from './app';
-import { polyfillBrowser, polyfillElectron } from './polyfill';
-
-export function setupElectron() {
-  setupEnvironment();
-  polyfillElectron();
-}
-
-export async function setupBrowser() {
-  setupEnvironment();
-  __webpack_public_path__ = environment.publicPath;
-  await polyfillBrowser();
-}

packages/frontend/core/src/bootstrap/polyfill/browser.ts

@@ -3,13 +3,7 @@ import { polyfillPromise } from './promise-with-resolvers';
 import { polyfillEventLoop } from './request-idle-callback';
 import { polyfillResizeObserver } from './resize-observer';
 
-export function polyfillElectron() {
-  polyfillResizeObserver();
-}
-
-export async function polyfillBrowser() {
-  polyfillResizeObserver();
-  polyfillEventLoop();
-  await polyfillPromise();
-  await polyfillDispose();
-}
+polyfillResizeObserver();
+polyfillEventLoop();
+await polyfillPromise();
+await polyfillDispose();

packages/frontend/core/src/bootstrap/polyfill/electron.ts

@@ -0,0 +1,3 @@
+import { polyfillResizeObserver } from './resize-observer';
+
+polyfillResizeObserver();

packages/frontend/core/src/bootstrap/public-path.ts

@@ -0,0 +1 @@
+__webpack_public_path__ = environment.publicPath;