3-column layout #699
39
packages/app/src/Element/ErrorBoundary.tsx
Normal file
39
packages/app/src/Element/ErrorBoundary.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, errorMessage: error.message };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
console.error("Caught an error:", error, errorInfo);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
// Render any custom fallback UI with the error message
|
||||
return (
|
||||
<div className="p-2">
|
||||
<h1>Something went wrong.</h1>
|
||||
<p>Error: {this.state.errorMessage}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
@ -22,6 +22,7 @@ import Toaster from "@/Toaster";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import { LongFormText } from "@/Element/Event/LongFormText";
|
||||
import NavSidebar from "@/Pages/Layout/NavSidebar";
|
||||
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||
|
||||
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
||||
|
||||
@ -68,6 +69,7 @@ export function SnortDeckLayout() {
|
||||
reset: () => setDeckState({}),
|
||||
}}>
|
||||
<NavSidebar narrow={true} />
|
||||
<ErrorBoundary>
|
||||
<div className="deck-cols">
|
||||
{cols.map(c => {
|
||||
switch (c) {
|
||||
@ -108,6 +110,7 @@ export function SnortDeckLayout() {
|
||||
</>
|
||||
)}
|
||||
<Toaster />
|
||||
</ErrorBoundary>
|
||||
</DeckContext.Provider>
|
||||
</div>
|
||||
);
|
||||
|
@ -17,6 +17,7 @@ import AccountHeader from "./AccountHeader";
|
||||
import RightColumn from "./RightColumn";
|
||||
import { LogoHeader } from "./LogoHeader";
|
||||
import useLoginFeed from "@/Feed/LoginFeed";
|
||||
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||
|
||||
export default function Index() {
|
||||
const location = useLocation();
|
||||
@ -62,7 +63,9 @@ export default function Index() {
|
||||
<div className="flex flex-row w-full">
|
||||
<NavSidebar />
|
||||
<div className="flex flex-1 flex-col overflow-x-hidden">
|
||||
<ErrorBoundary>
|
||||
<Outlet />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<RightColumn />
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user