Support for passing API error

[nhnkl159]

Hey! :D

I tried using the module and i noticed that when im returning an error code to the api for example 422 when a validator on the server fails,the error stack is not accessable and i cant show the error to the user.

For example:
{"url":"/api/__api_party/api","statusCode":500,"statusMessage":"Failed to fetch from API endpoint \"api\"","message":"Failed to fetch from API endpoint \"api\"","stack":"<pre><span class=\"stack internal\">at createError (/F:/nuxt3-starter/node_modules/nitropack/node_modules/h3/dist/index.mjs:48:15)</span>\n<span class=\"stack\">at /F:/nuxt3-starter/.nuxt/dev/index.mjs:517:11</span>\n<span class=\"stack internal\">at processTicksAndRejections (node:internal/process/task_queues:96:5)</span>\n<span class=\"stack internal\">at async Object.handler (/F:/nuxt3-starter/node_modules/nitropack/node_modules/h3/dist/index.mjs:681:19)</span>\n<span class=\"stack internal\">at async Server.toNodeHandle (/F:/nuxt3-starter/node_modules/nitropack/node_modules/h3/dist/index.mjs:745:7)</span></pre>","data":"422 Unprocessable Content (http://127.0.0.1:8000/api/auth/login)"}

i cant access the validator error, also i put the $api request in a try catch, meaning it would failed and i cant access data.

anyway you would suggest to fix the problem? :)

[johannschopplich]

Hi there!

I believe the response by your API is already present in the data key. Your response object says 422 Unprocessable Content (http://127.0.0.1:8000/api/auth/login). That should be your API, right?
Have you followed the FAQ instructions on How Can I Inspect the Error Thrown by My API?

[nhnkl159]

Hey hey :)

yes I did look into it, but I was looking for support errors, like the example I gave when 1 input fails in the validator the api returns 422 and error json which contains for example:

• Username input is required
• Username is 6 characters minimum
  Or whatever, was jus to looking for a way to access the errors json that was returned cause currently it seems like I can’t :/

[johannschopplich]

What's the interface of your API's response? How is the data you expect encoded?

Could you provide a minimal reproducible example, if that's possible?

[nhnkl159]

def!

This is a validation error from laravel:
{ "message": "Username is required", "errors": { "username": [ "Username is required" ] } }

[janvennemann]

@johannschopplich I ran into this issue today as well. IMHO always returning a 500 error is making things unnecessarily complicated when dealing with API responses where the error code and response data has special meaning, e.g. for the above mentioned validation errors, or even a simple 404.

For example, i have a request on my page's script setup which fetches initial data. If my API returns a 404, i want to also render a 404 in the UI. Using basic useFetch i can simply do this:

const { data, error } = useFetch("https://jsonplaceholder.typicode.com/404");
// error is of type `Ref<FetchError<any> | null>`
if (error.value) {
  throw createError(error.value)
}

With nuxt-api-party i have to extract the actual error code from the data property. In addition the error can be true so i have to double check that as well?

const { data, error } = useJsonPlaceholderData("404");
// error is of type `Ref<true | FetchError<any> | null>`
const theError = error.value;
if (theError !== true && theError) {
  const originalStatusCode = parseInt(theError.data.data.slice(0, 3));
  throw createError({ statusCode: originalStatusCode });
}

Any chance we can change this, or have it opt-in to not mask the original error?

[johannschopplich]

Agreed. For a wholesome proxy experience, errors should bubble up the event chain to the initial fetch event. I will implement this feature.

[johannschopplich]

Thank you both for point out the issue at hand! I've just released a new version with a core change.

nuxt-api-party 0.7.0+ will forward error responses – including statusCode, statusMessage as well as the API response body as data – to the client if your API fails to deliver.

Example usage with useJsonPlaceholderData()

const { data, error } = await useJsonPlaceholderData('not-found')
watchEffect(() => {
  console.error('statusCode:', error.value.statusCode)
  console.error('statusMessage:', error.value.statusMessage)
  console.error('data:', error.value.data)
})

Example usage with $jsonPlaceholder()

function onSubmit() {
  try {
    const response = await $jsonPlaceholder('not-found', {
      method: 'POST',
      body: form.value
    })
  }
  catch (e) {
    console.error('statusCode:', e.statusCode)
    console.error('statusMessage:', e.statusMessage)
    console.error('data:', e.data)
  }
}

Please try the new version. Feedback much appreciated.