Try-catch is not working for 400 errors in JS

try catch javascript
javascript try catch not working
javascript throw error
javascript error handling best practices
javascript catch specific error
try/catch javascript best practices
try catch finally javascript
catch error java

This is getting on my nerves, I've been checking the code for a few hours and can't spot the problem. in the below code, I'm using an invalid object in the body in order to get 400 error (Bad Request) and therefore catch it in the catch block:

  <button onClick={() => {
    try {
      axiosInstance.post('/cart', { field: "invalid field" });
    } catch (err) {
      console.log("here!!!"); 
      console.error(err);
    }
  }}
  />

I can see the request fail in network tab, in console I can see:

POST http://api.[REDACTED]/api/cart 400 (Bad Request)
index.js:1375 Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

Axios http requests are async, you need to use Promises or async/await. Try this and you will see the error response:

<button onClick={async () => {
    try {
      const response = await axiosInstance.post('/cart', { field: "invalid field" });
    } catch (err) {
      console.log("here!!!"); 
      console.error(err);
      console.error(err.response);
    }
  }}
  />

Error handling, "try..catch", If there were no errors, then catch(err) is ignored: the execution reaches the end of try and For try..catch to work, the code must be runnable. Did you ever take the time to read the source code of, say, jQuery? Hardly any try-catch in there except for exactly those scenario's mentioned in the accepted answer: to feature-detect and use native/host objects that throw errors. To call code that does not use try-catch much (like jQuery) 'unprofessional' seems silly.

Https requests are asynchronous, you need to make the handler async and await the result of the call.

  <button
    onClick={async () => {
      try {
        return await axiosInstance.post('/cart', { field: "invalid field" });;
      } catch (err) {
        console.log(err);
      }
    }}
  >
    async press me
  </button>

The following sandbox shows each side-by-side.

Don't throw error / catch on 400-level responses � Issue #41 � axios , Instead, limit the error/catch to 500-level errors. GitHub is home to over 50 million developers working together to host and Same thing for me, 400 (BAD REQUEST) error resolves in then , not in catch . /lib/adapters/xhr.js#L58 so you end up having to go digging through an untyped object to try to� @freefaller A lot has changed, quoted from w3fools W3Schools still has issues but they have at least worked on the primary concern developers had.For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience.

If this error response don't show "here!!" In console, certainly the error is caused before this code section, probably in axios declaration or axios request form.

Try configure axios options inside a json object like:

axios({ method: "post", url: "..."

Processing errors with Fetch API � GitHub, I'm trying to make a unified error handling solution in my app and came to a similar conclusion. I haven't tested it yet but here's I am really not a JS guy, but the following should work: Api will return 400 in case of invalid data sent in request. Catch request errors with Axios. GitHub Gist: instantly share code, notes, and snippets.

Handling Errors in JavaScript: The Definitive Guide, If we would not wrap the console.log(b) in a try … catch block, the script Asynchronity, one topic you always have to consider when working with JavaScript. throw new CustomError('MY_CODE', 400, 'Error description'). The try/catch/finally statement handles some or all of the errors that may occur in a block of code, while still running code. Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things. The try statement allows you to define a block of code to be tested for errors while it is being executed.

axios catch 400 error Code Example, Get code examples like "axios catch 400 error" instantly right from your google search javascript by Energetic Eland on May 30 2020 Donate. 0 axios try block not working in react � how t get response object from catch error javascript using� It’s important to ensure that Express catches all errors that occur while running route handlers and middleware. Errors that occur in synchronous code inside route handlers and middleware require no extra work. If synchronous code throws an error, then Express will catch and process it. For example:

Errors, Any use of the JavaScript throw mechanism will raise an exception that must be This will not work because the callback function passed to fs. <anonymous> (/home/gbusey/actors.js:400:8) at increaseSynergy (/home/gbusey/actors.js:701: 6). The Throw Statement. The throw statement is used to generate user-defined exceptions. During runtime, when a throw statement is encountered, execution of the current function will stop and control will be passed to the first catch clause in the call stack.

Comments
  • can you post your axiosInstance, i feel some issue in the headers, and what all headers does the back end requires, did you tried posting using postman is it working in it
  • As Travis mentioned since doesn't have the issue with headers kindly check the answer posted by Travis and let us know
  • But before going to this, the request is bad which means something wrong in the headers !! Correct me if i am wrong @Travis
  • @DILEEPTHOMAS You are wrong. It doesn't have anything to do with headers
  • No problem, headers can be an issue but it would be a separate issue
  • But i thought since the status code is because of 400 it can be issue by us which means who sends it so it can be headers issue, cool great info :)