jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 14:06:40 -04:00
Code Issues Activity

sentry instrumentation

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-29 20:37:28 -04:00
parent 4f5bc129b6
commit 87a24a98f0
21 changed files with 2244 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/contact/actions.ts
View File

@ -3,6 +3,7 @@
import { headers } from "next/headers";
import { z } from "zod";
import { Resend } from "resend";
import * as Sentry from "@sentry/nextjs";
import * as config from "../../lib/config";
const schema = z.object({
@ -22,71 +23,81 @@ export const sendMessage = async (
errors?: z.inferFormattedError<typeof schema>;
payload?: FormData;
}> => {
try {
const validatedFields = schema.safeParse(Object.fromEntries(formData));
return await Sentry.withServerActionInstrumentation(
"sendMessage",
{
formData,
headers: headers(),
recordResponse: true,
},
async () => {
try {
const validatedFields = schema.safeParse(Object.fromEntries(formData));
// backup to client-side validations just in case someone squeezes through without them
if (!validatedFields.success) {
console.debug("[contact form] validation error:", validatedFields.error.flatten());
// backup to client-side validations just in case someone squeezes through without them
if (!validatedFields.success) {
console.debug("[contact form] validation error:", validatedFields.error.flatten());
return {
success: false,
message: "Please make sure that all fields are properly filled in.",
errors: validatedFields.error.format(),
payload: formData,
};
return {
success: false,
message: "Please make sure that all fields are properly filled in.",
errors: validatedFields.error.format(),
payload: formData,
};
}
// validate captcha
const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
secret: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
response: validatedFields.data["cf-turnstile-response"],
remoteip: (await headers()).get("x-forwarded-for") || "",
}),
cache: "no-store",
signal: AbortSignal.timeout(5000), // 5 second timeout
});
if (!turnstileResponse.ok) {
throw new Error(`[contact form] turnstile validation failed: ${turnstileResponse.status}`);
}
const turnstileData = (await turnstileResponse.json()) as { success: boolean };
if (!turnstileData.success) {
return {
success: false,
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
payload: formData,
};
}
if (!process.env.RESEND_FROM_EMAIL) {
console.warn("[contact form] RESEND_FROM_EMAIL not set, falling back to onboarding@resend.dev.");
}
// send email
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: `${validatedFields.data.name} <${process.env.RESEND_FROM_EMAIL ?? "onboarding@resend.dev"}>`,
replyTo: `${validatedFields.data.name} <${validatedFields.data.email}>`,
to: [config.authorEmail],
subject: `[${config.siteName}] Contact Form Submission`,
text: validatedFields.data.message,
});
return { success: true, message: "Thanks! You should hear from me soon.", payload: formData };
} catch (error) {
Sentry.captureException(error);
return {
success: false,
message: "Internal server error... Try again later or shoot me an old-fashioned email?",
errors: error instanceof z.ZodError ? error.format() : undefined,
payload: formData,
};
}
}
// validate captcha
const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
secret: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
response: validatedFields.data["cf-turnstile-response"],
remoteip: (await headers()).get("x-forwarded-for") || "",
}),
cache: "no-store",
signal: AbortSignal.timeout(5000), // 5 second timeout
});
if (!turnstileResponse.ok) {
throw new Error(`[contact form] turnstile validation failed: ${turnstileResponse.status}`);
}
const turnstileData = (await turnstileResponse.json()) as { success: boolean };
if (!turnstileData.success) {
return {
success: false,
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
payload: formData,
};
}
if (!process.env.RESEND_FROM_EMAIL) {
console.warn("[contact form] RESEND_FROM_EMAIL not set, falling back to onboarding@resend.dev.");
}
// send email
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: `${validatedFields.data.name} <${process.env.RESEND_FROM_EMAIL ?? "onboarding@resend.dev"}>`,
replyTo: `${validatedFields.data.name} <${validatedFields.data.email}>`,
to: [config.authorEmail],
subject: `[${config.siteName}] Contact Form Submission`,
text: validatedFields.data.message,
});
} catch (error) {
console.error("[contact form] fatal error:", error);
return {
success: false,
message: "Internal server error... Try again later or shoot me an old-fashioned email?",
errors: error instanceof z.ZodError ? error.format() : undefined,
payload: formData,
};
}
return { success: true, message: "Thanks! You should hear from me soon.", payload: formData };
);
};

3
app/contact/page.tsx
View File

