Skip to content

Commit cba3903

Browse files
guri2323guri2323
committed
added sentry to project
1 parent 9aff5ea commit cba3903

File tree

11 files changed

+4101
-905
lines changed

11 files changed

+4101
-905
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,6 @@ yarn-error.log*
4141
next-env.d.ts
4242

4343
notes.txt
44+
45+
# Sentry Config File
46+
.env.sentry-build-plugin

‎app/api/sentry-example-api/route.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NextResponse } from "next/server";
2+
3+
export const dynamic = "force-dynamic";
4+
5+
// A faulty API route to test Sentry's error monitoring
6+
export function GET() {
7+
throw new Error("Sentry Example API Route Error");
8+
return NextResponse.json({ data: "Testing Sentry Error..." });
9+
}

‎app/global-error.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
3+
import * as Sentry from "@sentry/nextjs";
4+
import NextError from "next/error";
5+
import { useEffect } from "react";
6+
7+
export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
8+
useEffect(() => {
9+
Sentry.captureException(error);
10+
}, [error]);
11+
12+
return (
13+
<html>
14+
<body>
15+
{/* `NextError` is the default Next.js error page component. Its type
16+
definition requires a `statusCode` prop. However, since the App Router
17+
does not expose status codes for errors, we simply pass 0 to render a
18+
generic error message. */}
19+
<NextError statusCode={0} />
20+
</body>
21+
</html>
22+
);
23+
}

‎app/sentry-example-page/page.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
"use client";
2+
3+
import Head from "next/head";
4+
import * as Sentry from "@sentry/nextjs";
5+
import { useState } from "react";
6+
7+
export default function Page() {
8+
const [hasSentError, setHasSentError] = useState(false);
9+
10+
return (
11+
<div>
12+
<Head>
13+
<title>sentry-example-page</title>
14+
<meta name="description" content="Test Sentry for your Next.js app!" />
15+
</Head>
16+
17+
<main>
18+
<div className="flex-spacer" />
19+
<svg height="40" width="40" fill="none" xmlns="http://www.w3.org/2000/svg">
20+
<path d="M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z" fill="currentcolor"/>
21+
</svg>
22+
<h1>
23+
sentry-example-page
24+
</h1>
25+
26+
<p className="description">
27+
Click the button below, and view the sample error on the Sentry <a target="_blank" href="https://self-evc.sentry.io/issues/?project=4509187561357312">Issues Page</a>.
28+
For more details about setting up Sentry, <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">read our docs</a>.
29+
</p>
30+
31+
<button
32+
type="button"
33+
onClick={async () => {
34+
await Sentry.startSpan({
35+
name: 'Example Frontend Span',
36+
op: 'test'
37+
}, async () => {
38+
const res = await fetch("/api/sentry-example-api");
39+
if (!res.ok) {
40+
setHasSentError(true);
41+
throw new Error("Sentry Example Frontend Error");
42+
}
43+
});
44+
}}
45+
>
46+
<span>
47+
Throw Sample Error
48+
</span>
49+
</button>
50+
51+
{hasSentError ? (
52+
<p className="success">
53+
Sample error was sent to Sentry.
54+
</p>
55+
) : (
56+
<div className="success_placeholder" />
57+
)}
58+
59+
<div className="flex-spacer" />
60+
<p className="description">
61+
Adblockers will prevent errors from being sent to Sentry.
62+
</p>
63+
</main>
64+
65+
<style>{`
66+
main {
67+
display: flex;
68+
min-height: 100vh;
69+
flex-direction: column;
70+
justify-content: center;
71+
align-items: center;
72+
gap: 16px;
73+
padding: 16px;
74+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
75+
}
76+
77+
h1 {
78+
padding: 0px 4px;
79+
border-radius: 4px;
80+
background-color: rgba(24, 20, 35, 0.03);
81+
font-family: monospace;
82+
font-size: 20px;
83+
line-height: 1.2;
84+
}
85+
86+
p {
87+
margin: 0;
88+
font-size: 20px;
89+
}
90+
91+
a {
92+
color: #6341F0;
93+
text-decoration: underline;
94+
cursor: pointer;
95+
96+
@media (prefers-color-scheme: dark) {
97+
color: #B3A1FF;
98+
}
99+
}
100+
101+
button {
102+
border-radius: 8px;
103+
color: white;
104+
cursor: pointer;
105+
background-color: #553DB8;
106+
border: none;
107+
padding: 0;
108+
margin-top: 4px;
109+
110+
& > span {
111+
display: inline-block;
112+
padding: 12px 16px;
113+
border-radius: inherit;
114+
font-size: 20px;
115+
font-weight: bold;
116+
line-height: 1;
117+
background-color: #7553FF;
118+
border: 1px solid #553DB8;
119+
transform: translateY(-4px);
120+
}
121+
122+
&:hover > span {
123+
transform: translateY(-8px);
124+
}
125+
126+
&:active > span {
127+
transform: translateY(0);
128+
}
129+
}
130+
131+
.description {
132+
text-align: center;
133+
color: #6E6C75;
134+
max-width: 500px;
135+
line-height: 1.5;
136+
font-size: 20px;
137+
138+
@media (prefers-color-scheme: dark) {
139+
color: #A49FB5;
140+
}
141+
}
142+
143+
.flex-spacer {
144+
flex: 1;
145+
}
146+
147+
.success {
148+
padding: 12px 16px;
149+
border-radius: 8px;
150+
font-size: 20px;
151+
line-height: 1;
152+
background-color: #00F261;
153+
border: 1px solid #00BF4D;
154+
color: #181423;
155+
}
156+
157+
.success_placeholder {
158+
height: 46px;
159+
}
160+
`}</style>
161+
</div>
162+
);
163+
}

