Swagger-editor: Swagger UI hangs

[petriashev]

| Q | A
| ----------------------------------- | -------
| Bug or feature request? | bug
| Which Swagger/OpenAPI version? | 2.0
| Which Swagger-Editor version? | online
| How did you install Swagger-Editor? | no
| Which browser & version? | firefox 59
| Which operating system? | windows 10 x64

Demonstration API definition

https://github.com/micro-elements/MicroElements.Swashbuckle.FluentValidation/files/1876937/swagger.txt

Configuration (browser query string, constructor, config.yaml)

https://editor.swagger.io/

Expected Behavior

Expected: Rest api definition

Current Behavior

Browser hangs.

Possible Solution

Looks like js loops infinite cicle

Context

https://github.com/micro-elements/MicroElements.Swashbuckle.FluentValidation/issues/5

[webron]

Doesn't hang for me...

[petriashev]

It hangs if load file from menu. If I copy paste text in left pane of swagger editor it works

[shockey]

Confirmed

[shockey]

I haven't found a fix for this, but I have some observations:

1. This is not browser specific.
2. ~This is specific to the JSON representation of this definition.~ I wasn't reproducing this with the YAML that was generated from the JSON with json2yaml, but upon further investigation, the YAML that Swagger-Editor is generating does cause the issue
3. Swagger-UI does not have the same issue.
4. Firefox shares an error when the thread is killed. The message implies that the problem is within Ace, not Swagger-Editor:

Error: Script terminated by timeout at:
this.getLineTokens@http://editor.swagger.io/dist/swagger-editor-bundle.js:173:875
this.$tokenizeRow@http://editor.swagger.io/dist/swagger-editor-bundle.js:174:23137
o/this.$worker@http://editor.swagger.io/dist/swagger-editor-bundle.js:174:21623

Ace's getLineTokens function does have a for loop nested within a while loop, _and_ drives its while loop condition with a regex, so I'm not absolutely shocked to find out that it's getting stuck on a line with a regex string in it.

Digging further into this, I logged each input to getLineTokens, and found that it was choking on #/definitions/UserViewModel/properties/email/pattern, which in your definition is a hefty regex string. The startState value was qqstring when loading the JSON representation of the definition, which was odd because startState was set to start for the same line when in YAML.

---

All that said - I'm kicking this to next week's milestone, since this is (a) not an issue in our code and (b) relates to editing JSON, which we don't support, though I realize the Import URL feature is causing this by dumping raw JSON into the Editor.

@webron, I'll sync with you on this on Monday to determine the best path forward here :smile:

[shockey]

Workaround: import YAML instead of JSON :smile:

[webron]

@shockey you lied :wink:

[shockey]

@webron, indeed... but I have something for you better than a conversation - a fix!

This is happening because (a) Ace blows up on folded YAML block scalars that have unquoted regex values and (b) we're telling js-yaml to fold any lines longer than 80 characters (which is the library's default) when converting JSON received from using Import URL. Notably, it does not have to do with the JSON that was downloaded into the Editor.

Here's a minimal test case that sets Ace alight:

definitions:
  largeRegex:
    type: object
    properties:
      name:
        pattern: >
          ^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-||_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+([a-z]+|\d|-|\.{0,1}|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])?([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$

For our purposes, we can disable folding on import to sidestep this issue, which I've just done in #1750.

I'll follow up with an Ace issue so this gets properly fixed upstream. (Edit: eventually. It wasn't straightforward to reproduce this in vanilla Ace, so I'll have to come back to this another time to build up a reproducible test case.)

[JJonesAtAvaya]

Happens for me with Kubernetes API swagger file
https://raw.githubusercontent.com/kubernetes/kubernetes/master/api/openapi-spec/swagger.json

[samiriff]

Happens for me with Google Compute API swagger file https://api.apis.guru/v2/specs/googleapis.com/compute/v1/swagger.yaml

[sampalmerbb]

I just ran into a similar issue and solved it by clearing all site data for swagger.io in Chrome's settings.