@ -2,7 +2,6 @@ import PageTitle from "../../components/PageTitle";
import Link from "../../components/Link";
import ContactForm from "./form";
import { addMetadata } from "../../lib/helpers/metadata";
import type { Route } from "next";
export const metadata = addMetadata({
title: "Contact Me",
@ -29,7 +28,7 @@ const Page = () => {
</p>
<p>
🔐 You can grab my public key here:{" "}
<Link href={"/pubkey.asc" as Route} title="My Public PGP Key" rel="pgpkey authn" openInNewTab>
<Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn" openInNewTab>
<code style={{ fontSize: "0.925em", letterSpacing: "0.075em", wordSpacing: "-0.3em" }}>
6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39
</code>

14
app/error.tsx Normal file
View File

@ -0,0 +1,14 @@
"use client";
import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";
const Error = ({ error }: { error: Error & { digest?: string } }) => {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return <span>Something went very wrong! 😳</span>;
};
export default Error;

25
app/global-error.tsx Normal file
View File

@ -0,0 +1,25 @@
"use client";
import { useEffect } from "react";
import NextError from "next/error";
import * as Sentry from "@sentry/nextjs";
const GlobalError = ({ error }: { error: Error & { digest?: string } }) => {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<html>
<body>
{/* `NextError` is the default Next.js error page component. Its type
definition requires a `statusCode` prop. However, since the App Router
does not expose status codes for errors, we simply pass 0 to render a
generic error message. */}
<NextError statusCode={0} />
</body>
</html>
);
};
export default GlobalError;

5
app/notes/[slug]/counter.tsx
View File

@ -1,4 +1,5 @@
import { connection } from "next/server";
import * as Sentry from "@sentry/nextjs";
import commaNumber from "comma-number";
import CountUp from "../../../components/CountUp";
import redis from "../../../lib/helpers/redis";
@ -21,9 +22,7 @@ const HitCounter = async ({ slug }: { slug: string }) => {
</span>
);
} catch (error) {
console.error("[hit counter] fatal error:", error);
throw new Error();
Sentry.captureException(error);
}
};

51
app/notes/[slug]/page.tsx
View File

