Referencing message inside a message catastrophically breaks the website

[Ksisa]

I was playing around with message extensions (on hosted website https://studio.asyncapi.com/), thinking I could reference the response message inside the message like so

components:
  messages:
    TradeMessageServer:
      name: Trade Message (server)
      title: Trade Message (server)
      description: A message containing trade data
      payload:
        title: TradePayloadServer
        type: object
        properties:
          operation:
            type: string
            const: Trade
          data:
            $ref: "#/components/schemas/TradeServer"
        additionalProperties: false
        required:
          - operation
          - data
      x-response: 
        $ref: "#/components/messages/TradeMessageClient" #this breaks it

If you enter a valid message into the x-response tag, it completely breaks the website, so much that even ctrl+f5 doesn't work. You need to go into the dev tools and clear the local storage to get it to work again.

I understand this is likely to be invalid, but I also doubt the website should break in such a catastrophic way.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[KhudaDad414]

@Ksisa I have tried to reproduce the error with this file:

asyncapi: '2.6.0'
info:
  title: Account Service
  version: 1.0.0
  description: This service is in charge of processing user signups
channels:
  user/signedup:
    subscribe:
      message:
        $ref: '#/components/messages/TradeMessageServer'
components:
  messages:
    TradeMessageServer:
      name: Trade Message (server)
      title: Trade Message (server)
      description: A message containing trade data
      payload:
        title: TradePayloadServer
        type: object
        properties:
          operation:
            type: string
            const: Trade
        additionalProperties: false
        required:
          - operation
          - data
      x-response: 
        $ref: "#/components/messages/TradeMessageClient" #this breaks it
    TradeMessageClient:
      name: Trade Message (server)
      title: Trade Message (server)
      description: A message containing trade data
      payload:
        title: TradePayloadServer
        type: object
        properties:
          operation:
            type: string
            const: Trade
        additionalProperties: false
        required:
          - operation
          - data

but it seems to be working fine. can you provide a full example of an AsyncAPI file that causes it to fail?

[KhudaDad414]

@Ksisa is the issue resolved?

[Afler]

same here, lost all data

[Ksisa]

@Ksisa is the issue resolved?

Sorry, I'm holiday, I'll send the erroring spec when I'm back

[Ksisa]

@KhudaDad414 turns out I made a mistake, it happens when you reference the same message within the message:

asyncapi: '2.6.0'
info:
  title: Account Service
  version: 1.0.0
  description: This service is in charge of processing user signups
channels:
  user/signedup:
    subscribe:
      message:
        $ref: '#/components/messages/TradeMessageServer'
components:
  messages:
    TradeMessageServer:
      name: Trade Message (server)
      title: Trade Message (server)
      description: A message containing trade data
      payload:
        title: TradePayloadServer
        type: object
        properties:
          operation:
            type: string
            const: Trade
        additionalProperties: false
        required:
          - operation
          - data
      x-response: 
        $ref: "#/components/messages/TradeMessageServer" #this breaks it

[ashmit-coder]

Hey @KhudaDad414 @Ksisa as far as I looked into the issue this looks to be a AsyncAPI-react library issue. It seems that the infinite recursive call to message ref is leading to a Stack overflow. If it seems legit I can report it upstream.

[KhudaDad414]

@ashmit-coder As far as the studio is concerned, it shouldn't break. maybe show some kind of an error when things like this happen. maybe from parser or asyncapi-react. 🤔

[ashmit-coder]

@ashmit-coder As far as the studio is concerned, it shouldn't break. maybe show some kind of an error when things like this happen. maybe from parser or asyncapi-react. 🤔

Yeah but I ran the code on https://asyncapi.github.io/asyncapi-react/

As well and that resulted in it breaking as well. So 🤔

[catosaurusrex2003]

The issue mentioned here has been fixed in this PR and is available in @asyncapi/react-component@2.5.0.

I noticed that the Studio is currently using @asyncapi/react-component@^1.2.2. Is there a specific reason for not upgrading to the latest version?"