Form Error Handling

Answered

astro posted this in #help-forum

2024-04-27T09:30:03.934Z

why does my error not get logged to the console?
form:

<form
  className="space-y-4"
  onSubmit={handleSubmit(async (data) => {
    try {
      await fetch("/api/issues", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      router.push("/issues");
    } catch (error) {
      console.log(error);
    }
  })}
>

route.ts

export async function POST(request: NextRequest) {
  const body: Issue = await request.json();
  const validation = createIssueSchema.safeParse(body);

  if (!validation.success) {
    return NextResponse.json(validation.error.format(), { status: 400 });
  }

  const newIssue = await prisma.issue.create({
    data: {
      title: body.title,
      description: body.description,
    },
  });

  return NextResponse.json(newIssue, { status: 200 });
}

Answered by joulev

const res = await fetch(…)
if (!res.ok) throw new Error(await res.json());

or instead of throw that error you can do anything you want

View full answer

17 Replies

@astro why does my error not get logged to the console? form: tsx <form className="space-y-4" onSubmit={handleSubmit(async (data) => { try { await fetch("/api/issues", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); router.push("/issues"); } catch (error) { console.log(error); } })} > route.ts ts export async function POST(request: NextRequest) { const body: Issue = await request.json(); const validation = createIssueSchema.safeParse(body); if (!validation.success) { return NextResponse.json(validation.error.format(), { status: 400 }); } const newIssue = await prisma.issue.create({ data: { title: body.title, description: body.description, }, }); return NextResponse.json(newIssue, { status: 200 }); }

joulev

2024-04-27T09:32:16.148Z

fetch doesn’t throw for non-20x errors. You need to manually check if res.ok is truthy and throw the error manually.

@joulev fetch doesn’t throw for non-20x errors. You need to manually check if res.ok is truthy and throw the error manually.

astroOP

2024-04-27T09:32:44.180Z

can you tell how to do it?

also should i siwtch to axios in this case then?

@astro can you tell how to do it?

joulev

2024-04-27T09:34:08.492Z

const res = await fetch(…)
if (!res.ok) throw new Error(await res.json());

or instead of throw that error you can do anything you want

Answer

@astro also should i siwtch to axios in this case then?

joulev

2024-04-27T09:34:11.073Z

If you don’t want to manually handle !res.ok, use a light wrapper like https://github.com/sindresorhus/ky

@joulev If you don’t want to manually handle !res.ok, use a light wrapper like https://github.com/sindresorhus/ky

astroOP

2024-04-27T09:43:18.422Z

ok so here's what i did:

try {
  const res = await fetch("/api/issues", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });

  if (!res.ok) {
    console.log(res);
  }

  router.push("/issues");
} catch (error) {
  console.log(error);
}

and i get the foollowing res

i dont get zod's validation error back in the response from the api

@astro ok so here's what i did: tsx try { const res = await fetch("/api/issues", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); if (!res.ok) { console.log(res); } router.push("/issues"); } catch (error) { console.log(error); } and i get the foollowing res

joulev

2024-04-27T09:49:34.740Z

console.log(await res.json())

@joulev fetch doesn’t throw for non-20x errors. You need to manually check if res.ok is truthy and throw the error manually.

astroOP

2024-04-27T10:22:02.718Z

cool? give suggestions for this code(if any)

<form
  className="space-y-4"
  onSubmit={handleSubmit(async (data) => {
    const req = await fetch("/api/issues", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!req.ok) {
      const res = await req.json();
      
      toast({
        title: "Unable to create the issue",
        description: res.title
          ? res.title._errors[0]
          : res.description._errors[0],
      });
      
      return;
    }

    router.push("/issues");
  })}
>