Hono•6mo ago

All GET/POST api calls returns Internal server error 500

I'm using Hono for my app https://platform.procureezy.com/workflows but it keeps returning this error for all my API calls : GET https://platform.procureezy.com/api/workflows 500 (Internal Server Error)
[[...route]]

app.onError((err, c) => {
  if (err instanceof HTTPException) {
    return err.getResponse();
  }
  return new Response("Internal Server Error", { status: 500 });
});

app.onError((err, c) => {
  if (err instanceof HTTPException) {
    return err.getResponse();
  }
  return new Response("Internal Server Error", { status: 500 });
});

workflow.ts

message.txt

7 Replies

Aditya Mathur•6mo ago

Which runtime are you using? Can you share the console logs for the error?

MarvinKROP•6mo ago

I’m using Vercel

Nico•6mo ago

You can return the error as JSON, it will give you a better message. Just do return c.json(err) in your onError

MarvinKROP•6mo ago

when I don't use HTTPException in my routes but directly return c.json({ error: "Unauthorized" }, 401); I get this type issue in my RQ hook: type ResponseType = { error: string; } | { data: { name: string; id: number; description: string | null; createdAt: string | null; updatedAt: string; companyId: string | null; }; } RQ Hook:

import { InferRequestType, InferResponseType } from "hono";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

import { client } from "@/lib/hono";

type ResponseType = InferResponseType<typeof client.api.workflows.$post>;
type RequestType = InferRequestType<typeof client.api.workflows.$post>["json"];

export const useCreateWorkflow = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation<ResponseType, Error, RequestType>({
    mutationFn: async (json) => {
      const response = await client.api.workflows.$post({ json });
      return await response.json();
    },
    onSuccess: () => {
      toast.success("Workflow created successfully");
      queryClient.invalidateQueries({ queryKey: ["workflows"] }); // refetch all workflows everytime we create a new workflow
    },
    onError: (error) => {
      toast.error("Failed to create workflow");
    },
  });

  return mutation;
};

import { InferRequestType, InferResponseType } from "hono";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

import { client } from "@/lib/hono";

type ResponseType = InferResponseType<typeof client.api.workflows.$post>;
type RequestType = InferRequestType<typeof client.api.workflows.$post>["json"];

export const useCreateWorkflow = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation<ResponseType, Error, RequestType>({
    mutationFn: async (json) => {
      const response = await client.api.workflows.$post({ json });
      return await response.json();
    },
    onSuccess: () => {
      toast.success("Workflow created successfully");
      queryClient.invalidateQueries({ queryKey: ["workflows"] }); // refetch all workflows everytime we create a new workflow
    },
    onError: (error) => {
      toast.error("Failed to create workflow");
    },
  });

  return mutation;
};

I have the same issue with RPC + React Query like in https://discord.com/channels/1011308539819597844/1232536228226797589 so we can only use HTTPException for React Query onError to detect the error right?

Joaquim Ley•6mo ago

Hey give a look at this video, it seems like you could extract the same way of thinking/implementing: - https://youtu.be/jXyTIQOfTTk?si=qENuET34TNutMB-R&t=3171

Sam Meech-Ward

YouTube

The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tai...

This is a modern full-stack tutorial for anyone that wants to learn how to make a modern react SPA that works seamlessly with a bun & hono server. It's using all my favorite libraries and frameworks this setup will only get better as more upgrades come in the future. Features: ✅ Complete expense tracker app built from scratch using react 18/19...

Joaquim Ley•6mo ago

Btw that share is timestamped to the part you should be interested in, he first introduces the hono RPC package followed by react query (and their integration)

MarvinKROP•6mo ago

Thanks! Will check it out

Gaming

Programming

All GET/POST api calls returns Internal server error 500