Blue screen of death component.

webpack/apology.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Session } from "./session";
+
+const STYLE: React.CSSProperties = {
+  border: "2px solid red",
+  background: "blue",
+  fontSize: "24px",
+  color: "black",
+  display: "block",
+  overflow: "auto"
+};
+
+export function Apology(_: {}) {
+  return <div style={STYLE}>
+    <p>
+      <h1>Page Error</h1>
+      <p>
+        We can't render this part of the page due to an unrecoverable error.
+        Here are some thing you can try:
+      </p>
+      <ol>
+        <li>Perform a "hard refresh" (<strong>CTRL + SHIFT + R</strong> on most machines).</li>
+        <li>
+          <span>
+            <a onClick={() => Session.clear()}>
+              Restart the app by clicking here.
+            </a>
+          </span>
+        </li>
+        <li>
+          Send the error information (below) to our developer team via the
+        <a href="http://forum.farmbot.org/c/software">FarmBot software
+        forum</a>. Including additional information (such as steps leading up
+                  to the error) help us identify solutions more quickly.
+        </li>
+      </ol>
+    </p>
+  </div>;
+}

webpack/connectivity/connect_device.ts

@@ -127,7 +127,7 @@ export const onSent = (client: Client) => () => !!client.connected ?
   dispatchNetworkUp("user.mqtt") : dispatchNetworkDown("user.mqtt");
 
 const LEGACY_META_KEY_NAMES: (keyof Log)[] = [
-  // "type",
+  "type",
   "x",
   "y",
   "z",

webpack/error_boundary.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { catchErrors } from "./util";
+import { Apology } from "./apology";
 
 interface State { hasError?: boolean; }
 interface Props { }
@@ -19,7 +20,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
     }
   }
 
-  no = () => <h1>Something went wrong.</h1>;
+  no = () => <Apology />;
 
   ok = () => this.props.children;