Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request sends Twice returns HTTP 500 Error #4826

Open
ApetweBc opened this issue Jun 30, 2022 · 2 comments
Open

Request sends Twice returns HTTP 500 Error #4826

ApetweBc opened this issue Jun 30, 2022 · 2 comments
Labels
state::triage Issue that is awaiting trial

Comments

@ApetweBc
Copy link

ApetweBc commented Jun 30, 2022

I send a POST request to a API server and the request sent 2 times. The initial request succeed because the records are inserted in the database then I get HTTP 500 response from the server. I have attached the error response and added the payload request. In the forms I have deleted the some of the inputs to make it readable here.

Debug Console
Preview Tab

resource: [{code: "23000",…}]
0: {code: "23000",…}
code: "23000"
message: "SQLSTATE[23000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Violation of PRIMARY KEY constraint 'PK_Customers'. Cannot insert duplicate key in object 'dbo.Customers'. The duplicate key value is (James-1520). (SQL: insert into [dbo].[Customers] ([CustomerID], [SalesPerson], [LabName], [CreatedBy], [Deleted]) values (James-1520, 0, 1, James, James, Dr, , Kwaku Clinic, 115 Ave, Toronto, AB, M5B 2P7, , Canada, 6833733, james@test.com, More, 1, Prospects Form, 0))"
trace: [,…]
message: "Batch Error: Not all requested records could be created."
status_code: 500

Server Logs
[2022-06-30T16:34:27.114490+00:00] local.INFO: [RESPONSE] {"Status Code":500,"Content-Type":null}
[2022-06-30T16:34:27.115436+00:00] local.INFO: [RESPONSE] {"Status Code":200,"Content-Type":null}

**Example code **
Base URL

import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://*****",
  headers: {
    "X-API-KEY":"8888********",
    // "X--Application-Name": "testd",
    // "Access-Control-Allow-Origin": "*",
    // "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
    // "Access-Control-Allow-Headers": "Content-Type, Authorization",
    // "Access-Control-Allow-Credentials": true,
    "Content-Type": "application/json",
    Accept: "application/json",
    "access-control-allow-credentials": true,
    "access-control-allow-methods": "*",
    "access-control-allow-origin": "*",
    "access-control-allow-headers": "*",
    "cache-control": "no-cache",
    "cors-enabled": false,
  },
  // params: {},
});

export default apiClient;
import apiClient from "./apiBaseUrl";
const addCustomers = "_table/Customers/";
const addProspects = (_prospect) => {
  const resource = JSON.stringify([
    {
      labID: _prospect.labID,
      LabName: _prospect.labName,
      // deleted the  following lines because they are not needed
      Deleted: _prospect.deleted,
    },
  ]);
  console.log(resource);
  apiClient.post(
    addCustomers,
    resource
  
  );
  return apiClient.post(addCustomers, resource);
};

export default addProspects;

Form

/ Validation schema for the form
const validateSchema = Yup.object().shape({
  firstName: Yup.string().required().label("First Name"),
});

// Customer Id and Padding for the it
const strl = 30;
const initialNumber = 10;
const randomNumber = Math.floor(Math.random() * 100);
const custID = initialNumber + randomNumber + strl.toString().padStart(2, 3);

const Prospects = () => {
  // Function to handle the submit of the form
  const handleSubmit = async (values) => {
    const result = await apiEndPoints({
      ...values,
    });

    if (result.status >= 400 && result.status < 500) {
      console.log("400 Errors " + result.originalError);

    } else if (result.status >= 500) {

      console.log(result.config);
    } else if (result.problem) {

      console.log(result.config);
    } else {
      console.log("200 Success " + result.status);
    }
  };

  // Initial values for the form
  const initialValues = {
    active: false,
    prospect: true,
    customerID: custID,
    firstName: "",
 
  };

  return (
    <>

      <Layout>
        <div>
          <Formik
            initialValues={{
              ...initialValues,
            }}
            onSubmit={handleSubmit}
            validationSchema={validateSchema}
            enableReinitialize={true}
          >
            {({
              values,
              handleChange,
              handleBlur,
              handleSubmit,
            }) => (
              <form onSubmit={handleSubmit}>
                <Toast />
             
                  <div>
                    <label htmlFor="" className="relative block">
                      <span className="my-3"> Dr FirstName </span>
                      <input
                        type="text"
                        name="firstName"
                        id=""
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.firstName}
                      />
                    </label>
                  </div>
         
                <button
                  type="submit"
                  onClick={handleSubmit}
                >
                  Submit
                </button>
              </form>
            )}
          </Formik>
        </div>
      </Layout>
    </>
  );
};

export default Prospects;

Expected behavior

Expect only 1 request to be sent
Response of 200

Environment

  • Axios Version [0.27.2]
  • Adapter [XHR/HTTP]
  • Browser [Chrome, Edge]
  • Browser Version [ Edge 103.0.1264.37 (Official build) (64-bit), Chrome 03.0.5060.66 (Official Build) (64-bit)]
  • Node.js Version
  • OS: [Windows 10]
  • React 18.0.1

Screenshots
image

image

image

@ghost
Copy link

ghost commented Jul 11, 2022

I am also getting an issue similar to this. Using the most recent version of axios in Node.js (0.27.2), rarely when querying an API it will send 2 requests and cause a race condition on the API's server which ends up resulting in axios receiving the response as a 401 error as, of the two requests that were sent, the 401 returned before the 201.
This is very annoying issue and over the past week of testing, I have observed this twice in about ~80 cases for this single API which is not quite good enough for a production environment (see attached screenshot of result showing up on the API server logs)

axiosBug

@geroale
Copy link

geroale commented Aug 30, 2022

Same issue here

@jasonsaayman jasonsaayman added the state::triage Issue that is awaiting trial label Sep 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
state::triage Issue that is awaiting trial
Projects
None yet
Development

No branches or pull requests

3 participants