sentryをセットアップ (#214)

* sentryをセットアップ

* bundleSizeOptimizationを指定

* sentryとopentelemetryを別ファイルにしてみる

* instrumentation.tsでsentryをトップレベルimportしない

* 名前を消してみる

* sentry/nextjsをexternalPackagesにしてみる

* Revert "instrumentation.tsでsentryをトップレベルimportしない"

This reverts commit ae747fa.

* catchしたエラーとチャットエラーをsentryに送信

* 動作確認用に新しいコミットをpush

* eventIDの表示を追加、エラーページのレイアウトを修正

* dev環境でエラーを記録しない

* エラーページにEventIDつきフォームリンクを追加、全エラーページをコンポーネントにまとめる

* runtime初期化/実行の異常系を `onError` + `fatalError` で分離伝播 (#218)

* chore: plan runtime fatal error handling changes

Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/3499a4d7-2b75-4046-b6d5-24912d4eaf0a

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

* feat(runtime): add fatalError and onError callback propagation

Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/3499a4d7-2b75-4046-b6d5-24912d4eaf0a

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

* revert package-lock.json

* fix: restore package-lock from sentry to prevent dependency drift

Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/f1dea2f9-037f-4cd9-a9e0-cefe2e569bfa

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

* fix(runtime): avoid bundling typescript.js in server handler

Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/1f1e6587-2ca0-4873-86cf-5cc4025a539b

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

* fatalErrorをそんなに目立たせる必要ない

* handleRuntimeErrorをplainの関数にし、alertを追加

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

* テストのエラーもsentryに送る

* Update app/errorMessage.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update app/errorMessage.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* sentry関連の設定をすべて環境変数に & debugオフ

* global-errorページのスタイル修正 & フォームパラメータ修正

* sentryの環境変数をREADMEに書いておく

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

README.md

@@ -26,6 +26,11 @@ GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
+SENTRY_ORG=
+SENTRY_PROJECT=
+SENTRY_URL=
+SENTRY_AUTH_TOKEN=
+SENTRY_DSN=
 ```
 
 * チャット用にGeminiのAPIキーまたはOpenRouterのAPIキーのいずれかが必要です。未設定の場合チャットが使えません

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