add ErrorBoundary around layout outlet
Some checks failed
continuous-integration/drone/pr Build is failing
Some checks failed
continuous-integration/drone/pr Build is failing
This commit is contained in:
parent
920f8ae20d
commit
a592974b93
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 useLogin from "@/Hooks/useLogin";
|
||||||
import { LongFormText } from "@/Element/Event/LongFormText";
|
import { LongFormText } from "@/Element/Event/LongFormText";
|
||||||
import NavSidebar from "@/Pages/Layout/NavSidebar";
|
import NavSidebar from "@/Pages/Layout/NavSidebar";
|
||||||
|
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||||
|
|
||||||
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
|
||||||
|
|
||||||
@ -68,6 +69,7 @@ export function SnortDeckLayout() {
|
|||||||
reset: () => setDeckState({}),
|
reset: () => setDeckState({}),
|
||||||
}}>
|
}}>
|
||||||
<NavSidebar narrow={true} />
|
<NavSidebar narrow={true} />
|
||||||
|
<ErrorBoundary>
|
||||||
<div className="deck-cols">
|
<div className="deck-cols">
|
||||||
{cols.map(c => {
|
{cols.map(c => {
|
||||||
switch (c) {
|
switch (c) {
|
||||||
@ -108,6 +110,7 @@ export function SnortDeckLayout() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<Toaster />
|
<Toaster />
|
||||||
|
</ErrorBoundary>
|
||||||
</DeckContext.Provider>
|
</DeckContext.Provider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -17,6 +17,7 @@ import AccountHeader from "./AccountHeader";
|
|||||||
import RightColumn from "./RightColumn";
|
import RightColumn from "./RightColumn";
|
||||||
import { LogoHeader } from "./LogoHeader";
|
import { LogoHeader } from "./LogoHeader";
|
||||||
import useLoginFeed from "@/Feed/LoginFeed";
|
import useLoginFeed from "@/Feed/LoginFeed";
|
||||||
|
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@ -62,7 +63,9 @@ export default function Index() {
|
|||||||
<div className="flex flex-row w-full">
|
<div className="flex flex-row w-full">
|
||||||
<NavSidebar />
|
<NavSidebar />
|
||||||
<div className="flex flex-1 flex-col overflow-x-hidden">
|
<div className="flex flex-1 flex-col overflow-x-hidden">
|
||||||
|
<ErrorBoundary>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
</ErrorBoundary>
|
||||||
</div>
|
</div>
|
||||||
<RightColumn />
|
<RightColumn />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user