fix: LeftNavSidecar fails silently for MMR with plain text mode

Also improved error handling of Editor

Fixes #3823

Author: myan9

plugins/plugin-editor/src/view/components/Editor.tsx

@@ -45,6 +45,7 @@ interface State {
   wrapper: HTMLDivElement
   subscription?: IDisposable
   toolbarText?: ToolbarText
+  catastrophicError: Error
 }
 
 export default class Editor extends React.PureComponent<Props, State> {
@@ -54,10 +55,19 @@ export default class Editor extends React.PureComponent<Props, State> {
     // created below in render() via ref={...} -> initMonaco()
     this.state = {
       editor: undefined,
-      wrapper: undefined
+      wrapper: undefined,
+      catastrophicError: undefined
     }
   }
 
+  public static getDerivedStateFromError(error: Error) {
+    return { catastrophicError: error }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('catastrophic error in Editor', error, errorInfo)
+  }
+
   /**
    * ToolbarText for a clean editor, i.e. no changes have been made
    * since last save.
@@ -190,16 +200,21 @@ export default class Editor extends React.PureComponent<Props, State> {
         subscription: Editor.subscribeToChanges(props, editor)
       }
     } catch (err) {
-      console.error(err)
+      console.error('Error initing Monaco: ', err)
+      state.catastrophicError = err
       return state
     }
   }
 
   public render() {
-    return (
-      <div className="code-highlighting">
-        <div className="monaco-editor-wrapper" ref={wrapper => this.setState({ wrapper })}></div>
-      </div>
-    )
+    if (this.state.catastrophicError) {
+      return <div className="oops"> {this.state.catastrophicError.toString()}</div>
+    } else {
+      return (
+        <div className="code-highlighting">
+          <div className="monaco-editor-wrapper" ref={wrapper => this.setState({ wrapper })}></div>
+        </div>
+      )
+    }
   }
 }

plugins/plugin-sidecar/src/view/components/LeftNavSidecar.tsx

@@ -175,7 +175,7 @@ export default class LeftNavSidecar extends BaseSidecar<NavResponse, State> {
         <KuiContent
           tab={this.state.tab}
           mode={this.state.allNavs[navIdx].tabs[tabIdx]}
-          response={this.state.response[navIdx]}
+          response={Object.values(this.state.response)[navIdx]}
         />
       </React.Suspense>
     )