sentryをセットアップ

Author: na-trium-144

app/(docs)/@chat/error.tsx

@@ -2,6 +2,8 @@
 
 import clsx from "clsx";
 import { ChatAreaContainer } from "./chat/[chatId]/chatArea";
+import { useEffect } from "react";
+import { captureException } from "@sentry/nextjs";
 
 export default function Error({
   error,
@@ -10,6 +12,10 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  useEffect(() => {
+    captureException(error);
+  }, [error]);
+
   return (
     <ChatAreaContainer chatId={"error"}>
       <p>ページの読み込み中にエラーが発生しました。</p>

app/actions/clearUserCache.ts

@@ -4,26 +4,39 @@ import { initContext, cacheKeyForPage } from "@/lib/chatHistory";
 import { updateTag } from "next/cache";
 import { getPagesList } from "@/lib/docs";
 import { isCloudflare } from "@/lib/detectCloudflare";
+import { headers } from "next/headers";
+import { withServerActionInstrumentation } from "@sentry/nextjs";
 
 export async function clearUserCacheAction() {
-  const ctx = await initContext();
-  if (!ctx.userId) return;
+  return withServerActionInstrumentation(
+    "clearUserCacheAction", // Action name for Sentry
+    {
+      headers: await headers(), // Connect client and server traces
+      recordResponse: true, // Include response data
+    },
+    async () => {
+      const ctx = await initContext();
+      if (!ctx.userId) return;
 
-  const pagesList = await getPagesList();
-  for (const lang of pagesList) {
-    for (const page of lang.pages) {
-      updateTag(cacheKeyForPage({ lang: lang.id, page: page.slug }, ctx.userId));
-    }
-  }
+      const pagesList = await getPagesList();
+      for (const lang of pagesList) {
+        for (const page of lang.pages) {
+          updateTag(
+            cacheKeyForPage({ lang: lang.id, page: page.slug }, ctx.userId)
+          );
+        }
+      }
 
-  if (isCloudflare()) {
-    const cache = await caches.open("chatHistory");
-    for (const lang of pagesList) {
-      for (const page of lang.pages) {
-        await cache.delete(
-          cacheKeyForPage({ lang: lang.id, page: page.slug }, ctx.userId)
-        );
+      if (isCloudflare()) {
+        const cache = await caches.open("chatHistory");
+        for (const lang of pagesList) {
+          for (const page of lang.pages) {
+            await cache.delete(
+              cacheKeyForPage({ lang: lang.id, page: page.slug }, ctx.userId)
+            );
+          }
+        }
       }
     }
-  }
+  );
 }

app/actions/deleteChat.ts

@@ -4,19 +4,30 @@ import { z } from "zod";
 import { deleteChat, initContext, revalidateChat } from "@/lib/chatHistory";
 import { section } from "@/schema/chat";
 import { eq } from "drizzle-orm";
+import { withServerActionInstrumentation } from "@sentry/nextjs";
+import { headers } from "next/headers";
 
 export async function deleteChatAction(chatId: string) {
-  chatId = z.uuid().parse(chatId);
-  const ctx = await initContext();
-  if (!ctx.userId) {
-    throw new Error("Not authenticated");
-  }
-  const deletedChat = await deleteChat(chatId, ctx);
+  return withServerActionInstrumentation(
+    "deleteChatAction", // Action name for Sentry
+    {
+      headers: await headers(), // Connect client and server traces
+      recordResponse: true, // Include response data
+    },
+    async () => {
+      chatId = z.uuid().parse(chatId);
+      const ctx = await initContext();
+      if (!ctx.userId) {
+        throw new Error("Not authenticated");
+      }
+      const deletedChat = await deleteChat(chatId, ctx);
 
-  const targetSection = await ctx.drizzle.query.section.findFirst({
-    where: eq(section.sectionId, deletedChat[0].sectionId),
-  });
-  if (targetSection) {
-    await revalidateChat(chatId, ctx.userId, targetSection.pagePath);
-  }
+      const targetSection = await ctx.drizzle.query.section.findFirst({
+        where: eq(section.sectionId, deletedChat[0].sectionId),
+      });
+      if (targetSection) {
+        await revalidateChat(chatId, ctx.userId, targetSection.pagePath);
+      }
+    }
+  );
 }

app/actions/getRedirectFromChat.ts

@@ -5,31 +5,44 @@ import { initContext } from "@/lib/chatHistory";
 import { LangId, PageSlug } from "@/lib/docs";
 import { chat, section } from "@/schema/chat";
 import { and, eq } from "drizzle-orm";
+import { setExtra, withServerActionInstrumentation } from "@sentry/nextjs";
+import { headers } from "next/headers";
 
 export async function getRedirectFromChat(chatId: string): Promise<string> {
-  chatId = z.uuid().parse(chatId);
-  
-  const { drizzle, userId } = await initContext();
-  if (!userId) {
-    throw new Error("Not authenticated");
-  }
-
-  const chatData = (await drizzle.query.chat.findFirst({
-    where: and(eq(chat.chatId, chatId), eq(chat.userId, userId)),
-    with: {
-      section: true,
+  return withServerActionInstrumentation(
+    "getRedirectFromChat", // Action name for Sentry
+    {
+      headers: await headers(), // Connect client and server traces
+      recordResponse: true, // Include response data
     },
-  })) as
-    | (typeof chat.$inferSelect & {
-        section: typeof section.$inferSelect;
-      })
-    | undefined;
-  if (!chatData?.section) {
-    throw new Error("Chat or section not found");
-  }
-  const [lang, page] = (chatData.section.pagePath.split("/") ?? []) as [
-    LangId,
-    PageSlug,
-  ];
-  return `/${lang}/${page}#${chatData.sectionId}`;
+    async () => {
+      setExtra("args", { chatId });
+
+      chatId = z.uuid().parse(chatId);
+
+      const { drizzle, userId } = await initContext();
+      if (!userId) {
+        throw new Error("Not authenticated");
+      }
+
+      const chatData = (await drizzle.query.chat.findFirst({
+        where: and(eq(chat.chatId, chatId), eq(chat.userId, userId)),
+        with: {
+          section: true,
+        },
+      })) as
+        | (typeof chat.$inferSelect & {
+            section: typeof section.$inferSelect;
+          })
+        | undefined;
+      if (!chatData?.section) {
+        throw new Error("Chat or section not found");
+      }
+      const [lang, page] = (chatData.section.pagePath.split("/") ?? []) as [
+        LangId,
+        PageSlug,
+      ];
+      return `/${lang}/${page}#${chatData.sectionId}`;
+    }
+  );
 }

app/actions/revalidateChat.ts

@@ -2,25 +2,38 @@
 
 import { initContext, revalidateChat } from "@/lib/chatHistory";
 import { PagePath, PagePathSchema } from "@/lib/docs";
+import { setExtra, withServerActionInstrumentation } from "@sentry/nextjs";
+import { headers } from "next/headers";
 import { z } from "zod";
 
 export async function revalidateChatAction(
   chatId: string,
   pagePath: string | PagePath
 ) {
-  chatId = z.uuid().parse(chatId);
-  if (typeof pagePath === "string") {
-    if (!/^[a-z0-9_-]+\/[a-z0-9_-]+$/.test(pagePath)) {
-      throw new Error("Invalid pagePath format");
+  return withServerActionInstrumentation(
+    "revalidateChatAction", // Action name for Sentry
+    {
+      headers: await headers(), // Connect client and server traces
+      recordResponse: true, // Include response data
+    },
+    async () => {
+      setExtra("args", { chatId, pagePath });
+
+      chatId = z.uuid().parse(chatId);
+      if (typeof pagePath === "string") {
+        if (!/^[a-z0-9_-]+\/[a-z0-9_-]+$/.test(pagePath)) {
+          throw new Error("Invalid pagePath format");
+        }
+        const [lang, page] = pagePath.split("/");
+        pagePath = PagePathSchema.parse({ lang, page });
+      } else {
+        pagePath = PagePathSchema.parse(pagePath);
+      }
+      const ctx = await initContext();
+      if (!ctx.userId) {
+        throw new Error("Not authenticated");
+      }
+      await revalidateChat(chatId, ctx.userId, pagePath);
     }
-    const [lang, page] = pagePath.split("/");
-    pagePath = PagePathSchema.parse({ lang, page });
-  } else {
-    pagePath = PagePathSchema.parse(pagePath);
-  }
-  const ctx = await initContext();
-  if (!ctx.userId) {
-    throw new Error("Not authenticated");
-  }
-  await revalidateChat(chatId, ctx.userId, pagePath);
+  );
 }

app/error.tsx

@@ -1,7 +1,9 @@
 "use client"; // Error boundaries must be Client Components
 
+import { captureException } from "@sentry/nextjs";
 import clsx from "clsx";
 import Link from "next/link";
+import { useEffect } from "react";
 
 export default function ErrorPage({
   error,
@@ -10,6 +12,10 @@ export default function ErrorPage({
   error: unknown;
   reset: () => void;
 }) {
+  useEffect(() => {
+    captureException(error);
+  }, [error]);
+
   return (
     <div className="p-4 flex-1 w-max max-w-full mx-auto flex flex-col items-center justify-center">
       <h1 className="text-2xl font-bold mb-4">エラー</h1>

app/global-error.tsx

@@ -0,0 +1,53 @@
+"use client"; // Error boundaries must be Client Components
+
+import { captureException } from "@sentry/nextjs";
+import clsx from "clsx";
+import Link from "next/link";
+import { useEffect } from "react";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: unknown;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    captureException(error);
+  }, [error]);
+
+  return (
+    <div className="p-4 flex-1 w-max max-w-full mx-auto flex flex-col items-center justify-center">
+      <h1 className="text-2xl font-bold mb-4">エラー</h1>
+      <p>ページの読み込み中にエラーが発生しました。</p>
+      <pre
+        className={clsx(
+          "border-2 border-current/20 mt-4 rounded-box p-4! bg-base-300! text-base-content!",
+          "max-w-full whitespace-pre-wrap"
+        )}
+      >
+        {error instanceof Error ? error.message : String(error)}
+      </pre>
+      {"digest" in (error as { digest: string }) && (
+        <p className="mt-2 text-sm text-base-content/50">
+          Digest: {(error as { digest: string }).digest}
+        </p>
+      )}
+      <div className="divider w-full self-auto!" />
+      <div className="flex flex-row gap-4">
+        <button
+          className="btn btn-warning"
+          onClick={
+            // Attempt to recover by trying to re-render the segment
+            () => reset()
+          }
+        >
+          やりなおす
+        </button>
+        <Link href="/" className="btn btn-primary">
+          トップに戻る
+        </Link>
+      </div>
+    </div>
+  );
+}

app/terminal/page.tsx

@@ -53,6 +53,15 @@ export default function RuntimeTestPage() {
       <Heading level={2}>Xterm.js Colors</Heading>
       <AnsiColorSample />
 
+      <button
+        className="btn mt-4"
+        onClick={() => {
+          throw new Error("Sentry Test Error");
+        }}
+      >
+        Sentry Test Error
+      </button>
+
       <Heading level={2}>自動テスト</Heading>
       <MochaTest />
     </div>

instrumentation-client.ts

@@ -0,0 +1,8 @@
+import * as Sentry from "@sentry/nextjs";
+Sentry.init({
+  dsn: "https://db719a3358e14ebc86cc975ea04b0dac@bugsink.utcode.net/1",
+  // Adds request headers and IP for users
+  sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

instrumentation.ts

@@ -0,0 +1,11 @@
+import * as Sentry from "@sentry/nextjs";
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
+// Capture errors from Server Components, middleware, and proxies
+export const onRequestError = Sentry.captureRequestError;