feat: provide error detail in popup.

Composer/packages/client/src/components/ErrorBoundary.tsx

@@ -1,26 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-
+/* eslint-disable format-message/literal-pattern */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable no-console */
 import React, { Component } from 'react';
-import formatMessage from 'format-message';
 
 import { StateError } from '../recoilModel/types';
 
 import { ErrorPopup } from './ErrorPopup/ErrorPopup';
 
-const githubIssueUrl = `https://github.com/microsoft/BotFramework-Composer/issues`;
-const errorToShow: StateError = {
-  message: formatMessage.rich('If this problem persists, please file an issue on <a>GitHub</a>.', {
-    // eslint-disable-next-line react/display-name
-    a: ({ children }) => (
-      <a key="a" href={githubIssueUrl} rel="noopener noreferrer" style={{ color: `greenyellow` }} target="_blank">
-        {children}
-      </a>
-    ),
-  }),
-  summary: formatMessage('Something went wrong!'),
+const genericErrorTitle = 'Something went wrong!';
+
+const formatToStateError = (error: any): StateError => {
+  const message: string = typeof error === 'string' ? error : error?.message || error?.detail;
+  const summary: string = message || genericErrorTitle;
+  return {
+    message,
+    summary,
+  };
 };
 
 interface ErrorBoundaryProps {
@@ -51,17 +48,17 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   unhandledrejectionHandler(event) {
     event.preventDefault();
     console.error(event.reason);
-    this.props.setApplicationLevelError(errorToShow);
+    this.props.setApplicationLevelError(formatToStateError(event));
   }
 
   eventHandler(error) {
     console.error(error);
-    this.props.setApplicationLevelError(errorToShow);
+    this.props.setApplicationLevelError(formatToStateError(error));
   }
 
   onErrorHandler(message, source, lineno, colno, error) {
     console.error({ message, source, lineno, colno, error });
-    this.props.setApplicationLevelError(errorToShow);
+    this.props.setApplicationLevelError(formatToStateError(message));
     return true;
   }
 
@@ -72,9 +69,10 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   // catch all render errors for children components
-  componentDidCatch(error) {
-    console.log(error);
-    this.props.setApplicationLevelError(errorToShow);
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+    console.error(errorInfo);
+    this.props.setApplicationLevelError(formatToStateError(error));
   }
 
   componentWillUnmount() {
@@ -100,8 +98,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       <div>
         {currentApplicationError ? (
           <ErrorPopup
-            error={currentApplicationError?.message}
-            title={currentApplicationError?.summary}
+            error={currentApplicationError}
             onDismiss={() => {
               this.closeErrorPopup();
             }}

Composer/packages/client/src/components/ErrorPopup/ErrorPopup.tsx

@@ -7,36 +7,59 @@ import { useState, useEffect } from 'react';
 import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
+import isEmpty from 'lodash/isEmpty';
+
+import { StateError } from '../../recoilModel/types';
 
 import { consoleStyle, dialog } from './styles';
 
 type ErrorPopupProps = {
-  title: string;
-  error: Node;
+  error: StateError;
   onDismiss: () => void;
 };
 
+const formatErrorTitle = (error: StateError): string => {
+  const { summary } = error;
+  if (!summary) return '';
+  return summary.length > 20 ? summary.substring(0, 20) + '...' : summary;
+};
+
+const formatErrorDetail = (error: StateError): React.ReactElement => {
+  const helpText = formatMessage('If this problem persists, please file an issue on');
+  const message = error.message;
+  return (
+    <section>
+      {helpText}
+      <a href={'https://github.com/microsoft/BotFramework-Composer/issues'}>GitHub</a>
+      {message && <details>{message}</details>}
+    </section>
+  );
+};
+
 export const ErrorPopup = (props: ErrorPopupProps) => {
-  const [hidden, setHidden] = useState(props.error ? false : true);
+  const [hidden, setHidden] = useState(isEmpty(props.error) ? true : false);
 
   const closeDialog = () => {
     setHidden(true);
     props.onDismiss();
   };
 
   useEffect(() => {
-    if (props.error) {
-      setHidden(false);
-    } else {
+    if (isEmpty(props.error)) {
       setHidden(true);
+    } else {
+      setHidden(false);
     }
   }, [props.error]);
 
+  const title = props.error ? formatErrorTitle(props.error) : '';
+  const detail = props.error ? formatErrorDetail(props.error) : '';
+
   return (
     <Dialog
       dialogContentProps={{
         type: DialogType.normal,
-        title: props.title,
+        title,
         styles: dialog,
       }}
       hidden={hidden}
@@ -46,7 +69,7 @@ export const ErrorPopup = (props: ErrorPopupProps) => {
       }}
       onDismiss={closeDialog}
     >
-      <div css={consoleStyle}>{props.error}</div>
+      <div css={consoleStyle}>{detail}</div>
       <DialogFooter>
         <PrimaryButton text={formatMessage('Ok')} onClick={closeDialog} />
       </DialogFooter>