fix#447 Sentryで利用者のユーザーIDを収集する

src/common_components/auth/signin/SignInPage.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
+import * as Sentry from "@sentry/nextjs";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { css, cx } from "@styled-system/css";
@@ -28,13 +29,18 @@ export const SigninForm: React.FC = () => {
     const auth = getAuth();
     toast.promise(
       (async () => {
-        await signInWithEmailAndPassword(auth, data.email, data.password);
+        const { user } = await signInWithEmailAndPassword(auth, data.email, data.password);
+        Sentry.setUser({ id: user.uid });
         reset();
       })(),
       {
         loading: "サインインしています",
         success: "サインインしました",
-        error: () => {
+        error: (error) => {
+          Sentry.captureMessage(
+            `Failed to sign in: ${error.code}`,
+            error.code === "auth/invalid-credential" ? "log" : "info",
+          );
           setError("root", { message: "サインインできませんでした" });
           return "サインインできませんでした";
         },

src/common_components/auth/signup/SignupForm.tsx

@@ -9,6 +9,7 @@ import { getAuth, sendEmailVerification, signInWithEmailAndPassword } from "fire
 import { SignupSchema, SignupSchemaType } from "@/lib/valibot";
 import { valibotResolver } from "@hookform/resolvers/valibot";
 import { Dispatch, SetStateAction } from "react";
+import * as Sentry from "@sentry/nextjs";
 
 let labelAndInputStyle = css({
   display: "flex",
@@ -48,9 +49,10 @@ export const SignupForm: React.FC<SignupFormProps> = ({ setUserEmail }) => {
       }).then((res) => {
         if (res.status === 201) {
           const auth = getAuth();
-          signInWithEmailAndPassword(auth, data.email, data.password).then(() => {
+          signInWithEmailAndPassword(auth, data.email, data.password).then(({ user }) => {
             setUserEmail(data.email);
             sendEmailVerification(auth.currentUser!);
+            Sentry.setUser({ id: user.uid });
           });
         } else {
           setError("root", { message: "ユーザ登録に失敗しました" });

src/common_components/header/Header.tsx

@@ -3,6 +3,7 @@
 import { useAuthState } from "@/lib/firebase";
 import { css } from "@styled-system/css";
 import { getAuth, signOut } from "firebase/auth";
+import * as Sentry from "@sentry/nextjs";
 import { FC } from "react";
 import toast from "react-hot-toast";
 import Image from "next/image";
@@ -121,6 +122,7 @@ export const Header: FC = () => {
     toast.promise(
       (async (): Promise<void> => {
         await signOut(auth);
+        Sentry.setUser(null);
       })(),
       {
         loading: "サインアウトしています",