You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
SwaggerUI has currently two mechanism of handling errors. One is Error boundary, which is utilized for every function component when used by getComponent and the other one is handling class components in this hacky prototype override. Main goal of this issue is unify how we approach error handling in component agnostic way using Error Boundaries. These Error Boundaries should be utilized in sensible granularity at strategic sections of SwaggerUI. This mechanism needs to be fully configurable, extensible and overridable.
!!Important change!!
Before this change every component requested from plugin system via getComponent was considered fail-safe and when rendering failed, hacky code used try/catch to catch the error and display the fallback component. Now when the error in non-safe component (not handled by safe render plugin) is thrown the closest error boundary will catch it and process it accordingly and display the fallback component. Granularity of error boundaries can be controlled via new Safe Render Plugin.
Additional things that will be addressed:
React developer tools display
Increased rendering speed
Documentation
React developer tools display (RDTD)
Our code contains a lot of anonymous class components. That's problematic in RDTD. We'll introduce proper conventions using HOC that are compatible with RDTD.
Before:
After:
Increased rendering speed
As error boundaries will be utilized only on strategic places, hundreds of try/catch imperative statements will be eliminated. As we know how try/catch slows the code execution quite a bit, by eliminating them we'll gain some rendering performance.
Refactored plugins
View plugin
This plugin is core of the entire SwaggerUI. Plugin internal has been completely rewritten using modern standards and practices which includes:
using conventional non-anonymous HOC names
not converting function components to class components
not using hacky prototype overrides to catch errors but standardized error boundaries instead
New plugins
Safe Render Plugin
This plugin comes list of react components that we (as maintainers of the SwaggerUI) think is appropriate as a default granularity application of error boundaries to SwaggerUI. This plugin should always be used as a last plugin, aflter all the components are already known to the system.
The plugin exposes two new functions, two components and overrides for applying error boundaries in strategies places in SwaggerUI (current list is visible in PR).
Functions
componentDidCatch
This function is called with first argument being the thrown error, when error boundary intercepts the error. Can be used by SwaggerUI integrator to integrate their error Monitoring & app stability management tool of choice - like Bugsnag.
withErrorBoundary
This function is HOC for ErrorBoundary component. Can be overriden by consuming party to control how components are wrapped by ErrorBoundary component.
Components
ErrorBoundary
ErrorBoundary react component implemented according to React authors recommendations using fn.componentDidCatch from this plugin when error is intercepted. Can be overriden by custom implementation via a plugin system.
Fallback
Component that is displayed when ErrorBoundary intercepts an error. Can be overriden via plugin system.
SwaggerUI has currently two mechanism of handling errors. One is
Error boundary
, which is utilized for every function component when used bygetComponent
and the other one is handling class components in this hacky prototype override. Main goal of this issue is unify how we approach error handling in component agnostic way usingError Boundaries
. These Error Boundaries should be utilized in sensible granularity at strategic sections of SwaggerUI. This mechanism needs to be fully configurable, extensible and overridable.!!Important change!!
Before this change every component requested from plugin system via
getComponent
was considered fail-safe and when rendering failed, hacky code usedtry/catch
to catch the error and display the fallback component. Now when the error in non-safe component (not handled by safe render plugin) is thrown the closest error boundary will catch it and process it accordingly and display the fallback component. Granularity of error boundaries can be controlled via newSafe Render Plugin
.Additional things that will be addressed:
React developer tools display (RDTD)
Our code contains a lot of anonymous class components. That's problematic in RDTD. We'll introduce proper conventions using HOC that are compatible with RDTD.
Before:
After:
Increased rendering speed
As error boundaries will be utilized only on strategic places, hundreds of
try/catch
imperative statements will be eliminated. As we know howtry/catch
slows the code execution quite a bit, by eliminating them we'll gain some rendering performance.Refactored plugins
View plugin
This plugin is core of the entire SwaggerUI. Plugin internal has been completely rewritten using modern standards and practices which includes:
New plugins
Safe Render Plugin
This plugin comes list of react components that we (as maintainers of the SwaggerUI) think is appropriate as a default granularity application of error boundaries to SwaggerUI. This plugin should always be used as a last plugin, aflter all the components are already known to the system.
The plugin exposes two new functions, two components and overrides for applying error boundaries in strategies places in SwaggerUI (current list is visible in PR).
Functions
componentDidCatch
This function is called with first argument being the thrown error, when error boundary intercepts the error. Can be used by SwaggerUI integrator to integrate their error Monitoring & app stability management tool of choice - like Bugsnag.
withErrorBoundary
This function is HOC for ErrorBoundary component. Can be overriden by consuming party to control how components are wrapped by ErrorBoundary component.
Components
ErrorBoundary
ErrorBoundary react component implemented according to React authors recommendations using
fn.componentDidCatch
from this plugin when error is intercepted. Can be overriden by custom implementation via a plugin system.Fallback
Component that is displayed when ErrorBoundary intercepts an error. Can be overriden via plugin system.
The text was updated successfully, but these errors were encountered: