Allow bypassing SharedArrayBuffer override (#644)

* Allow bypassing SharedArrayBuffer override

* Make an attempt to avoid merging budgets

* Update FatalError.js

* s/allowBuggyFallback/isSharedArrayBufferOverrideEnabled/

Co-Authored-By: Matiss Janis Aboltins <886567+MatissJanis@users.noreply.github.com>

---------

Co-authored-by: Matiss Janis Aboltins <886567+MatissJanis@users.noreply.github.com>

packages/desktop-client/src/browser-preload.browser.js

@@ -18,11 +18,18 @@ function createBackendWorker() {
   worker = new BackendWorker();
   initSQLBackend(worker);
 
+  if (window.SharedArrayBuffer) {
+    localStorage.removeItem('SharedArrayBufferOverride');
+  }
+
   worker.postMessage({
     type: 'init',
     version: ACTUAL_VERSION,
     isDev: IS_DEV,
-    hash: process.env.REACT_APP_BACKEND_WORKER_HASH
+    hash: process.env.REACT_APP_BACKEND_WORKER_HASH,
+    isSharedArrayBufferOverrideEnabled: localStorage.getItem(
+      'SharedArrayBufferOverride'
+    )
   });
 
   if (IS_DEV || IS_PERF_BUILD) {

packages/desktop-client/src/browser-server.js

@@ -10,7 +10,7 @@ self.addEventListener('message', e => {
       let version = msg.version;
       let hash = msg.hash;
 
-      if (!self.SharedArrayBuffer) {
+      if (!self.SharedArrayBuffer && !msg.isSharedArrayBufferOverrideEnabled) {
         self.postMessage({
           type: 'app-init-failure',
           SharedArrayBufferMissing: true

packages/desktop-client/src/components/FatalError.js

-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   View,
@@ -10,6 +10,7 @@ import {
   Link,
   Button
 } from 'loot-design/src/components/common';
+import { Checkbox } from 'loot-design/src/components/forms';
 import { colors } from 'loot-design/src/style';
 
 class FatalError extends React.Component {
@@ -38,7 +39,7 @@ class FatalError extends React.Component {
           <a href="https://actualbudget.github.io/docs/Troubleshooting/SharedArrayBuffer">
             our troubleshooting documentation
           </a>{' '}
-          for more information.
+          to learn more. <SharedArrayBufferOverride />
         </Text>
       );
     } else {
@@ -140,3 +141,52 @@ class FatalError extends React.Component {
   }
 }
 export default FatalError;
+
+function SharedArrayBufferOverride() {
+  let [expanded, setExpanded] = useState(false);
+  let [understand, setUnderstand] = useState(false);
+
+  return expanded ? (
+    <>
+      <P style={{ marginTop: 10 }}>
+        Actual uses <code>SharedArrayBuffer</code> to allow usage from multiple
+        tabs at once and to ensure correct behavior when switching files. While
+        it can run without access to <code>SharedArrayBuffer</code>, you may
+        encounter data loss or notice multiple budget files being merged with
+        each other.
+      </P>
+      <label
+        style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}
+      >
+        <Checkbox checked={understand} onChange={setUnderstand} /> I understand
+        the risks, run Actual in the unsupported fallback mode
+      </label>
+      <Button
+        disabled={!understand}
+        onClick={() => {
+          window.localStorage.setItem('SharedArrayBufferOverride', 'true');
+          window.location.reload();
+        }}
+      >
+        Open Actual
+      </Button>
+    </>
+  ) : (
+    <Link
+      onClick={() => setExpanded(true)}
+      style={{
+        color: `inherit !important`,
+        marginLeft: 5,
+        border: 'none !important',
+        background: 'none !important',
+        padding: '0 !important',
+        textDecoration: 'underline !important',
+        boxShadow: 'none !important',
+        display: 'inline !important',
+        font: 'inherit !important'
+      }}
+    >
+      Advanced options
+    </Link>
+  );
+}

packages/loot-core/src/client/actions/budgets.js

@@ -119,6 +119,9 @@ export function closeBudget() {
       dispatch(setAppState({ loadingText: 'Closing...' }));
       await send('close-budget');
       dispatch(setAppState({ loadingText: null }));
+      if (localStorage.getItem('SharedArrayBufferOverride')) {
+        location.reload();
+      }
     }
   };
 }