Netlify function not returning correct error to FE

Problem

I can see the error messages for my serverless functions in the network dev tools. But the actual response isn’t making its way back to my FE code.

Instead, I’m getting back a generic Request failed with status code 400 message.

{ "message": "Request failed with status code 400", "name": "Error", "stack": "Error: Request failed with status code 400\n    at createError (http://localhost:8888/commons.js:11731:15)\n    at settle (http://localhost:8888/commons.js:11992:12)\n    at XMLHttpRequest.handleLoad (http://localhost:8888/commons.js:11200:7)", "config": {  "url": "/api/confirm-scheduled-transaction",  "method": "post",  "data": "{\"customerId\":\"cus_Hq7LR7UmYVKyx9\",\"paymentMethodId\":\"pm_1HGR7GBOZ3M7Ccuh0PnTOkPA\"}",  "headers": {   "Accept": "application/json, text/plain, */*",   "Content-Type": "application/json;charset=utf-8"  },  "transformRequest": [   null  ],  "transformResponse": [   null  ],  "timeout": 0,  "xsrfCookieName": "XSRF-TOKEN",  "xsrfHeaderName": "X-XSRF-TOKEN",  "maxContentLength": -1 }}

Expectation

The error message I see in the network tab should be piped through to the front end for my app to consume

solved

So my issue was that I was stringifying the error object from axios too soon. I wasn’t accessing error.response.data when logging. I was just logging the error :face_palm:

you would think that would have showed up anyway within the log but some how it was getting truncated but anyhow

export const safePost = <A>({ url, data }: { url: string; data: A }) =>
  TE.tryCatch(
    () => axios.post(url, data, axiosConfig).then(res => res.data),
    err => err
  )

the fix was this

export const safePost = <A>({ url, data }: { url: string; data: A }) =>
  TE.tryCatch(
    () => axios.post(url, data, axiosConfig).then(res => res.data),
    err => err.response.data // <- this line
  )

Thanks for coming back and sharing the fix!

1 Like