Added error boundaries for better failures (#527)

* Added error boundaries for better failing

* Fix regex escaping (fixes #525)

* Many more error boundaries

app/common/misc.js

@@ -321,7 +321,19 @@ export function escapeRegex (str: string): string {
 }
 
 export function fuzzyMatch (searchString: string, text: string): boolean {
-  const regexSearchString = escapeRegex(searchString.toLowerCase()).split('').join('.*');
-  const toMatch = new RegExp(regexSearchString);
+  const lowercase = searchString.toLowerCase();
+
+  // Split into individual chars, then escape the ones that need it.
+  const regexSearchString = lowercase.split('').map(v => escapeRegex(v)).join('.*');
+
+  let toMatch;
+  try {
+    toMatch = new RegExp(regexSearchString);
+  } catch (err) {
+    console.warn('Invalid regex', searchString, regexSearchString);
+    // Invalid regex somehow
+    return false;
+  }
+
   return toMatch.test(text.toLowerCase());
 }

app/ui/components/base/link.js

@@ -1,17 +1,26 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
+// @flow
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import {trackEvent} from '../../../analytics/index';
 import * as misc from '../../../common/misc';
 
+type Props = {|
+  href: string,
+  title?: string,
+  button?: boolean,
+  onClick?: Function,
+  children?: React.Node
+|};
+
 @autobind
-class Link extends PureComponent {
-  _handleClick (e) {
+class Link extends React.PureComponent<Props> {
+  _handleClick (e: SyntheticEvent<HTMLAnchorElement>) {
     e && e.preventDefault();
     const {href, onClick} = this.props;
 
     // Also call onClick that was passed to us if there was one
     onClick && onClick(e);
+
     misc.clickLink(href);
     trackEvent('Link', 'Click', href);
   }
@@ -30,13 +39,4 @@ class Link extends PureComponent {
   }
 }
 
-Link.propTypes = {
-  href: PropTypes.string.isRequired,
-
-  // Optional
-  button: PropTypes.bool,
-  onClick: PropTypes.func,
-  children: PropTypes.node
-};
-
 export default Link;

app/ui/components/base/mailto.js

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react';
+import autobind from 'autobind-decorator';
+import * as querystring from '../../../common/querystring';
+import Link from './link';
+
+type Props = {|
+  email: string,
+  children?: React.Node,
+  subject?: string,
+  body?: string,
+|};
+
+@autobind
+class Mailto extends React.PureComponent<Props> {
+  render () {
+    const {email, body, subject, children} = this.props;
+
+    const params = [];
+    if (subject) {
+      params.push({name: 'subject', value: subject});
+    }
+    if (body) {
+      params.push({name: 'body', value: body});
+    }
+
+    const qs = querystring.buildFromParams(params);
+    const href = querystring.joinUrl(`mailto:${email}`, qs);
+
+    return (
+      <Link href={href}>{children || email}</Link>
+    );
+  }
+}
+
+export default Mailto;

app/ui/components/error-boundary.js

@@ -0,0 +1,94 @@
+// @flow
+import * as React from 'react';
+import {showError} from './modals/index';
+import Mailto from './base/mailto';
+
+type Props = {
+  children: React.Node,
+  errorClassName?: string,
+  showAlert?: boolean,
+  replaceWith?: React.Node
+};
+
+type State = {
+  error: Error | null,
+  info: {componentStack: string} | null
+};
+
+class SingleErrorBoundary extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props);
+    this.state = {
+      error: null,
+      info: null
+    };
+  }
+
+  componentDidCatch (error: Error, info: {componentStack: string}) {
+    const {children} = this.props;
+    const firstChild = Array.isArray(children) && children.length === 1 ? children[0] : children;
+
+    this.setState({error, info});
+
+    let componentName = 'component';
+    try {
+      componentName = (firstChild: any).type.name;
+    } catch (err) {
+      // It's okay
+    }
+
+    if (this.props.showAlert) {
+      try {
+        showError({
+          error,
+          title: 'Application Error',
+          message: (
+            <p>
+              Failed to render {componentName}.
+              Please send the following error to
+              {' '}
+              <Mailto email="support@insomnia.rest" subject="Error Report" body={error.stack}/>.
+            </p>
+          )
+        });
+      } catch (err) {
+        // UI is so broken that we can't even show an alert
+      }
+    }
+  }
+
+  render () {
+    const {error, info} = this.state;
+    const {errorClassName, children} = this.props;
+
+    if (error && info) {
+      return (
+        <div className={errorClassName || null}>
+          Render Failure: {error.message}
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+class ErrorBoundary extends React.PureComponent<Props> {
+  render () {
+    const {children, ...extraProps} = this.props;
+
+    if (!children) {
+      return null;
+    }
+
+    // Unwrap multiple children into single children for better error isolation
+    const childArray = Array.isArray(children) ? children : [children];
+    return childArray.map((child, i) => (
+      <SingleErrorBoundary key={i} {...extraProps}>
+        {child}
+      </SingleErrorBoundary>
+    ));
+  }
+}
+
+export default ErrorBoundary;

app/ui/components/modals/error-modal.js

@@ -35,8 +35,6 @@ class ErrorModal extends PureComponent {
     const {title, error, addCancel, message} = options;
     this.setState({title, error, addCancel, message});
 
-    console.warn(`Error: ${message || ''}`, error.stack);
-
     this.modal.show();
 
     return new Promise(resolve => {
@@ -51,9 +49,11 @@ class ErrorModal extends PureComponent {
       <Modal ref={this._setModalRef} closeOnKeyCodes={[13]}>
         <ModalHeader>{title || 'Uh Oh!'}</ModalHeader>
         <ModalBody className="wide pad">
-          <strong>{message && message}</strong>
+          {message ? (
+            <div className="notice error">{message}</div>
+          ) : null}
           {error && (
-            <pre className="pad-top-sm force-wrap">
+            <pre className="pad-top-sm force-wrap selectable">
               <code>{error.stack}</code>
             </pre>
           )}

app/ui/components/modals/settings-modal.js

@@ -161,7 +161,8 @@ class SettingsModal extends PureComponent {
                 activeTheme={settings.theme}
               />
             </TabPanel>
-            <TabPanel className="react-tabs__tab-panel pad scrollable"><SettingsShortcuts/></TabPanel>
+            <TabPanel
+              className="react-tabs__tab-panel pad scrollable"><SettingsShortcuts/></TabPanel>
             <TabPanel className="react-tabs__tab-panel pad scrollable"><Account/></TabPanel>
             <TabPanel className="react-tabs__tab-panel pad scrollable"><Plugins/></TabPanel>
             <TabPanel className="react-tabs__tab-panel pad scrollable"><About/></TabPanel>

app/ui/components/request-pane.js

@@ -25,6 +25,7 @@ import RequestSettingsModal from './modals/request-settings-modal';
 import MarkdownPreview from './markdown-preview';
 import type {Settings} from '../../models/settings';
 import * as hotkeys from '../../common/hotkeys';
+import ErrorBoundary from './error-boundary';
 
 type Props = {
   // Functions
@@ -249,22 +250,24 @@ class RequestPane extends React.PureComponent<Props> {
     return (
       <section className="pane request-pane">
         <header className="pane__header">
-          <RequestUrlBar
-            uniquenessKey={uniqueKey}
-            method={request.method}
-            onMethodChange={updateRequestMethod}
-            onUrlChange={this._handleUpdateRequestUrl}
-            handleAutocompleteUrls={this._autocompleteUrls}
-            handleImport={handleImport}
-            handleGenerateCode={handleGenerateCode}
-            handleSend={handleSend}
-            handleSendAndDownload={handleSendAndDownload}
-            handleRender={handleRender}
-            nunjucksPowerUserMode={nunjucksPowerUserMode}
-            handleGetRenderContext={handleGetRenderContext}
-            url={request.url}
-            requestId={request._id}
-          />
+          <ErrorBoundary errorClassName="font-error pad text-center">
+            <RequestUrlBar
+              uniquenessKey={uniqueKey}
+              method={request.method}
+              onMethodChange={updateRequestMethod}
+              onUrlChange={this._handleUpdateRequestUrl}
+              handleAutocompleteUrls={this._autocompleteUrls}
+              handleImport={handleImport}
+              handleGenerateCode={handleGenerateCode}
+              handleSend={handleSend}
+              handleSendAndDownload={handleSendAndDownload}
+              handleRender={handleRender}
+              nunjucksPowerUserMode={nunjucksPowerUserMode}
+              handleGetRenderContext={handleGetRenderContext}
+              url={request.url}
+              requestId={request._id}
+            />
+          </ErrorBoundary>
         </header>
         <Tabs className="react-tabs pane__body" forceRenderTabPanel>
           <TabList>
@@ -331,46 +334,54 @@ class RequestPane extends React.PureComponent<Props> {
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel scrollable-container">
             <div className="scrollable">
-              <AuthWrapper
-                key={uniqueKey}
-                oAuth2Token={oAuth2Token}
-                showPasswords={showPasswords}
-                request={request}
-                handleUpdateSettingsShowPasswords={updateSettingsShowPasswords}
-                handleRender={handleRender}
-                handleGetRenderContext={handleGetRenderContext}
-                nunjucksPowerUserMode={nunjucksPowerUserMode}
-                onChange={updateRequestAuthentication}
-              />
+              <ErrorBoundary errorClassName="font-error pad text-center">
+                <AuthWrapper
+                  key={uniqueKey}
+                  oAuth2Token={oAuth2Token}
+                  showPasswords={showPasswords}
+                  request={request}
+                  handleUpdateSettingsShowPasswords={updateSettingsShowPasswords}
+                  handleRender={handleRender}
+                  handleGetRenderContext={handleGetRenderContext}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  onChange={updateRequestAuthentication}
+                />
+              </ErrorBoundary>
             </div>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel query-editor">
             <div className="pad pad-bottom-sm query-editor__preview">
               <label className="label--small no-pad-top">Url Preview</label>
               <code className="txt-sm block faint">
-                <RenderedQueryString
-                  key={uniqueKey}
-                  handleRender={handleRender}
-                  request={request}
-                />
+                <ErrorBoundary
+                  errorClassName="tall wide vertically-align font-error pad text-center">
+                  <RenderedQueryString
+                    key={uniqueKey}
+                    handleRender={handleRender}
+                    request={request}
+                  />
+                </ErrorBoundary>
               </code>
             </div>
             <div className="scrollable-container">
               <div className="scrollable">
-                <KeyValueEditor
-                  sortable
-                  key={uniqueKey}
-                  namePlaceholder="name"
-                  valuePlaceholder="value"
-                  onToggleDisable={this._trackQueryToggle}
-                  onCreate={this._trackQueryCreate}
-                  onDelete={this._trackQueryDelete}
-                  pairs={request.parameters}
-                  handleRender={handleRender}
-                  handleGetRenderContext={handleGetRenderContext}
-                  nunjucksPowerUserMode={nunjucksPowerUserMode}
-                  onChange={updateRequestParameters}
-                />
+                <ErrorBoundary
+                  errorClassName="tall wide vertically-align font-error pad text-center">
+                  <KeyValueEditor
+                    sortable
+                    key={uniqueKey}
+                    namePlaceholder="name"
+                    valuePlaceholder="value"
+                    onToggleDisable={this._trackQueryToggle}
+                    onCreate={this._trackQueryCreate}
+                    onDelete={this._trackQueryDelete}
+                    pairs={request.parameters}
+                    handleRender={handleRender}
+                    handleGetRenderContext={handleGetRenderContext}
+                    nunjucksPowerUserMode={nunjucksPowerUserMode}
+                    onChange={updateRequestParameters}
+                  />
+                </ErrorBoundary>
               </div>
             </div>
             <div className="pad-right text-right">
@@ -382,18 +393,20 @@ class RequestPane extends React.PureComponent<Props> {
             </div>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel header-editor">
-            <RequestHeadersEditor
-              key={uniqueKey}
-              headers={request.headers}
-              handleRender={handleRender}
-              handleGetRenderContext={handleGetRenderContext}
-              nunjucksPowerUserMode={nunjucksPowerUserMode}
-              editorFontSize={editorFontSize}
-              editorIndentSize={editorIndentSize}
-              editorLineWrapping={editorLineWrapping}
-              onChange={updateRequestHeaders}
-              bulk={useBulkHeaderEditor}
-            />
+            <ErrorBoundary errorClassName="font-error pad text-center">
+              <RequestHeadersEditor
+                key={uniqueKey}
+                headers={request.headers}
+                handleRender={handleRender}
+                handleGetRenderContext={handleGetRenderContext}
+                nunjucksPowerUserMode={nunjucksPowerUserMode}
+                editorFontSize={editorFontSize}
+                editorIndentSize={editorIndentSize}
+                editorLineWrapping={editorLineWrapping}
+                onChange={updateRequestHeaders}
+                bulk={useBulkHeaderEditor}
+              />
+            </ErrorBoundary>
 
             <div className="pad-right text-right">
               <button className="margin-top-sm btn btn--clicky"
@@ -411,12 +424,14 @@ class RequestPane extends React.PureComponent<Props> {
                   </button>
                 </div>
                 <div className="pad">
-                  <MarkdownPreview
-                    heading={request.name}
-                    debounceMillis={1000}
-                    markdown={request.description}
-                    handleRender={handleRender}
-                  />
+                  <ErrorBoundary errorClassName="font-error pad text-center">
+                    <MarkdownPreview
+                      heading={request.name}
+                      debounceMillis={1000}
+                      markdown={request.description}
+                      handleRender={handleRender}
+                    />
+                  </ErrorBoundary>
                 </div>
               </div>
             ) : (

app/ui/components/response-pane.js

@@ -26,6 +26,7 @@ import {cancelCurrentRequest} from '../../network/network';
 import {trackEvent} from '../../analytics';
 import Hotkey from './hotkey';
 import * as hotkeys from '../../common/hotkeys';
+import ErrorBoundary from './error-boundary';
 
 type Props = {
   // Functions
@@ -278,60 +279,70 @@ class ResponsePane extends React.PureComponent<Props> {
             </Tab>
           </TabList>
           <TabPanel className="react-tabs__tab-panel">
-            <ResponseViewer
-              key={response._id}
-              // Send larger one because legacy responses have bytesContent === -1
-              responseId={response._id}
-              bytes={Math.max(response.bytesContent, response.bytesRead)}
-              contentType={response.contentType || ''}
-              previewMode={response.error ? PREVIEW_MODE_SOURCE : previewMode}
-              filter={filter}
-              filterHistory={filterHistory}
-              updateFilter={response.error ? null : handleSetFilter}
-              bodyPath={response.bodyPath}
-              getBody={this._handleGetResponseBody}
-              error={response.error}
-              editorLineWrapping={editorLineWrapping}
-              editorFontSize={editorFontSize}
-              editorIndentSize={editorIndentSize}
-              editorKeyMap={editorKeyMap}
-              url={response.url}
-            />
+            <ErrorBoundary errorClassName="font-error pad text-center">
+              <ResponseViewer
+                key={response._id}
+                // Send larger one because legacy responses have bytesContent === -1
+                responseId={response._id}
+                bytes={Math.max(response.bytesContent, response.bytesRead)}
+                contentType={response.contentType || ''}
+                previewMode={response.error ? PREVIEW_MODE_SOURCE : previewMode}
+                filter={filter}
+                filterHistory={filterHistory}
+                updateFilter={response.error ? null : handleSetFilter}
+                bodyPath={response.bodyPath}
+                getBody={this._handleGetResponseBody}
+                error={response.error}
+                editorLineWrapping={editorLineWrapping}
+                editorFontSize={editorFontSize}
+                editorIndentSize={editorIndentSize}
+                editorKeyMap={editorKeyMap}
+                url={response.url}
+              />
+            </ErrorBoundary>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel scrollable-container">
             <div className="scrollable pad">
-              <ResponseHeadersViewer
-                key={response._id}
-                headers={response.headers}
-              />
+              <ErrorBoundary errorClassName="font-error pad text-center">
+                <ResponseHeadersViewer
+                  key={response._id}
+                  headers={response.headers}
+                />
+              </ErrorBoundary>
             </div>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel scrollable-container">
             <div className="scrollable pad">
-              <ResponseCookiesViewer
-                handleShowRequestSettings={handleShowRequestSettings}
-                cookiesSent={response.settingSendCookies}
-                cookiesStored={response.settingStoreCookies}
-                showCookiesModal={showCookiesModal}
-                key={response._id}
-                headers={cookieHeaders}
-              />
+              <ErrorBoundary errorClassName="font-error pad text-center">
+                <ResponseCookiesViewer
+                  handleShowRequestSettings={handleShowRequestSettings}
+                  cookiesSent={response.settingSendCookies}
+                  cookiesStored={response.settingStoreCookies}
+                  showCookiesModal={showCookiesModal}
+                  key={response._id}
+                  headers={cookieHeaders}
+                />
+              </ErrorBoundary>
             </div>
           </TabPanel>
           <TabPanel className="react-tabs__tab-panel">
-            <ResponseTimelineViewer
-              key={response._id}
-              timeline={response.timeline || []}
-              editorLineWrapping={editorLineWrapping}
-              editorFontSize={editorFontSize}
-              editorIndentSize={editorIndentSize}
-            />
+            <ErrorBoundary errorClassName="font-error pad text-center">
+              <ResponseTimelineViewer
+                key={response._id}
+                timeline={response.timeline || []}
+                editorLineWrapping={editorLineWrapping}
+                editorFontSize={editorFontSize}
+                editorIndentSize={editorIndentSize}
+              />
+            </ErrorBoundary>
           </TabPanel>
         </Tabs>
-        <ResponseTimer
-          handleCancel={cancelCurrentRequest}
-          loadStartTime={loadStartTime}
-        />
+        <ErrorBoundary errorClassName="font-error pad text-center">
+          <ResponseTimer
+            handleCancel={cancelCurrentRequest}
+            loadStartTime={loadStartTime}
+          />
+        </ErrorBoundary>
       </section>
     );
   }

app/ui/components/viewers/response-headers-viewer.js

@@ -10,32 +10,30 @@ class ResponseHeadersViewer extends PureComponent {
       h => `${h.name}: ${h.value}`
     ).join('\n');
 
-    return (
-      <div>
-        <table className="table--fancy table--striped">
-          <thead>
-          <tr>
-            <th>Name</th>
-            <th>Value</th>
+    return [
+      <table key='table' className="table--fancy table--striped">
+        <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
+        </thead>
+        <tbody>
+        {headers.map((h, i) => (
+          <tr className="selectable" key={i}>
+            <td style={{width: '50%'}} className="force-wrap">{h.name}</td>
+            <td style={{width: '50%'}} className="force-wrap">{h.value}</td>
           </tr>
-          </thead>
-          <tbody>
-          {headers.map((h, i) => (
-            <tr className="selectable" key={i}>
-              <td style={{width: '50%'}} className="force-wrap">{h.name}</td>
-              <td style={{width: '50%'}} className="force-wrap">{h.value}</td>
-            </tr>
-          ))}
-          </tbody>
-        </table>
-        <p className="pad-top">
-          <CopyButton
-            className="pull-right btn btn--clicky"
-            content={headersString}
-          />
-        </p>
-      </div>
-    );
+        ))}
+        </tbody>
+      </table>,
+      <p key='copy' className="pad-top">
+        <CopyButton
+          className="pull-right btn btn--clicky"
+          content={headersString}
+        />
+      </p>
+    ];
   }
 }
 

app/ui/components/wrapper.js

@@ -41,6 +41,7 @@ import {trackEvent} from '../../analytics/index';
 import * as importers from 'insomnia-importers';
 import type {CookieJar} from '../../models/cookie-jar';
 import type {Environment} from '../../models/environment';
+import ErrorBoundary from './error-boundary';
 
 type Props = {
   // Helper Functions
@@ -389,124 +390,15 @@ class Wrapper extends React.PureComponent<Props, State> {
     const columns = `${realSidebarWidth}rem 0 minmax(0, ${paneWidth}fr) 0 minmax(0, ${1 - paneWidth}fr)`;
     const rows = `minmax(0, ${paneHeight}fr) 0 minmax(0, ${1 - paneHeight}fr)`;
 
-    return (
-      <div id="wrapper"
-           className={classnames('wrapper', {'wrapper--vertical': settings.forceVerticalLayout})}
-           style={{gridTemplateColumns: columns, gridTemplateRows: rows}}>
-
-        <Sidebar
-          ref={handleSetSidebarRef}
-          showEnvironmentsModal={this._handleShowEnvironmentsModal}
-          showCookiesModal={this._handleShowCookiesModal}
-          handleActivateRequest={handleActivateRequest}
-          handleChangeFilter={handleSetSidebarFilter}
-          handleImportFile={this._handleImportFile}
-          handleExportFile={handleExportFile}
-          handleSetActiveWorkspace={handleSetActiveWorkspace}
-          handleDuplicateRequest={handleDuplicateRequest}
-          handleGenerateCode={handleGenerateCode}
-          handleCopyAsCurl={handleCopyAsCurl}
-          handleDuplicateRequestGroup={handleDuplicateRequestGroup}
-          handleSetActiveEnvironment={handleSetActiveEnvironment}
-          moveDoc={handleMoveDoc}
-          handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
-          activeRequest={activeRequest}
-          activeEnvironment={activeEnvironment}
-          handleCreateRequest={handleCreateRequest}
-          handleCreateRequestGroup={handleCreateRequestGroup}
-          filter={sidebarFilter || ''}
-          hidden={sidebarHidden || false}
-          workspace={activeWorkspace}
-          unseenWorkspaces={unseenWorkspaces}
-          childObjects={sidebarChildren}
-          width={sidebarWidth}
-          isLoading={isLoading}
-          workspaces={workspaces}
-          environments={environments}
-        />
-
-        <div className="drag drag--sidebar">
-          <div onDoubleClick={handleResetDragSidebar} onMouseDown={this._handleStartDragSidebar}>
-          </div>
-        </div>
-
-        <RequestPane
-          ref={handleSetRequestPaneRef}
-          handleImportFile={this._handleImportFile}
-          request={activeRequest}
-          showPasswords={settings.showPasswords}
-          useBulkHeaderEditor={settings.useBulkHeaderEditor}
-          editorFontSize={settings.editorFontSize}
-          editorIndentSize={settings.editorIndentSize}
-          editorKeyMap={settings.editorKeyMap}
-          editorLineWrapping={settings.editorLineWrapping}
-          workspace={activeWorkspace}
-          settings={settings}
-          environmentId={activeEnvironment ? activeEnvironment._id : ''}
-          oAuth2Token={oAuth2Token}
-          forceUpdateRequest={this._handleForceUpdateRequest}
-          handleCreateRequest={handleCreateRequestForWorkspace}
-          handleGenerateCode={handleGenerateCodeForActiveRequest}
-          handleImport={this._handleImport}
-          handleRender={handleRender}
-          handleGetRenderContext={handleGetRenderContext}
-          nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
-          updateRequestBody={this._handleUpdateRequestBody}
-          updateRequestUrl={this._handleUpdateRequestUrl}
-          updateRequestMethod={this._handleUpdateRequestMethod}
-          updateRequestParameters={this._handleUpdateRequestParameters}
-          updateRequestAuthentication={this._handleUpdateRequestAuthentication}
-          updateRequestHeaders={this._handleUpdateRequestHeaders}
-          updateRequestMimeType={this._handleUpdateRequestMimeType}
-          updateSettingsShowPasswords={this._handleUpdateSettingsShowPasswords}
-          updateSettingsUseBulkHeaderEditor={this._handleUpdateSettingsUseBulkHeaderEditor}
-          forceRefreshCounter={this.state.forceRefreshKey}
-          handleSend={this._handleSendRequestWithActiveEnvironment}
-          handleSendAndDownload={this._handleSendAndDownloadRequestWithActiveEnvironment}
-        />
-
-        <div className="drag drag--pane-horizontal">
-          <div
-            onMouseDown={handleStartDragPaneHorizontal}
-            onDoubleClick={handleResetDragPaneHorizontal}>
-          </div>
-        </div>
-
-        <div className="drag drag--pane-vertical">
-          <div
-            onMouseDown={handleStartDragPaneVertical}
-            onDoubleClick={handleResetDragPaneVertical}>
-          </div>
-        </div>
-
-        <ResponsePane
-          ref={handleSetResponsePaneRef}
-          request={activeRequest}
-          responses={activeRequestResponses}
-          response={activeResponse}
-          editorFontSize={settings.editorFontSize}
-          editorIndentSize={settings.editorIndentSize}
-          editorKeyMap={settings.editorKeyMap}
-          editorLineWrapping={settings.editorLineWrapping}
-          previewMode={responsePreviewMode}
-          filter={responseFilter}
-          filterHistory={responseFilterHistory}
-          loadStartTime={loadStartTime}
-          showCookiesModal={this._handleShowCookiesModal}
-          handleShowRequestSettings={this._handleShowRequestSettingsModal}
-          handleSetActiveResponse={this._handleSetActiveResponse}
-          handleSetPreviewMode={this._handleSetPreviewMode}
-          handleDeleteResponses={this._handleDeleteResponses}
-          handleDeleteResponse={this._handleDeleteResponse}
-          handleSetFilter={this._handleSetResponseFilter}
-        />
-
-        <div className="modals">
+    return [
+      <div key="modals" className="modals">
+        <ErrorBoundary showAlert>
           <AlertModal ref={registerModal}/>
           <ErrorModal ref={registerModal}/>
+          <PromptModal ref={registerModal}/>
+
           <ChangelogModal ref={registerModal}/>
           <LoginModal ref={registerModal}/>
-          <PromptModal ref={registerModal}/>
           <AskModal ref={registerModal}/>
           <RequestCreateModal ref={registerModal}/>
           <PaymentNotificationModal ref={registerModal}/>
@@ -630,9 +522,127 @@ class Wrapper extends React.PureComponent<Props, State> {
             getRenderContext={handleGetRenderContext}
             nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
           />
+        </ErrorBoundary>
+      </div>,
+      <div key="wrapper"
+           id="wrapper"
+           className={classnames('wrapper', {'wrapper--vertical': settings.forceVerticalLayout})}
+           style={{gridTemplateColumns: columns, gridTemplateRows: rows}}>
+
+        <ErrorBoundary showAlert>
+          <Sidebar
+            ref={handleSetSidebarRef}
+            showEnvironmentsModal={this._handleShowEnvironmentsModal}
+            showCookiesModal={this._handleShowCookiesModal}
+            handleActivateRequest={handleActivateRequest}
+            handleChangeFilter={handleSetSidebarFilter}
+            handleImportFile={this._handleImportFile}
+            handleExportFile={handleExportFile}
+            handleSetActiveWorkspace={handleSetActiveWorkspace}
+            handleDuplicateRequest={handleDuplicateRequest}
+            handleGenerateCode={handleGenerateCode}
+            handleCopyAsCurl={handleCopyAsCurl}
+            handleDuplicateRequestGroup={handleDuplicateRequestGroup}
+            handleSetActiveEnvironment={handleSetActiveEnvironment}
+            moveDoc={handleMoveDoc}
+            handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
+            activeRequest={activeRequest}
+            activeEnvironment={activeEnvironment}
+            handleCreateRequest={handleCreateRequest}
+            handleCreateRequestGroup={handleCreateRequestGroup}
+            filter={sidebarFilter || ''}
+            hidden={sidebarHidden || false}
+            workspace={activeWorkspace}
+            unseenWorkspaces={unseenWorkspaces}
+            childObjects={sidebarChildren}
+            width={sidebarWidth}
+            isLoading={isLoading}
+            workspaces={workspaces}
+            environments={environments}
+          />
+        </ErrorBoundary>
+
+        <div className="drag drag--sidebar">
+          <div onDoubleClick={handleResetDragSidebar} onMouseDown={this._handleStartDragSidebar}>
+          </div>
         </div>
+
+        <ErrorBoundary showAlert>
+          <RequestPane
+            ref={handleSetRequestPaneRef}
+            handleImportFile={this._handleImportFile}
+            request={activeRequest}
+            showPasswords={settings.showPasswords}
+            useBulkHeaderEditor={settings.useBulkHeaderEditor}
+            editorFontSize={settings.editorFontSize}
+            editorIndentSize={settings.editorIndentSize}
+            editorKeyMap={settings.editorKeyMap}
+            editorLineWrapping={settings.editorLineWrapping}
+            workspace={activeWorkspace}
+            settings={settings}
+            environmentId={activeEnvironment ? activeEnvironment._id : ''}
+            oAuth2Token={oAuth2Token}
+            forceUpdateRequest={this._handleForceUpdateRequest}
+            handleCreateRequest={handleCreateRequestForWorkspace}
+            handleGenerateCode={handleGenerateCodeForActiveRequest}
+            handleImport={this._handleImport}
+            handleRender={handleRender}
+            handleGetRenderContext={handleGetRenderContext}
+            nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
+            updateRequestBody={this._handleUpdateRequestBody}
+            updateRequestUrl={this._handleUpdateRequestUrl}
+            updateRequestMethod={this._handleUpdateRequestMethod}
+            updateRequestParameters={this._handleUpdateRequestParameters}
+            updateRequestAuthentication={this._handleUpdateRequestAuthentication}
+            updateRequestHeaders={this._handleUpdateRequestHeaders}
+            updateRequestMimeType={this._handleUpdateRequestMimeType}
+            updateSettingsShowPasswords={this._handleUpdateSettingsShowPasswords}
+            updateSettingsUseBulkHeaderEditor={this._handleUpdateSettingsUseBulkHeaderEditor}
+            forceRefreshCounter={this.state.forceRefreshKey}
+            handleSend={this._handleSendRequestWithActiveEnvironment}
+            handleSendAndDownload={this._handleSendAndDownloadRequestWithActiveEnvironment}
+          />
+        </ErrorBoundary>
+
+        <div className="drag drag--pane-horizontal">
+          <div
+            onMouseDown={handleStartDragPaneHorizontal}
+            onDoubleClick={handleResetDragPaneHorizontal}>
+          </div>
+        </div>
+
+        <div className="drag drag--pane-vertical">
+          <div
+            onMouseDown={handleStartDragPaneVertical}
+            onDoubleClick={handleResetDragPaneVertical}>
+          </div>
+        </div>
+
+        <ErrorBoundary showAlert>
+          <ResponsePane
+            ref={handleSetResponsePaneRef}
+            request={activeRequest}
+            responses={activeRequestResponses}
+            response={activeResponse}
+            editorFontSize={settings.editorFontSize}
+            editorIndentSize={settings.editorIndentSize}
+            editorKeyMap={settings.editorKeyMap}
+            editorLineWrapping={settings.editorLineWrapping}
+            previewMode={responsePreviewMode}
+            filter={responseFilter}
+            filterHistory={responseFilterHistory}
+            loadStartTime={loadStartTime}
+            showCookiesModal={this._handleShowCookiesModal}
+            handleShowRequestSettings={this._handleShowRequestSettingsModal}
+            handleSetActiveResponse={this._handleSetActiveResponse}
+            handleSetPreviewMode={this._handleSetPreviewMode}
+            handleDeleteResponses={this._handleDeleteResponses}
+            handleDeleteResponse={this._handleDeleteResponse}
+            handleSetFilter={this._handleSetResponseFilter}
+          />
+        </ErrorBoundary>
       </div>
-    );
+    ];
   }
 }
 

app/ui/containers/app.js

@@ -38,6 +38,7 @@ import {exportHar} from '../../common/har';
 import * as hotkeys from '../../common/hotkeys';
 import KeydownBinder from '../components/keydown-binder';
 import {executeHotKey} from '../../common/hotkeys';
+import ErrorBoundary from '../components/error-boundary';
 
 @autobind
 class App extends PureComponent {
@@ -720,45 +721,50 @@ class App extends PureComponent {
     return (
       <KeydownBinder onKeydown={this._handleKeyDown}>
         <div className="app">
-          <Wrapper
-            {...this.props}
-            ref={this._setWrapperRef}
-            paneWidth={this.state.paneWidth}
-            paneHeight={this.state.paneHeight}
-            sidebarWidth={this.state.sidebarWidth}
-            handleCreateRequestForWorkspace={this._requestCreateForWorkspace}
-            handleSetRequestGroupCollapsed={this._handleSetRequestGroupCollapsed}
-            handleActivateRequest={this._handleSetActiveRequest}
-            handleSetRequestPaneRef={this._setRequestPaneRef}
-            handleSetResponsePaneRef={this._setResponsePaneRef}
-            handleSetSidebarRef={this._setSidebarRef}
-            handleStartDragSidebar={this._startDragSidebar}
-            handleResetDragSidebar={this._resetDragSidebar}
-            handleStartDragPaneHorizontal={this._startDragPaneHorizontal}
-            handleStartDragPaneVertical={this._startDragPaneVertical}
-            handleResetDragPaneHorizontal={this._resetDragPaneHorizontal}
-            handleResetDragPaneVertical={this._resetDragPaneVertical}
-            handleCreateRequest={this._requestCreate}
-            handleRender={this._handleRenderText}
-            handleGetRenderContext={this._handleGetRenderContext}
-            handleDuplicateRequest={this._requestDuplicate}
-            handleDuplicateRequestGroup={this._requestGroupDuplicate}
-            handleDuplicateWorkspace={this._workspaceDuplicate}
-            handleCreateRequestGroup={this._requestGroupCreate}
-            handleGenerateCode={this._handleGenerateCode}
-            handleGenerateCodeForActiveRequest={this._handleGenerateCodeForActiveRequest}
-            handleCopyAsCurl={this._handleCopyAsCurl}
-            handleSetResponsePreviewMode={this._handleSetResponsePreviewMode}
-            handleSetResponseFilter={this._handleSetResponseFilter}
-            handleSendRequestWithEnvironment={this._handleSendRequestWithEnvironment}
-            handleSendAndDownloadRequestWithEnvironment={this._handleSendAndDownloadRequestWithEnvironment}
-            handleSetActiveResponse={this._handleSetActiveResponse}
-            handleSetActiveRequest={this._handleSetActiveRequest}
-            handleSetActiveEnvironment={this._handleSetActiveEnvironment}
-            handleSetSidebarFilter={this._handleSetSidebarFilter}
-            handleToggleMenuBar={this._handleToggleMenuBar}
-          />
-          <Toast/>
+          <ErrorBoundary showAlert>
+            <Wrapper
+              {...this.props}
+              ref={this._setWrapperRef}
+              paneWidth={this.state.paneWidth}
+              paneHeight={this.state.paneHeight}
+              sidebarWidth={this.state.sidebarWidth}
+              handleCreateRequestForWorkspace={this._requestCreateForWorkspace}
+              handleSetRequestGroupCollapsed={this._handleSetRequestGroupCollapsed}
+              handleActivateRequest={this._handleSetActiveRequest}
+              handleSetRequestPaneRef={this._setRequestPaneRef}
+              handleSetResponsePaneRef={this._setResponsePaneRef}
+              handleSetSidebarRef={this._setSidebarRef}
+              handleStartDragSidebar={this._startDragSidebar}
+              handleResetDragSidebar={this._resetDragSidebar}
+              handleStartDragPaneHorizontal={this._startDragPaneHorizontal}
+              handleStartDragPaneVertical={this._startDragPaneVertical}
+              handleResetDragPaneHorizontal={this._resetDragPaneHorizontal}
+              handleResetDragPaneVertical={this._resetDragPaneVertical}
+              handleCreateRequest={this._requestCreate}
+              handleRender={this._handleRenderText}
+              handleGetRenderContext={this._handleGetRenderContext}
+              handleDuplicateRequest={this._requestDuplicate}
+              handleDuplicateRequestGroup={this._requestGroupDuplicate}
+              handleDuplicateWorkspace={this._workspaceDuplicate}
+              handleCreateRequestGroup={this._requestGroupCreate}
+              handleGenerateCode={this._handleGenerateCode}
+              handleGenerateCodeForActiveRequest={this._handleGenerateCodeForActiveRequest}
+              handleCopyAsCurl={this._handleCopyAsCurl}
+              handleSetResponsePreviewMode={this._handleSetResponsePreviewMode}
+              handleSetResponseFilter={this._handleSetResponseFilter}
+              handleSendRequestWithEnvironment={this._handleSendRequestWithEnvironment}
+              handleSendAndDownloadRequestWithEnvironment={this._handleSendAndDownloadRequestWithEnvironment}
+              handleSetActiveResponse={this._handleSetActiveResponse}
+              handleSetActiveRequest={this._handleSetActiveRequest}
+              handleSetActiveEnvironment={this._handleSetActiveEnvironment}
+              handleSetSidebarFilter={this._handleSetSidebarFilter}
+              handleToggleMenuBar={this._handleToggleMenuBar}
+            />
+          </ErrorBoundary>
+
+          <ErrorBoundary showAlert>
+            <Toast/>
+          </ErrorBoundary>
 
           {/* Block all mouse activity by showing an overlay while dragging */}
           {this.state.showDragOverlay ? <div className="blocker-overlay"></div> : null}

app/ui/css/layout/base.less

@@ -129,6 +129,11 @@ code, pre, .monospace {
   font-family: @font-default;
 }
 
+.pre {
+  line-height: 1.3em;
+  white-space: pre;
+}
+
 div.notice,
 p.notice {
   text-align: center;