sentryをセットアップ

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

@@ -1,7 +1,7 @@
 "use client"; // Error boundaries must be Client Components
 
-import clsx from "clsx";
 import { ChatAreaContainer } from "./chat/[chatId]/chatArea";
+import { ErrorMessage } from "@/errorMessage";
 
 export default function Error({
   error,
@@ -12,20 +12,7 @@ export default function Error({
 }) {
   return (
     <ChatAreaContainer chatId={"error"}>
-      <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.message}
-      </pre>
-      {error.digest && (
-        <p className="mt-2 text-sm text-base-content/50">
-          Digest: {error.digest}
-        </p>
-      )}
+      <ErrorMessage error={error} />
     </ChatAreaContainer>
   );
 }

app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { useState, FormEvent, useEffect, useRef, useCallback, useMemo } from "react";
+import {
+  useState,
+  FormEvent,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from "react";
 // import useSWR from "swr";
 // import {
 //   getQuestionExample,
@@ -13,6 +20,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { ChatStreamEvent } from "@/api/chat/route";
 import { useStreamingChatContext } from "@/(docs)/streamingChatContext";
 import { revalidateChatAction } from "@/actions/revalidateChat";
+import { captureException } from "@sentry/nextjs";
 
 interface ChatFormProps {
   path: PagePath;
@@ -84,7 +92,6 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   }, [exampleChoice]);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-
     let userQuestion = inputValue;
     if (!userQuestion && exampleData.length > 0 && exampleChoice) {
       // 質問が空欄なら、質問例を使用
@@ -114,7 +121,8 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
           execResults,
         }),
       });
-    } catch {
+    } catch (e) {
+      captureException(e);
       setErrorMessage("AIへの接続に失敗しました");
       setIsLoading(false);
       return;
@@ -184,12 +192,14 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
                 streamingChatContext.finishStreaming();
                 router.refresh();
               }
-            } catch {
+            } catch (e) {
+              captureException(e);
               // ignore JSON parse errors
             }
           }
         }
       } catch (err) {
+        captureException(err);
         console.error("Stream reading failed:", err);
         // ナビゲーション後のエラーはストリーミングを終了してローディングを止める
         if (!navigated) {

app/(docs)/layout.tsx

@@ -15,7 +15,7 @@ export default function WorkspaceLayout({
   return (
     <StreamingChatProvider>
       <ChatAreaStateProvider>
-        <div className="w-full flex flex-row">
+        <div className="flex-1 w-full flex flex-row">
           {docs}
 
           {chat}

app/about/license/ThirdPartyLicenses.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { StyledSyntaxHighlighter } from "@/markdown/styledSyntaxHighlighter";
-import { langConstants } from "@my-code/runtime/languages";
+import { FallbackPre } from "@/markdown/styledSyntaxHighlighter";
 import { useState } from "react";
 
 export interface LicenseEntry {
@@ -80,12 +79,7 @@ export function ThirdPartyLicenses({ licenses }: { licenses: LicenseEntry[] }) {
                 </p>
               )}
               {pkg.licenseText && (
-                <StyledSyntaxHighlighter
-                  className="text-sm"
-                  language={langConstants(undefined)}
-                >
-                  {pkg.licenseText}
-                </StyledSyntaxHighlighter>
+                <FallbackPre className="text-sm">{pkg.licenseText}</FallbackPre>
               )}
             </div>
           </div>

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/api/chat/route.ts

@@ -18,6 +18,7 @@ import {
   ReplOutputSchema,
 } from "@my-code/runtime/interface";
 import { z } from "zod";
+import { captureException } from "@sentry/nextjs";
 
 const ChatParamsSchema = z.object({
   path: PagePathSchema,
@@ -209,9 +210,9 @@ export async function POST(request: NextRequest) {
       function send(event: ChatStreamEvent) {
         controller.enqueue(encoder.encode(JSON.stringify(event) + "\n"));
       }
+      let fullText = "";
 
       try {
-        let fullText = "";
         let headerParsed = false;
         let chatId: string | undefined;
         let contentAfterHeader = "";
@@ -244,6 +245,15 @@ export async function POST(request: NextRequest) {
                   type: "error",
                   message: "AIからの応答にタイトルが含まれていませんでした",
                 });
+                captureException(
+                  "AIからの応答にタイトルが含まれていませんでした",
+                  {
+                    extra: {
+                      prompt,
+                      fullText,
+                    },
+                  }
+                );
                 controller.close();
                 return;
               }
@@ -286,6 +296,12 @@ export async function POST(request: NextRequest) {
             type: "error",
             message: "AIからの応答の形式が正しくありませんでした",
           });
+          captureException("AIからの応答の形式が正しくありませんでした", {
+            extra: {
+              prompt,
+              fullText,
+            },
+          });
           controller.close();
           return;
         }
@@ -321,6 +337,7 @@ export async function POST(request: NextRequest) {
         send({ type: "done" });
         controller.close();
       } catch (error: unknown) {
+        captureException(error, { extra: { prompt, fullText } });
         console.error("Error in AI streaming:", error);
         try {
           controller.enqueue(