feat: error boundary in layout to handle application errors / crashes #1108
Conversation
…i-react into ErrorBoundary-in-layout
catosaurusrex2003
requested review from
magicmatatjahu,
fmvilas,
asyncapi-bot-eve and
AceTheCreator
as code owners
|
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 |
|
@reachaadrika could you please review this pull request too when you get a chance? 😄 Thanks in advance! |
| {configShow.sidebar && <Sidebar />} | ||
| <div className="panel--center relative py-8 flex-1"> | ||
| <div className="relative z-10"> | ||
| {configShow.errors && error && <Error error={error} />} |
There was a problem hiding this comment.
Is this line still relevant? i mean since you've imported the error boundary in the layout container and it already includes the error component.
There was a problem hiding this comment.
Yes it is important.
This line handles the errors in our document when parsing it. The errors are in turn diagnostics with severity 0. Introduced in this PR: https://github.com/asyncapi/asyncapi-react/pull/1082/files
The error boundary, on the other hand, is used to catch unexpected application errors, such as a recursion error, and is a separate concern.
There was a problem hiding this comment.
This line handles the errors in our document when parsing it. The errors are in turn diagnostics with severity 0.
Aren't we already handling these errors here
?There was a problem hiding this comment.
The error boundary, on the other hand, is used to catch unexpected application errors, such as a recursion error, and is a separate concern.
I agree with you 👍🏾
my question now is if {configShow.errors && error && <Error error={error} />} is relevant if we are already handling it in the standalone code, don't you think?
Description
As proposed and discussed here #1101 (comment).
Changes proposed in this pull request:
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.
Reused the already existing Error component to render error,
Related issue(s)
#1100