Skip to content

Commit 2b25ca5

Browse files
nperez0111nperez0111
committed
fix(docs): add error boundaries for better UX
1 parent 3d2c18f commit 2b25ca5

File tree

15 files changed

+285
-24
lines changed

15 files changed

+285
-24
lines changed

‎docs/app/(home)/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import type { ReactNode } from "react";
22
import { HomeLayout } from "fumadocs-ui/layouts/home";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "home");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

‎docs/app/about/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
22
import type { ReactNode } from "react";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "about");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

‎docs/app/docs/layout.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,29 @@ import { baseOptions } from "@/app/layout.config";
44
import { CustomDocsLayout } from "@/components/CustomDocsLayout";
55
import { Footer } from "@/components/Footer";
66
import { source } from "@/lib/source/docs";
7+
import * as Sentry from "@sentry/nextjs";
78

89
export default function Layout({ children }: { children: ReactNode }) {
910
return (
1011
<>
1112
<CustomDocsLayout tree={source.pageTree} {...baseOptions}>
12-
{children}
13+
<Sentry.ErrorBoundary
14+
fallback={
15+
<div>
16+
We encountered an error trying to show this page. Please report
17+
this to us on GitHub at{" "}
18+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
19+
https://github.com/TypeCellOS/BlockNote/issues
20+
</a>
21+
</div>
22+
}
23+
beforeCapture={(scope) => {
24+
scope.setTag("type", "react-render");
25+
scope.setTag("page", "docs");
26+
}}
27+
>
28+
{children}
29+
</Sentry.ErrorBoundary>
1330
</CustomDocsLayout>
1431
<Footer />
1532
<Analytics />

‎docs/app/examples/layout.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Footer } from "@/components/Footer";
66
import { ProBadge } from "@/components/ProBadge";
77
import { source } from "@/lib/source/examples";
88
import { getExampleData } from "@/util/getExampleData";
9+
import * as Sentry from "@sentry/nextjs";
910

1011
export default function Layout({ children }: { children: ReactNode }) {
1112
// Add Pro badges to example pages in sidebar.
@@ -34,7 +35,23 @@ export default function Layout({ children }: { children: ReactNode }) {
3435
return (
3536
<>
3637
<CustomDocsLayout tree={source.pageTree} {...baseOptions}>
37-
{children}
38+
<Sentry.ErrorBoundary
39+
fallback={
40+
<div>
41+
We encountered an error trying to show this page. Please report
42+
this to us on GitHub at{" "}
43+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
44+
https://github.com/TypeCellOS/BlockNote/issues
45+
</a>
46+
</div>
47+
}
48+
beforeCapture={(scope) => {
49+
scope.setTag("type", "react-render");
50+
scope.setTag("page", "examples");
51+
}}
52+
>
53+
{children}
54+
</Sentry.ErrorBoundary>
3855
</CustomDocsLayout>
3956
<Footer />
4057
<Analytics />

‎docs/app/global-error.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ import * as Sentry from "@sentry/nextjs";
44
import NextError from "next/error";
55
import { useEffect } from "react";
66

7-
export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
7+
export default function GlobalError({
8+
error,
9+
}: {
10+
error: Error & { digest?: string };
11+
}) {
812
useEffect(() => {
9-
Sentry.captureException(error);
13+
Sentry.captureException(error, { tags: { type: "react-render" } });
1014
}, [error]);
1115

1216
return (
@@ -20,4 +24,4 @@ export default function GlobalError({ error }: { error: Error & { digest?: strin
2024
</body>
2125
</html>
2226
);
23-
}
27+
}

‎docs/app/layout.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { RootProvider } from "fumadocs-ui/provider";
33
import { Analytics } from "@vercel/analytics/react";
44
import { Metadata } from "next";
55
import type { ReactNode } from "react";
6+
import * as Sentry from "@sentry/nextjs";
67

78
import { getFullMetadata } from "@/util/getFullMetadata";
89

@@ -29,7 +30,22 @@ export default function Layout({ children }: { children: ReactNode }) {
2930
Access the early preview.
3031
</a>
3132
</Banner>
32-
<RootProvider>{children as any}</RootProvider>
33+
<Sentry.ErrorBoundary
34+
fallback={
35+
<div>
36+
We encountered an error trying to show this page. Please report
37+
this to us on GitHub at{" "}
38+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
39+
https://github.com/TypeCellOS/BlockNote/issues
40+
</a>
41+
</div>
42+
}
43+
beforeCapture={(scope) => {
44+
scope.setTag("type", "react-render");
45+
}}
46+
>
47+
<RootProvider>{children}</RootProvider>
48+
</Sentry.ErrorBoundary>
3349
<Analytics />
3450
</body>
3551
</html>

‎docs/app/legal/blocknote-xl-commercial-license/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
22
import type { ReactNode } from "react";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "legal/blocknote-xl-commercial-license");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

‎docs/app/legal/privacy-policy/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
22
import type { ReactNode } from "react";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "legal/privacy-policy");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

‎docs/app/legal/service-level-agreement/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
22
import type { ReactNode } from "react";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "legal/service-level-agreement");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

‎docs/app/legal/terms-and-conditions/layout.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
22
import type { ReactNode } from "react";
33
import { baseOptions } from "@/app/layout.config";
44
import { Footer } from "@/components/Footer";
5+
import * as Sentry from "@sentry/nextjs";
56

67
export default function Layout({ children }: { children: ReactNode }) {
78
return (
89
<>
9-
<HomeLayout {...baseOptions}>{children}</HomeLayout>
10+
<HomeLayout {...baseOptions}>
11+
<Sentry.ErrorBoundary
12+
fallback={
13+
<div>
14+
We encountered an error trying to show this page. Please report
15+
this to us on GitHub at{" "}
16+
<a href="https://github.com/TypeCellOS/BlockNote/issues">
17+
https://github.com/TypeCellOS/BlockNote/issues
18+
</a>
19+
</div>
20+
}
21+
beforeCapture={(scope) => {
22+
scope.setTag("type", "react-render");
23+
scope.setTag("page", "legal/terms-and-conditions");
24+
}}
25+
>
26+
{children}
27+
</Sentry.ErrorBoundary>
28+
</HomeLayout>
1029
<Footer />
1130
</>
1231
);

0 commit comments

Comments
 (0)