Consolidate how SwaggerUI handles errors

[char0n]

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.

    fn: {
      componentDidCatch,
      withErrorBoundary: withErrorBoundary(getSystem),
    },
    components: {
      ErrorBoundary,
      Fallback,
    },
    wrapComponents,

Note: ideas verified with PO