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:
parent
6d7f52d2d6
commit
cf309102a2
4 changed files with 90 additions and 30 deletions
52
src/App.jsx
52
src/App.jsx
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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")
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue