feat: error boundary in layout to handle application errors / crashes

[catosaurusrex2003]

Description
As proposed and discussed here #1101 (comment).

Changes proposed in this pull request:

1. Added an error boundary in layout to handle errors generated by infinite recursion and such so that the application doesnt crash into an irrecoverable state.

2. Reused the already existing Error component to render error,

Related issue(s)
#1100

[catosaurusrex2003]

In Firefox:

In Chrome:

The Error Boundary is detecting the error being generated by the browser on too much recursion and rendering the Error component.

Used this asyncapi document for testing

asyncapi: 3.0.0
info:
  title: Account Service
  version: 1.0.0
  description: This service is in charge of processing user signups
channels:
  userSignedup:
    address: user/signedup
    messages:
      UserSignedUp:
        $ref: '#/components/messages/UserSignedUp'
    x-recursion:  #RECURSION here
      $ref: '#'
operations:
  sendUserSignedup:
    action: send
    channel:
      $ref: '#/channels/userSignedup'
    messages:
      - $ref: '#/channels/userSignedup/messages/UserSignedUp'
    x-recursion: #RECURSION here
      $ref: '#'
components:
  messages:
    UserSignedUp:
      x-recursion: #RECURSION here
        $ref: '#'
      payload:
        type: object
        properties:
          x-recursion: #RECURSION here
            $ref: '#'
          displayName:
            type: string
            description: Name of the user
          email:
            type: string

[catosaurusrex2003]

@reachaadrika could you please review this pull request too when you get a chance? 😄 Thanks in advance!

[AceTheCreator]

awesome improvement, but i noticed when i fix the recursive properties in the schema, the error still persists in the UI until i either refresh or re-paste a valid schema 🤔

[catosaurusrex2003]

but i noticed when i fix the recursive properties in the schema, the error still persists in the UI until i either refresh or re-paste a valid schema 🤔

Thanks for highlighting that. Have put some logic to rerender the component fresh.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[AceTheCreator]

LGTM!

[AceTheCreator]

/rtm

[asyncapi-bot]

🎉 This PR is included in version 2.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