@ -1,5 +1,4 @@
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { JsonLd } from "react-schemaorg";
import { CalendarIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
import Link from "../../../components/Link";
@ -10,8 +9,8 @@ import HitCounter from "./counter";
import { getSlugs, getFrontMatter } from "../../../lib/helpers/posts";
import { addMetadata } from "../../../lib/helpers/metadata";
import * as config from "../../../lib/config";
import { BASE_URL } from "../../../lib/config/constants";
import type { Metadata, Route } from "next";
import { BASE_URL, POSTS_DIR } from "../../../lib/config/constants";
import type { Metadata } from "next";
import type { Article } from "schema-dts";
import styles from "./page.module.css";
@ -50,7 +49,7 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
card: "summary_large_image",
},
alternates: {
canonical: `/notes/${slug}`,
canonical: `/${POSTS_DIR}/${slug}`,
},
});
};
@ -59,7 +58,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
const { slug } = await params;
const frontmatter = await getFrontMatter(slug);
const { default: MDXContent } = await import(`../../../notes/${slug}/index.mdx`);
const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
return (
<>
@ -70,7 +69,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
headline: frontmatter!.title,
description: frontmatter!.description,
url: frontmatter!.permalink,
image: [`${BASE_URL}/notes/${slug}/opengraph-image`],
image: [`${BASE_URL}/${POSTS_DIR}/${frontmatter!.slug}/opengraph-image`],
keywords: frontmatter!.tags,
datePublished: frontmatter!.date,
dateModified: frontmatter!.date,
@ -85,7 +84,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
<div className={styles.meta}>
<div className={styles.metaItem}>
<Link href={`/notes/${frontmatter!.slug}` as Route} plain className={styles.metaLink}>
<Link href={`/${POSTS_DIR}/${frontmatter!.slug}`} plain className={styles.metaLink}>
<CalendarIcon size="1.2em" className={styles.metaIcon} />
<Time date={frontmatter!.date} format="MMMM d, y" />
</Link>
@ -106,7 +105,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
<div className={styles.metaItem}>
<Link
href={`https://github.com/${config.githubRepo}/blob/main/notes/${frontmatter!.slug}/index.mdx`}
href={`https://github.com/${config.githubRepo}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
title={`Edit "${frontmatter!.title}" on GitHub`}
plain
className={styles.metaLink}
@ -118,31 +117,29 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
{/* only count hits on production site */}
{process.env.NEXT_PUBLIC_VERCEL_ENV !== "development" && process.env.NODE_ENV !== "development" ? (
<ErrorBoundary fallback={null}>
<div
className={styles.metaItem}
style={{
// fix potential layout shift when number of hits loads
minWidth: "7em",
marginRight: 0,
}}
<div
className={styles.metaItem}
style={{
// fix potential layout shift when number of hits loads
minWidth: "7em",
marginRight: 0,
}}
>
<EyeIcon size="1.2em" className={styles.metaIcon} />
<Suspense
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
// show a zero here as a "loading indicator"
fallback={<span>0</span>}
>
<EyeIcon size="1.2em" className={styles.metaIcon} />
<Suspense
// when this loads, the component will count up from zero to the actual number of hits, so we can simply
// show a zero here as a "loading indicator"
fallback={<span>0</span>}
>
<HitCounter slug={`notes/${frontmatter!.slug}`} />
</Suspense>
</div>
</ErrorBoundary>
<HitCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
</Suspense>
</div>
) : null}
</div>
<h1 className={styles.title}>
<Link
href={`/notes/${frontmatter!.slug}` as Route}
href={`/${POSTS_DIR}/${frontmatter!.slug}`}
dangerouslySetInnerHTML={{ __html: frontmatter!.htmlTitle || frontmatter!.title }}
plain
className={styles.link}

20
app/notes/page.tsx
View File

@ -3,8 +3,8 @@ import Time from "../../components/Time";
import { getFrontMatter } from "../../lib/helpers/posts";
import { addMetadata } from "../../lib/helpers/metadata";
import * as config from "../../lib/config";
import { POSTS_DIR } from "../../lib/config/constants";
import type { ReactElement } from "react";
import type { Route } from "next";
import type { FrontMatter } from "../../lib/helpers/posts";
import styles from "./page.module.css";
@ -13,25 +13,25 @@ export const metadata = addMetadata({
title: "Notes",
description: `Recent posts by ${config.authorName}.`,
alternates: {
canonical: "/notes",
canonical: `/${POSTS_DIR}`,
},
});
const Page = async () => {
// parse the year of each note and group them together
const notes = await getFrontMatter();
const notesByYear: {
// parse the year of each post and group them together
const posts = await getFrontMatter();
const postsByYear: {
[year: string]: FrontMatter[];
} = {};
notes.forEach((note) => {
const year = new Date(note.date).getUTCFullYear();
(notesByYear[year] || (notesByYear[year] = [])).push(note);
posts.forEach((post) => {
const year = new Date(post.date).getUTCFullYear();
(postsByYear[year] || (postsByYear[year] = [])).push(post);
});
const sections: ReactElement[] = [];
Object.entries(notesByYear).forEach(([year, posts]) => {
Object.entries(postsByYear).forEach(([year, posts]) => {
sections.push(
<section className={styles.section} key={year}>
<h2 className={styles.year}>{year}</h2>
@ -40,7 +40,7 @@ const Page = async () => {
<li className={styles.post} key={slug}>
<Time date={date} format="MMM d" className={styles.postDate} />
<span>
<Link href={`/notes/${slug}` as Route} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
<Link href={`/${POSTS_DIR}/${slug}`} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
</span>
</li>
))}

5
app/page.tsx
View File

@ -3,7 +3,6 @@ import { rgba } from "polished";
import { LockIcon } from "lucide-react";
import UnstyledLink from "../components/Link";
import type { ComponentPropsWithoutRef } from "react";
import type { Route } from "next";
import styles from "./page.module.css";
@ -149,7 +148,7 @@ const Page = () => {
</Link>{" "}
and{" "}
<Link
href={"/notes/my-first-code" as Route}
href="/notes/my-first-code"
title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc"
darkColor="#d588fb"
@ -259,7 +258,7 @@ const Page = () => {
</Link>{" "}
<sup>
<Link
href={"/pubkey.asc" as Route}
href="/pubkey.asc"
rel="pgpkey authn"
title="My Public Key"
lightColor="#757575"

2
app/robots.ts
View File

@ -7,7 +7,7 @@ const robots = (): MetadataRoute.Robots => ({
rules: [
{
userAgent: "*",
disallow: ["/_stream/", "/api/", "/stats/", "/tweets/", "/404", "/500"],
disallow: ["/_stream/", "/_otel/", "/api/", "/404", "/500"],
},
],
sitemap: `${BASE_URL}/sitemap.xml`,