search

asyncapi / asyncapi-react

React component for rendering documentation from your specification in real-time in the browser. It also provides a WebComponent and bundle for Angular and Vue
https://asyncapi.github.io/asyncapi-react/
Apache License 2.0
188 stars 126 forks source link

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

Open catosaurusrex2003 opened 2 weeks ago

catosaurusrex2003 commented 2 weeks ago

Description As proposed and discussed here https://github.com/asyncapi/asyncapi-react/pull/1101#issuecomment-2462910610.

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) https://github.com/asyncapi/asyncapi-react/issues/1100

catosaurusrex2003 commented 2 weeks ago

In Firefox:

image image image

In Chrome:

image

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 commented 2 weeks ago

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

catosaurusrex2003 commented 1 week ago

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.

sonarcloud[bot] commented 2 days ago

Quality Gate Passed 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