default error page

sites/shared/components/error/error-boundary.js

@@ -1,5 +1,22 @@
 import React from 'react';
 import ResetButtons from './reset-buttons'
+import {EventGroup} from 'shared/components/workbench/events'
+import DefaultErrorView from './view';
+
+const ErrorView = (props) => {
+  if (props.children) return props.children
+
+  const inspectChildrenProps = {
+    type: 'error',
+    events: [props.error],
+    units: props.gist?.units
+  }
+  const inspectChildren = (<EventGroup {...inspectChildrenProps}></EventGroup>)
+  return (props.children  || (<DefaultErrorView inspectChildren={inspectChildren}>
+        <h4>If you think your last action caused this error, you can: </h4>
+        <ResetButtons undoGist={props.undoGist} resetGist={props.resetGist} />
+      </DefaultErrorView>))
+}
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -26,17 +43,13 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
-      return (<div>
-        {this.props.errorView  || (<h1>Something went wrong.</h1>)}
-        <ResetButtons undoGist={this.props.undoGist} resetGist={this.props.resetGist} />
-      </div>)
-      return ;
+      return <ErrorView {...this.props} error={this.state.error}>{this.errorView}</ErrorView>
     }
 
     try {
       return this.props.children;
     } catch(e) {
-      return this.props.errorView  || (<h1>Something went wrong.</h1>);
+      return <ErrorView {...this.props} error={e}>{this.errorView}</ErrorView>;
     }
   }
 }