‎instrumentation-client.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// This file configures the initialization of Sentry on the client.
2+
// The added config here will be used whenever a users loads a page in their browser.
3+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
4+
5+
import * as Sentry from "@sentry/nextjs";
6+
7+
Sentry.init({
8+
dsn: "https://7086fcac4e65480ebcfaac19b0af1be4@o4509187550871557.ingest.us.sentry.io/4509187561357312",
9+
10+
// Add optional integrations for additional features
11+
integrations: [
12+
Sentry.replayIntegration(),
13+
],
14+
15+
// Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
16+
tracesSampleRate: 1,
17+
18+
// Define how likely Replay events are sampled.
19+
// This sets the sample rate to be 10%. You may want this to be 100% while
20+
// in development and sample at a lower rate in production
21+
replaysSessionSampleRate: 0.1,
22+
23+
// Define how likely Replay events are sampled when an error occurs.
24+
replaysOnErrorSampleRate: 1.0,
25+
26+
// Setting this option to true will print useful information to the console while you're setting up Sentry.
27+
debug: false,
28+
});
29+
30+
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

‎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;

‎next.config.ts‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,36 @@
1+
import {withSentryConfig} from "@sentry/nextjs";
12
import type { NextConfig } from "next";
23

34
const nextConfig: NextConfig = {};
45

5-
export default nextConfig;
6+
export default withSentryConfig(nextConfig, {
7+
// For all available options, see:
8+
// https://www.npmjs.com/package/@sentry/webpack-plugin#options
9+
10+
org: "self-evc",
11+
project: "javascript-nextjs",
12+
13+
// Only print logs for uploading source maps in CI
14+
silent: !process.env.CI,
15+
16+
// For all available options, see:
17+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
18+
19+
// Upload a larger set of source maps for prettier stack traces (increases build time)
20+
widenClientFileUpload: true,
21+
22+
// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
23+
// This can increase your server load as well as your hosting bill.
24+
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
25+
// side errors will fail.
26+
// tunnelRoute: "/monitoring",
27+
28+
// Automatically tree-shake Sentry logger statements to reduce bundle size
29+
disableLogger: true,
30+
31+
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
32+
// See the following for more information:
33+
// https://docs.sentry.io/product/crons/
34+
// https://vercel.com/docs/cron-jobs
35+
automaticVercelMonitors: true,
36+
});

0 commit comments

Comments
 (0)