// This is the default, render wrapper. If you're looking to provide your
// own, it might look something like this:
// ```
// /* In React */
// export default (component) => <Wrapper>{component}</Wrapper>
// ```
// ```
// /* In a plain-js project */
// export default (html) => '<div>' + html + '</div>';
//
import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error) {
    const { component, variant } = this.props;
    console.error(
      `Caught error while rendering component "${component}", variant "${variant}"`,
    );
    console.error(error);
  }

  render() {
    const { error } = this.state;
    const { component, variant, children } = this.props;
    if (error) {
      return React.createElement(
        'pre',
        {
          style: {
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-all',
            fontSize: 'small',
          },
        },
        `Error when rendering component=${component}, variant${variant}\n\n${error.stack}`,
      );
    }

    return children;
  }
}
export default (result, { component, variant }) =>
  React.createElement(ErrorBoundary, { component, variant }, result);

@@ -1153,17 +1153,18 @@
 omponent
-=
+ %22
 $%7Bcompon
@@ -1167,16 +1167,17 @@
 mponent%7D
+%22
 , varian
@@ -1177,16 +1177,18 @@
  variant
+ %22
 $%7Bvarian
@@ -1189,16 +1189,17 @@
 variant%7D
+%22
 %5Cn%5Cn$%7Ber

Improve error boundary output