How Can I Pass Errors Back To A Fetch Statement?

Unanswered

Eurasian Collared-Dove posted this in #help-forum

Eurasian Collared-DoveOP

2023-09-20T23:52:33.000Z

Hey, I'm trying to build a register page currently and I need to be able to get multiple errors, e.g. if name is blank, if email is not a valid email, etc. My register form is really simple with a button that has an onClick={handleSubmit}, and my handleSubmit function is defined as such:

//All variables are set above the function and updated via: //onChange={(e) => {
//   firstName.current = e.target.value;
//}}

const result = await fetch("http://localhost:3000/api/register", {
        method: "POST",
        body: JSON.stringify({
          firstName: firstName.current,
          lastName: lastName.current,
          email: email.current,
          password: password.current,
          repeatPassword: repeatPassword.current,
        }),
        headers: { "Content-Type": "application/json" },
      });

      const res = await result.json();
      console.log(res);

      if (!result.ok) {
        console.log("testing!");
        throw new Error(res.error);
      }
    } catch (error) {
      globalError = (error as Error).message;

      switch (globalError) {
        case "EmailExists":
          console.log("Email exists!");
          globalError = "Email Already Exists In System!";
          break;
      }
    }

the error display is then rendered below the register form with the value of globalError, the only issue is, this doesn't work. I only get the value of "Unexpected End of JSON Input" outputted on the error display, so that means that the file is throwing an error, but it's not throwing an error that has the message of EmailExists which is the expected in this case

My fetch statement file is defined as such:

3 Replies

Eurasian Collared-DoveOP

2023-09-20T23:52:36.000Z

import prisma from "@/lib/prisma";
import * as bcrypt from "bcrypt";

interface RequestBody {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  repeatPassword: string;
}

export async function POST(request: Request) {
  const body: RequestBody = await request.json();

  const emailExists = await prisma.user.findFirst({
    where: {
      email: body.email,
    },
  });

  if (emailExists) {
    throw new Error("EmailExists");
  }

  const user = await prisma.user.create({
    data: {
      name: body.firstName,
      email: body.email,
      password: await bcrypt.hash(body.password, 10),
    },
  });

  const { password, ...result } = user;

  return new Response(JSON.stringify(result));
}

How can I correctly passback an error with the value of EmailExists if the email exists, my check for if the emailExists works, but I have no idea the correct methodolgy to passback an error with the data I need to the fetch statement, if anyone has any ideas/input they are very much appreciated, thank you!

The throw new Error("EmailExists") works but it's a server error outputted as

//Updated if(emailExists) to console.log
//if (emailExists) {
//  console.log("Email Exists!");
//  throw new Error("EmailExists");
//}
//=>
//Server Console (Terminal npm run dev)
error Error: EmailExists
    at POST (webpack-internal:///(rsc)/./src/app/api/register/route.ts:19:15)
    at async eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:37)