Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 03:32:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add error boundary to the app root

Browse Source
This commit is contained in:
GyDi 2023-06-08 13:50:45 +08:00 committed by GitHub
parent f9a68e8b23
commit 6a9745171e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/base/base-error-boundary.tsx
View File

@ -3,18 +3,24 @@ import { ErrorBoundary, FallbackProps } from "react-error-boundary";
function ErrorFallback({ error }: FallbackProps) {
return (
<div role="alert">
<p>Something went wrong:(</p>
<div role="alert" style={{ padding: 16 }}>
<h4>Something went wrong:(</h4>
<pre>{error.message}</pre>
<details title="Error Stack">
<summary>Error Stack</summary>
<pre>{error.stack}</pre>
</details>
</div>
);
}
interface BaseErrorBoundaryProps {
interface Props {
children?: ReactNode;
}
export const BaseErrorBoundary: React.FC<BaseErrorBoundaryProps> = (props) => {
export const BaseErrorBoundary = (props: Props) => {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
{props.children}

9
src/main.tsx
View File

@ -11,6 +11,7 @@ import React from "react";
import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil";
import { BrowserRouter } from "react-router-dom";
import { BaseErrorBoundary } from "./components/base";
import Layout from "./pages/_layout";
import "./services/i18n";
@ -26,9 +27,11 @@ if (!container) {
createRoot(container).render(
<React.StrictMode>
<RecoilRoot>
<BrowserRouter>
<Layout />
</BrowserRouter>
<BaseErrorBoundary>
<BrowserRouter>
<Layout />
</BrowserRouter>
</BaseErrorBoundary>
</RecoilRoot>
</React.StrictMode>
);