diff --git a/src/components/hooks/useApi.ts b/src/components/hooks/useApi.ts
index 2e3aee8f..7684f4e4 100644
--- a/src/components/hooks/useApi.ts
+++ b/src/components/hooks/useApi.ts
@@ -7,6 +7,17 @@ import useStore from '@/store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
+async function handleResponse(data: any): Promise<any> {
+  if (data.error) {
+    return Promise.reject(new Error(data.error));
+  }
+  return Promise.resolve(data);
+}
+
+function handleError(err: Error | string) {
+  return Promise.reject((err as Error)?.message || err || null);
+}
+
 export function useApi() {
   const shareToken = useStore(selector);
 
@@ -16,9 +27,9 @@ export function useApi() {
   };
   const basePath = process.env.basePath;
 
-  function getUrl(url: string, basePath = ''): string {
+  const getUrl = (url: string, basePath = '') => {
     return url.startsWith('http') ? url : `${basePath}/api${url}`;
-  }
+  };
 
   const getHeaders = (headers: any = {}) => {
     return { ...defaultHeaders, ...headers };
@@ -27,28 +38,36 @@ export function useApi() {
   return {
     get: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpGet(getUrl(url, basePath), params, getHeaders(headers));
+        return httpGet(getUrl(url, basePath), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
       },
       [httpGet],
     ),
 
     post: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpPost(getUrl(url, basePath), params, getHeaders(headers));
+        return httpPost(getUrl(url, basePath), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
       },
       [httpPost],
     ),
 
     put: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpPut(getUrl(url, basePath), params, getHeaders(headers));
+        return httpPut(getUrl(url, basePath), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
       },
       [httpPut],
     ),
 
     del: useCallback(
       async (url: string, params: object = {}, headers: object = {}) => {
-        return httpDelete(getUrl(url, basePath), params, getHeaders(headers));
+        return httpDelete(getUrl(url, basePath), params, getHeaders(headers))
+          .then(handleResponse)
+          .catch(handleError);
       },
       [httpDelete],
     ),
diff --git a/src/components/hooks/useCountryNames.ts b/src/components/hooks/useCountryNames.ts
index 12f2f0dd..691167e1 100644
--- a/src/components/hooks/useCountryNames.ts
+++ b/src/components/hooks/useCountryNames.ts
@@ -10,7 +10,7 @@ export function useCountryNames(locale: string) {
   const [list, setList] = useState(countryNames[locale] || enUS);
 
   async function loadData(locale: string) {
-    const { data } = await httpGet(`${process.env.basePath || ''}/intl/country/${locale}.json`);
+    const data = await httpGet(`${process.env.basePath || ''}/intl/country/${locale}.json`);
 
     if (data) {
       countryNames[locale] = data;
diff --git a/src/components/hooks/useLanguageNames.ts b/src/components/hooks/useLanguageNames.ts
index 8c28d560..d00b0968 100644
--- a/src/components/hooks/useLanguageNames.ts
+++ b/src/components/hooks/useLanguageNames.ts
@@ -10,7 +10,7 @@ export function useLanguageNames(locale) {
   const [list, setList] = useState(languageNames[locale] || enUS);
 
   async function loadData(locale) {
-    const { data } = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
+    const data = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
 
     if (data) {
       languageNames[locale] = data;
diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts
index f128e99a..30f78037 100644
--- a/src/components/hooks/useLocale.ts
+++ b/src/components/hooks/useLocale.ts
@@ -20,13 +20,7 @@ export function useLocale() {
   const dateLocale = getDateLocale(locale);
 
   async function loadMessages(locale: string) {
-    const { ok, data } = await httpGet(
-      `${process.env.basePath || ''}/intl/messages/${locale}.json`,
-    );
-
-    if (ok) {
-      messages[locale] = data;
-    }
+    messages[locale] = await httpGet(`${process.env.basePath || ''}/intl/messages/${locale}.json`);
   }
 
   async function saveLocale(value: string) {
diff --git a/src/lib/response.ts b/src/lib/response.ts
index 7c99690f..d50b453c 100644
--- a/src/lib/response.ts
+++ b/src/lib/response.ts
@@ -8,22 +8,22 @@ export function json(data: any) {
   return Response.json(data);
 }
 
-export function badRequest(message?: any) {
-  return Response.json({ error: 'Bad request', message }, { status: 400 });
+export function badRequest(error: any = 'Bad request') {
+  return Response.json({ error: serializeError(error) }, { status: 400 });
 }
 
-export function unauthorized(message?: any) {
-  return Response.json({ error: 'Unauthorized', message }, { status: 401 });
+export function unauthorized(error: any = 'Unauthorized') {
+  return Response.json({ error: serializeError(error) }, { status: 401 });
 }
 
-export function forbidden(message?: any) {
-  return Response.json({ error: 'Forbidden', message }, { status: 403 });
+export function forbidden(error: any = 'Forbidden') {
+  return Response.json({ error: serializeError(error) }, { status: 403 });
 }
 
-export function notFound(message?: any) {
-  return Response.json({ error: 'Not found', message }, { status: 404 });
+export function notFound(error: any = 'Not found') {
+  return Response.json({ error: serializeError(error) }, { status: 404 });
 }
 
-export function serverError(error?: any) {
-  return Response.json({ error: 'Server error', message: serializeError(error) }, { status: 500 });
+export function serverError(error: any = 'Server error') {
+  return Response.json({ error: serializeError(error) }, { status: 500 });
 }