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
This commit is contained in:
David Baker 2022-07-20 20:43:11 +01:00
parent 6d7f52d2d6
commit cf309102a2
4 changed files with 90 additions and 30 deletions

View file

@ -26,37 +26,45 @@ import { RoomRedirect } from "./room/RoomRedirect";
import { ClientProvider } from "./ClientContext";
import { usePageFocusStyle } from "./usePageFocusStyle";
import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
import { InspectorContextProvider } from "./room/GroupCallInspector";
import { CrashView } from "./FullScreenView";
const SentryRoute = Sentry.withSentryRouting(Route);
export default function App({ history }) {
usePageFocusStyle();
const errorPage = <CrashView />;
return (
<Router history={history}>
<ClientProvider>
<OverlayProvider>
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="/room/:roomId?">
<RoomPage />
</SentryRoute>
<SentryRoute path="/inspector">
<SequenceDiagramViewerPage />
</SentryRoute>
<SentryRoute path="*">
<RoomRedirect />
</SentryRoute>
</Switch>
</OverlayProvider>
<InspectorContextProvider>
<Sentry.ErrorBoundary fallback={errorPage}>
<OverlayProvider>
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="/room/:roomId?">
<RoomPage />
</SentryRoute>
<SentryRoute path="/inspector">
<SequenceDiagramViewerPage />
</SentryRoute>
<SentryRoute path="*">
<RoomRedirect />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</InspectorContextProvider>
</ClientProvider>
</Router>
);

View file

@ -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>

View file

@ -36,6 +36,12 @@
margin-bottom: 0;
}
.homeLink {
/* Make the buttons the same width */
.wideButton {
width: 291px;
}
/* Fixed height to avoid content jumping around*/
.sendLogsSection {
height: 50px;
}

View file

@ -28,9 +28,7 @@ import { Integrations } from "@sentry/tracing";
import "./index.css";
import App from "./App";
import { ErrorView } from "./FullScreenView";
import { init as initRageshake } from "./settings/rageshake";
import { InspectorContextProvider } from "./room/GroupCallInspector";
initRageshake();
@ -104,11 +102,7 @@ Sentry.init({
ReactDOM.render(
<React.StrictMode>
<Sentry.ErrorBoundary fallback={ErrorView}>
<InspectorContextProvider>
<App history={history} />
</InspectorContextProvider>
</Sentry.ErrorBoundary>
<App history={history} />
</React.StrictMode>,
document.getElementById("root")
);