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

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>
))}