Make the error boundary work

We had an error boundary at the top level of the app, but it didn't
work because it used ErrorPage which tried to use a bunch of things
like useLocation() and an error prop. Also it wasn't passed in correctly
anyway.

This wires it up correctly to a separate view with a button to send
debug logs, and also moves it down a few layers so it has access to
enough things to be able to send rageshakes.

Related: https://github.com/vector-im/element-call/issues/421

src/FullScreenView.jsx

@@ -4,6 +4,8 @@ import styles from "./FullScreenView.module.css";
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import classNames from "classnames";
 import { LinkButton, Button } from "./button";
+import { useSubmitRageshake } from "./settings/submit-rageshake";
+import { ErrorMessage } from "./input/Input";
 
 export function FullScreenView({ className, children }) {
   return (
@@ -59,6 +61,56 @@ export function ErrorView({ error }) {
   );
 }
 
+export function CrashView() {
+  const { submitRageshake, sending, sent, error } = useSubmitRageshake();
+
+  const sendDebugLogs = useCallback(() => {
+    submitRageshake({
+      description: "**Soft Crash**",
+      sendLogs: true,
+    });
+  }, [submitRageshake]);
+
+  const onReload = useCallback(() => {
+    window.location = "/";
+  }, []);
+
+  let logsComponent;
+  if (sent) {
+    logsComponent = <div>Thanks! We'll get right on it.</div>;
+  } else if (sending) {
+    logsComponent = <div>Sending...</div>;
+  } else {
+    logsComponent = (
+      <Button
+        size="lg"
+        variant="default"
+        onPress={sendDebugLogs}
+        className={styles.wideButton}
+      >
+        Send debug logs
+      </Button>
+    );
+  }
+
+  return (
+    <FullScreenView>
+      <h1>Oops, something's gone wrong.</h1>
+      <p>Submitting debug logs will help us track down the problem.</p>
+      <div className={styles.sendLogsSection}>{logsComponent}</div>
+      {error && <ErrorMessage>Couldn't send debug logs!</ErrorMessage>}
+      <Button
+        size="lg"
+        variant="default"
+        className={styles.wideButton}
+        onPress={onReload}
+      >
+        Return to home screen
+      </Button>
+    </FullScreenView>
+  );
+}
+
 export function LoadingView() {
   return (
     <FullScreenView>