Crash on missing platform support (#1713)

The Simplenote app, for better or worse, currently depends on a few
storage technologies that may be disabled through browser settings,
extensions, and manual configuration.

When these dependencies are missing we cannot function normally and
right now the app crashes or breaks in misleading ways.

In this patch we perform an up-front check when the app boots to verify
that we have some basic dependencies met. This is not an exhaustive
validation but it should catch the most common cases and give customers
an idea of why things may be broken.

Author: dmsnell

lib/boot.js

@@ -1,3 +1,4 @@
+import './utils/ensure-platform-support';
 import './utils/ensure-single-browser-tab-only';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';

lib/components/boot-warning/index.jsx

@@ -1,15 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import './style';
 
-const BootWarning = () => {
-  return (
-    <h3 className="boot-warning__message">
-      Simplenote cannot be opened simultaneously in more than one tab or window
-      per browser.
-    </h3>
-  );
-};
+const BootWarning = ({ children }) => (
+  <h3 className="boot-warning__message">{children}</h3>
+);
 
 export default BootWarning;

lib/utils/ensure-platform-support.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { parse as parseCookie } from 'cookie';
+
+import BootWarning from '../components/boot-warning';
+
+const hasLocalStorage = () => {
+  try {
+    localStorage.setItem('__localStorageSentinel__', 'present');
+    localStorage.removeItem('__localStorageSentinel__');
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const hasIndexedDB = () => {
+  try {
+    const opener = indexedDB.open('simplenote_sentinel');
+    if (!(opener instanceof IDBOpenDBRequest)) {
+      return false;
+    }
+    const closer = () => indexedDB.deleteDatabase('simplenote_sentinel');
+    opener.onerror = closer;
+    opener.onsuccess = closer;
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const hasCookies = () => {
+  try {
+    if (!navigator.cookieEnabled) {
+      return false;
+    }
+
+    const cookie = document.cookie;
+
+    const now = Date.now().toString();
+    document.cookie = `__now=${now};`;
+    const parsed = parseCookie(document.cookie);
+    const didSet = parsed.__now === now;
+    document.cookie = cookie;
+
+    return didSet;
+  } catch (e) {
+    return false;
+  }
+};
+
+const deps = [
+  ['localStorage', hasLocalStorage()],
+  ['indexedDB', hasIndexedDB()],
+  ['cookies', hasCookies()],
+];
+
+const missingDeps = deps.filter(([, hasIt]) => !hasIt).map(([name]) => name);
+
+if (missingDeps.length) {
+  ReactDOM.render(
+    <BootWarning>
+      <p>
+        Simplenote depends on a few web technologies to operate. Please make
+        sure that you have all of the following enabled in your browser.
+      </p>
+      <ul>
+        {deps.map(([name, hasIt]) => (
+          <li key={name}>
+            {hasIt ? '✅' : '⚠️'} {name} - {hasIt ? 'working' : 'missing'}
+          </li>
+        ))}
+      </ul>
+      <p>
+        Many browsers disable some of these features in Private Mode. Simplenote
+        does not currently support running in Private Mode.
+      </p>
+    </BootWarning>,
+    document.getElementById('root')
+  );
+  throw new Error(
+    `Simplenote is missing required dependencies: ${missingDeps.join(', ')}`
+  );
+}

lib/utils/ensure-single-browser-tab-only.js

@@ -10,7 +10,13 @@ const foundElectron = window.process && window.process.type;
 
 if (!foundElectron) {
   if ('lock-acquired' !== grabSessionLock()) {
-    ReactDOM.render(<BootWarning />, document.getElementById('root'));
+    ReactDOM.render(
+      <BootWarning>
+        Simplenote cannot be opened simultaneously in more than one tab or
+        window per browser.
+      </BootWarning>,
+      document.getElementById('root')
+    );
     throw new Error('Simplenote can only be opened in one tab');
   }
   let keepGoing = true;