Execute button is not working with 'malformed' JSON body

[orck-adrouin]

Q&A (please complete the following information)

• OS: Windows 2019
• Browser: Chrome
• Version: 84.0.4147.125
• Method of installation: dist assets
• Swagger-UI version: 3.31.1
• Swagger/OpenAPI version: 2.0

Content & configuration

I'll skip the content&configuration since the issue can be reproduced with the 'pet store' demo.

Describe the bug you're encountering

I encountered a strange situation with Swagger-UI where the Execute button stopped working without any apparent reason why (nothing in the console or network tab). After investigating I noticed that the issue was caused by a trailing comma in my JSON body.

To reproduce...

Steps to reproduce the behavior:

1. Go to https://petstore.swagger.io/#/pet/addPet
2. Open the 'Add a new pet to the store' (it should be opened by default using the link above)
3. Click the Try it out button to activate the UI
4. Replace the body with this JSON (notice the , in the tags section)

{
  "id": 0,
  "category": {
    "id": 0,
    "name": "string"
  },
  "name": "doggie",
  "photoUrls": [
    "string"
  ],
  "tags": [
    {
      "id": 0,
      "name": "string"

         ,

    }
  ],
  "status": "available"
}

5. Click the Execute button

Expected behavior

I'm expecting the request to be sent to the server or some kind of message telling me why the execute didn't work. It's a bit strange to click on the Execute button and having nothing happen.

[dnafication]

I tried it out, it looks like there are no network requests being made. Also, no errors on console. I guess the frontend is validating the payload and swallowing the error. Will investigate.

[dnafication]

This behaviour is only observed in application/json content-type. For parameter content type of application/xml, it sends the request successfully which is because the validation step passes. There is redux action VALIDATE_PARAMS = "spec_validate_param" which is triggered when execute button is pressed. The actual logic for the validation is in function validateParam (src/core/utils.js). The error is being captured properly however the component does not react to the error. Unlike input components like JsonSchema_string which turns red on validation errors, but still does not show why its red. It would be good to have some kind of help-block added to the components, so they can turn red on error and display a message about the error.

A quick fix may be to turn the textarea red on invalid JSON and may be console.log() the error but better solution is to incorporate capability to display error message into all input components.

[SVMBrown]

This issue also affects usage of Swagger UI for Clojure applications that use application/edn parameter content type.
The execute button will not function if valid EDN is passed. However, if I pass a valid JSON body with content type application/edn it successfully sends the request to the server and gets the expected "malformed application/edn request" back.

The ability to opt out of the validateParam redux action and allow the server to handle malformed requests would be much appreciated.

Thanks!

EDIT:
FYI I tested this with Swagger UI version 3.43.0 and the problem still persists.

[ikitommi]

Noticed also the application/edn bug. This is effecting most Clojure-based swagger-apps, where EDN (and Transit) protocols are used as the main protocol. instead of JSON.

[4irmann]

I also experience this error when removing an optional array from the example body (application/json content). But error occurs only for optional arrays with minItems: 1 schema definition. Without minItems it seems to work.

See also #7086

[ebottacin]

I'm using swagger-ui in my company project. After upgrading to 3.48.0 I've found this issue too,
So after investigating a bit, I've discovered that the hash of the component who saved the parameter to the store (parameter.jsx) is different from the one (param-body.jsx) who display the body (and the error)

I've tweaked the specSelectors in order to omit the parameter hash filter when called from param-body.jsx

export const parameterWithMetaByIdentityWithOptions = (state, pathMethod, param, options) => {
  const {findWithHash = true } = options
  const opParams = specJsonWithResolvedSubtrees(state).getIn(["paths", ...pathMethod, "parameters"], OrderedMap())
  const metaParams = state.getIn(["meta", "paths", ...pathMethod, "parameters"], OrderedMap())

  const mergedParams = opParams.map((currentParam) => {
  const inNameKeyedMeta = metaParams.get(`${param.get("in")}.${param.get("name")}`)    
  let hashKeyedMeta
  if (findWithHash) {
    hashKeyedMeta = metaParams.get(`${param.get("in")}.${param.get("name")}.hash-${param.hashCode()}`)
  } else {
    hashKeyedMeta = metaParams
      .filter( (v,k) => k.startsWith(`${param.get("in")}.${param.get("name")}`))
      .reduce ( (prev, val) => {
       for (let[k,v] of val) {
         prev = prev.set(k,v)
       }
       return prev
      }, new OrderedMap())
  }
  return OrderedMap().merge(
      currentParam,
      inNameKeyedMeta,
      hashKeyedMeta
    )
  })
  return mergedParams.find(curr => curr.get("in") === param.get("in") && curr.get("name") === param.get("name"), OrderedMap())
}

I've no time to investigate further so I've left unchanged the old selector and added a second one with a new parameter
with the new behaviour (used only in param-body.jsx)

To display errors List i'm using a quick hack: reuse HighLight component to display errors json box definition.

Registrazione.2.mp4

Any chance that the patch will be accepted ?

[cmouwer]

It would be much appreciated if this could be fixed. Too many people in my project have spent too much time figuring out a trailing comma was the problem...

[smellyfrogcom]

I have spent some time debugging this issue. The error is detected by the validation and added to the redux store for the parameter being validated. So this mechanism works perfectly fine.

The ParameterRow component is able to get the error but it is failing to pass it to the ParamBody component and the ParamBody component seems unable to get the error by itself.
The solution I put in place locally is to extract the error message in ParameterRow.setDefaultValue, set it into "this.errors" and then use that later on in the render method of ParameterRow passing the errors in the "param" prop for ParamBody.
I'm pretty sure this was not as the designers had intended it to work, but I couldn't figure out where the break was so circumvented it like that.

On a related note I feel that a shaky red input box is probably not enough of a notification especially when the error message is only begging to be displayed.
Again, I couldn't figure out where the error message display was handled so I added a new ErrorDisplay component to do just that.
I'm pretty sure I broke a few laws and rules around redux "dos and don'ts" but it got me out of troubles for now.

[matt-carr]

This is one of my biggest bugaboos with swagger-ui as well, would love to see an improvement in this regard