Skip to content

Commit ec72e7d

Browse files
aidankmcalisteraidankmcalister
authored
feat(docs): add sentry (#7492)
* feat(docs): add sentry * update global error * feat: styled global error
1 parent 2398f77 commit ec72e7d

File tree

8 files changed

+2887
-178
lines changed

8 files changed

+2887
-178
lines changed

‎apps/docs/next.config.mjs‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { withSentryConfig } from "@sentry/nextjs";
12
import { createMDX } from "fumadocs-mdx/next";
23

34
const withMDX = createMDX();
@@ -12,4 +13,43 @@ const config = {
1213
},
1314
};
1415

15-
export default withMDX(config);
16+
export default withSentryConfig(withMDX(config), {
17+
// For all available options, see:
18+
// https://www.npmjs.com/package/@sentry/webpack-plugin#options
19+
20+
org: "prisma-ch",
21+
22+
project: "javascript-nextjs",
23+
24+
authToken: process.env.SENTRY_AUTH_TOKEN,
25+
tunnelRoute: "/monitoring",
26+
27+
// Only print logs for uploading source maps in CI\
28+
silent: !process.env.CI,
29+
30+
// For all available options, see:
31+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
32+
33+
// Upload a larger set of source maps for prettier stack traces (increases build time)
34+
widenClientFileUpload: true,
35+
36+
// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
37+
// This can increase your server load as well as your hosting bill.
38+
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
39+
// side errors will fail.
40+
// tunnelRoute: "/monitoring",
41+
42+
webpack: {
43+
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
44+
// See the following for more information:
45+
// https://docs.sentry.io/product/crons/
46+
// https://vercel.com/docs/cron-jobs
47+
automaticVercelMonitors: true,
48+
49+
// Tree-shaking options for reducing bundle size
50+
treeshake: {
51+
// Automatically tree-shake Sentry logger statements to reduce bundle size
52+
removeDebugLogging: true,
53+
},
54+
},
55+
});

‎apps/docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@prisma-docs/eclipse": "workspace:^",
2424
"@prisma-docs/ui": "workspace:*",
2525
"@radix-ui/react-tooltip": "^1.2.8",
26+
"@sentry/nextjs": "^10.38.0",
2627
"@streamdown/code": "^1.0.1",
2728
"class-variance-authority": "^0.7.1",
2829
"dexie": "^4.2.1",

‎apps/docs/sentry.edge.config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
2+
// The config you add here will be used whenever one of the edge features is loaded.
3+
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
4+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
5+
6+
import * as Sentry from "@sentry/nextjs";
7+
8+
Sentry.init({
9+
dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
10+
11+
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
12+
tracesSampleRate: 1,
13+
14+
// Enable logs to be sent to Sentry
15+
enableLogs: true,
16+
17+
// Enable sending user PII (Personally Identifiable Information)
18+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
19+
sendDefaultPii: true,
20+
});

‎apps/docs/sentry.server.config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// This file configures the initialization of Sentry on the server.
2+
// The config you add here will be used whenever the server handles a request.
3+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
4+
5+
import * as Sentry from "@sentry/nextjs";
6+
7+
Sentry.init({
8+
dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
9+
10+
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
11+
tracesSampleRate: 1,
12+
13+
// Enable logs to be sent to Sentry
14+
enableLogs: true,
15+
16+
// Enable sending user PII (Personally Identifiable Information)
17+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
18+
sendDefaultPii: true,
19+
});

