refactor: enhance sentry exchange

src/app/[lang]/identification/form.tsx

@@ -5,6 +5,7 @@ import { TextField, Tooltip } from '@mui/material';
 import { useReCaptcha } from 'next-recaptcha-v3';
 import { useForm } from 'react-hook-form';
 import { useFormState } from 'react-dom';
+import * as Sentry from '@sentry/nextjs';
 import Link from 'next/link';
 import React from 'react';
 import { z } from 'zod';
@@ -29,7 +30,7 @@ export function Form() {
   const { executeRecaptcha, loaded } = useReCaptcha();
   const { intl } = useLanguage();
 
-  const { formState, setValue, register, trigger, clearErrors } =
+  const { formState, setValue, register, trigger, clearErrors, watch } =
     useForm<CedulaForm>({
       reValidateMode: 'onChange',
       resolver: zodResolver(createCedulaSchema(intl)),
@@ -64,6 +65,12 @@ export function Form() {
     if (state?.message) {
       const message = localizeString(intl, state.message) || state.message;
 
+      Sentry.captureMessage(message, {
+        user: { id: watch('cedula') },
+        extra: { state, error: state?.message },
+        level: 'error',
+      });
+
       AlertError(message);
     }
     // eslint-disable-next-line

src/app/[lang]/register/form.tsx

@@ -4,6 +4,7 @@ import { passwordStrength } from 'check-password-strength';
 import { zodResolver } from '@hookform/resolvers/zod';
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import * as Sentry from '@sentry/nextjs';
 import { useFormState } from 'react-dom';
 import { z } from 'zod';
 
@@ -66,10 +67,16 @@ export function Form({ cedula, flow, returnTo }: FormProps) {
   const password = watch('password');
 
   useEffect(() => {
-    if (state.message) {
+    if (state?.message) {
       setLoading(false);
       const message = localizeString(intl, state.message) || state.message;
 
+      Sentry.captureMessage(message, {
+        user: { id: state?.meta?.cedula, email: watch('email') },
+        extra: { state, error: state?.message },
+        level: 'error',
+      });
+
       AlertError(message);
     }
     // eslint-disable-next-line

src/app/[lang]/register/register.action.ts

@@ -101,13 +101,13 @@ export async function registerAccount(
   if ('ui' in registration) {
     for (const node of registration.ui.nodes) {
       for (const { type, text } of node.messages) {
-        if (type === 'error') return { message: text };
+        if (type === 'error') return { message: text, meta: { cedula } };
       }
     }
 
     for (const { type, text } of registration.ui.messages ?? []) {
       if (type === 'error') {
-        return { message: text };
+        return { message: text, meta: { cedula } };
       }
     }
   }
@@ -125,5 +125,5 @@ export async function registerAccount(
     }
   }
 
-  return { message: 'errors.createIdentity' };
+  return { message: 'errors.createIdentity', meta: { cedula } };
 }

src/app/[lang]/verification/form.tsx

@@ -4,6 +4,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
 import { TextField, Tooltip, Typography } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
+import * as Sentry from '@sentry/nextjs';
 import { useFormState } from 'react-dom';
 import Image from 'next/image';
 import { z } from 'zod';
@@ -45,9 +46,15 @@ export function Form({ flow, returnTo, code }: Props) {
   const [state, action] = useFormState(verifyAccount, { message: '' });
 
   useEffect(() => {
-    if (state.message) {
+    if (state?.message) {
       setLoading(false);
       setError(true);
+
+      Sentry.captureMessage(state.message, {
+        extra: { state, error: state?.message, flow },
+        level: 'error',
+      });
+
       AlertError(state.message);
     }
     // eslint-disable-next-line
@@ -172,17 +179,3 @@ function parseOTP(value: string | undefined, size = 6) {
 
   return value.replace(/\D/g, '').trim().split('').slice(0, size);
 }
-
-// onSubmit={async (e) => {
-//   // setLoading(true);
-
-//   console.log({ valid: formState.isValid });
-//   // if (!formState.isValid) {
-//   //   e.preventDefault();
-
-//   //   // await trigger();
-//   //   return false;
-//   // }
-
-//   e.currentTarget.requestSubmit();
-// }}

src/types/action-state.type.ts

@@ -2,4 +2,5 @@ import { LocalizedPath } from '@/common/helpers';
 
 export type State = {
   message: LocalizedPath | (string & {});
+  meta?: Record<string, string>;
 };