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

Author: na-trium-144

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

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import { ChatAreaContainer } from "./chat/[chatId]/chatArea";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { captureException } from "@sentry/nextjs";
 
 export default function Error({
@@ -12,8 +12,9 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  const [eventId, setEventId] = useState<string>();
   useEffect(() => {
-    captureException(error);
+    setEventId(captureException(error));
   }, [error]);
 
   return (
@@ -32,6 +33,9 @@ export default function Error({
           Digest: {error.digest}
         </p>
       )}
+      {eventId && (
+        <p className="mt-2 text-sm text-base-content/50">eventID: {eventId}</p>
+      )}
     </ChatAreaContainer>
   );
 }

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/error.tsx

@@ -3,7 +3,7 @@
 import { captureException } from "@sentry/nextjs";
 import clsx from "clsx";
 import Link from "next/link";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function ErrorPage({
   error,
@@ -12,8 +12,9 @@ export default function ErrorPage({
   error: unknown;
   reset: () => void;
 }) {
+  const [eventId, setEventId] = useState<string>();
   useEffect(() => {
-    captureException(error);
+    setEventId(captureException(error));
   }, [error]);
 
   return (
@@ -33,6 +34,9 @@ export default function ErrorPage({
           Digest: {(error as { digest: string }).digest}
         </p>
       )}
+      {eventId && (
+        <p className="mt-2 text-sm text-base-content/50">eventID: {eventId}</p>
+      )}
       <div className="divider w-full self-auto!" />
       <div className="flex flex-row gap-4">
         <button

app/global-error.tsx

@@ -3,7 +3,7 @@
 import { captureException } from "@sentry/nextjs";
 import clsx from "clsx";
 import Link from "next/link";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function ErrorPage({
   error,
@@ -12,8 +12,9 @@ export default function ErrorPage({
   error: unknown;
   reset: () => void;
 }) {
+  const [eventId, setEventId] = useState<string>();
   useEffect(() => {
-    captureException(error);
+    setEventId(captureException(error));
   }, [error]);
 
   return (
@@ -33,6 +34,9 @@ export default function ErrorPage({
           Digest: {(error as { digest: string }).digest}
         </p>
       )}
+      {eventId && (
+        <p className="mt-2 text-sm text-base-content/50">eventID: {eventId}</p>
+      )}
       <div className="divider w-full self-auto!" />
       <div className="flex flex-row gap-4">
         <button