‎apps/docs/src/app/global-error.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
"use client";
2+
import { useEffect } from "react";
3+
import * as Sentry from "@sentry/nextjs";
4+
import { DocsLayout } from "@/components/layout/notebook";
5+
6+
export default function GlobalError({
7+
error,
8+
}: {
9+
error: Error & { digest?: string };
10+
}) {
11+
useEffect(() => {
12+
Sentry.captureException(error);
13+
}, [error]);
14+
15+
return (
16+
<html>
17+
<head>
18+
<style>{`
19+
* { box-sizing: border-box; }
20+
body {
21+
margin: 0;
22+
min-height: 100vh;
23+
font-family: system-ui, -apple-system, sans-serif;
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
justify-content: center;
28+
text-align: center;
29+
overflow: hidden;
30+
position: fixed;
31+
inset: 0;
32+
color: #e5e5e5;
33+
background: #131420;
34+
background-size: 100% 4px;
35+
}
36+
.glitch {
37+
position: relative;
38+
font-size: 10rem;
39+
font-weight: 800;
40+
margin-bottom: 1rem;
41+
pointer-events: none;
42+
}
43+
.glitch::before,
44+
.glitch::after {
45+
content: attr(data-text);
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
overflow: hidden;
51+
}
52+
.glitch::before {
53+
left: 2px;
54+
text-shadow: -2px 0 red;
55+
animation: glitch-1 2s infinite linear alternate-reverse;
56+
}
57+
.glitch::after {
58+
left: -2px;
59+
text-shadow: -2px 0 cyan;
60+
animation: glitch-2 1.5s infinite linear alternate-reverse;
61+
}
62+
@keyframes glitch-1 {
63+
0% { clip-path: inset(20% 0 60% 0); }
64+
20% { clip-path: inset(10% 0 85% 0); }
65+
40% { clip-path: inset(40% 0 40% 0); }
66+
60% { clip-path: inset(80% 0 5% 0); }
67+
80% { clip-path: inset(50% 0 30% 0); }
68+
100% { clip-path: inset(25% 0 55% 0); }
69+
}
70+
@keyframes glitch-2 {
71+
0% { clip-path: inset(80% 0 5% 0); }
72+
20% { clip-path: inset(50% 0 30% 0); }
73+
40% { clip-path: inset(20% 0 60% 0); }
74+
60% { clip-path: inset(10% 0 85% 0); }
75+
80% { clip-path: inset(40% 0 40% 0); }
76+
100% { clip-path: inset(75% 0 15% 0); }
77+
}
78+
@media (prefers-reduced-motion: reduce) {
79+
.glitch::before, .glitch::after { animation: none; }
80+
}
81+
.subtitle {
82+
font-size: 1.5rem;
83+
font-weight: 600;
84+
color: white;
85+
margin-bottom: 1rem;
86+
}
87+
a {
88+
color: #e5e5e5;
89+
text-decoration: none;
90+
transition: text-decoration 0.2s;
91+
}
92+
a:hover {
93+
text-decoration: underline;
94+
}
95+
`}</style>
96+
</head>
97+
<body>
98+
<h1 className="glitch" data-text="Error">
99+
Error
100+
</h1>
101+
<p className="subtitle">Something went wrong</p>
102+
<a href="/">Go to docs</a>
103+
</body>
104+
</html>
105+
);
106+
}

‎apps/docs/src/instrumentation-client.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import posthog from "posthog-js";
2+
import * as Sentry from "@sentry/nextjs";
23

34
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
45
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
@@ -11,3 +12,18 @@ posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
1112
});
1213
},
1314
});
15+
16+
Sentry.init({
17+
dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
18+
19+
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
20+
tracesSampleRate: 1,
21+
// Enable logs to be sent to Sentry
22+
enableLogs: true,
23+
24+
// Enable sending user PII (Personally Identifiable Information)
25+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
26+
sendDefaultPii: true,
27+
});
28+
29+
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

‎apps/docs/src/instrumentation.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as Sentry from "@sentry/nextjs";
2+
3+
export async function register() {
4+
if (process.env.NEXT_RUNTIME === "nodejs") {
5+
await import("../sentry.server.config");
6+
}
7+
8+
if (process.env.NEXT_RUNTIME === "edge") {
9+
await import("../sentry.edge.config");
10+
}
11+
}
12+
13+
export const onRequestError = Sentry.captureRequestError;

0 commit comments

Comments
 (0)