Stop showing the component stack in case of an error, and show a more…

locales/en-US/app.ftl

@@ -225,6 +225,18 @@ Details--close-sidebar-button =
 Details--error-boundary-message =
     .message = Uh oh, some unknown error happened in this panel.
 
+## ErrorBoundary
+## This component is shown when an unexpected error is encountered in the application.
+## Note that the localization won't be always applied in this component.
+
+# This message will always be displayed after another context-specific message.
+ErrorBoundary--report-error-to-developers-description =
+    Please report this issue to the developers, including the full
+    error as displayed in the Developer Tools’ Web Console.
+
+# This is used in a call to action button, displayed inside the error box.
+ErrorBoundary--report-error-on-github = Report the error on GitHub
+
 ## Footer Links
 
 FooterLinks--legal = Legal
@@ -668,6 +680,11 @@ ProfileLoaderAnimation--loading-view-not-found = View not found
 ProfileRootMessage--title = { -profiler-brand-name }
 ProfileRootMessage--additional = Back to home
 
+## Root
+
+Root--error-boundary-message =
+    .message = Uh oh, some unknown error happened in profiler.firefox.com.
+
 ## ServiceWorkerManager
 ## This is the component responsible for handling the service worker installation
 ## and update. It appears at the top of the UI.

res/css/photon/button.css

@@ -4,6 +4,9 @@
 
 /* See https://design.firefox.com/photon/components/buttons.html for the spec */
 .photon-button {
+  /* These two flex options aren't necessary when a real <button> is used, but they are when a <a> element is used as abutton */
+  display: flex;
+  align-items: center;
   padding: 0 8px;
   border: none;
   border-radius: 2px;
@@ -15,7 +18,10 @@
   /* photon styles */
   background-color: var(--grey-90-a10);
   color: var(--grey-90);
+  cursor: initial; /* reset the defaut link style when used as a button */
   font: inherit;
+  text-decoration: none; /* reset the defaut link style when used as a button */
+  user-select: none;
 }
 
 /* This is a Firefox-specific style because Firefox adds a focusring at a bad

res/css/photon/message-bar.css

@@ -46,9 +46,6 @@
 }
 
 .photon-message-bar-inner-text {
-  display: flex;
-  align-items: center;
-
   /* This padding is carefully computed so that multi-line message bars have the
    * same top padding than single-line message bars. Having this property
    * shouldn't change anything for single-line message bars.

src/components/app/Details.js

@@ -10,7 +10,7 @@ import { Localized } from '@fluent/react';
 
 import explicitConnect from 'firefox-profiler/utils/connect';
 import { TabBar } from './TabBar';
-import { ErrorBoundary } from './ErrorBoundary';
+import { LocalizedErrorBoundary } from './ErrorBoundary';
 import { ProfileCallTreeView } from 'firefox-profiler/components/calltree/ProfileCallTreeView';
 import { MarkerTable } from 'firefox-profiler/components/marker-table';
 import { StackChart } from 'firefox-profiler/components/stack-chart/';
@@ -106,9 +106,9 @@ class ProfileViewerImpl extends PureComponent<Props> {
           id="Details--error-boundary-message"
           attrs={{ message: true }}
         >
-          <ErrorBoundary
+          <LocalizedErrorBoundary
             key={selectedTab}
-            message="Uh oh, some unknown error happened in this panel."
+            message="Uh oh, some unknown error happened in this panel"
           >
             {
               {
@@ -121,7 +121,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 'js-tracer': <JsTracer />,
               }[selectedTab]
             }
-          </ErrorBoundary>
+          </LocalizedErrorBoundary>
         </Localized>
         <CallNodeContextMenu />
         <MaybeMarkerContextMenu />

src/components/app/ErrorBoundary.css

@@ -13,39 +13,19 @@
 .appErrorBoundaryContents {
   display: flex;
   width: 100%;
-  max-width: 600px;
-  max-height: calc(100%);
+  max-width: 800px;
+  max-height: 100%;
   box-sizing: border-box;
   flex-direction: column;
 }
 
-.appErrorBoundaryMessage {
-  flex: none;
-}
-
-.appErrorBoundaryDetails {
-  padding: 25px;
-  border-radius: 4px;
-  margin: 12px 0;
-  background: #fff;
-  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
-  color: var(--grey-70);
-  font-family: monospace;
-  line-height: 1.3;
-  opacity: 1;
-  overflow-y: auto;
-
-  /* Transition opacity, but do not delay changing the visibility. */
-  transition: opacity 150ms, visibility 0s;
-  visibility: visible;
-  white-space: pre-wrap;
+.appErrorBoundaryInnerText {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.appErrorBoundaryDetails.hide {
-  opacity: 0;
-
-  /* Transition opacity, and create a delay on hiding the visibility to allow
-     time for the fade out. */
-  transition: opacity 150ms, visibility 0s 150ms;
-  visibility: hidden;
+.appErrorBoundaryInnerText > p {
+  padding: 0;
+  margin: 0;
 }

src/components/app/ErrorBoundary.js

@@ -4,31 +4,35 @@
 // @flow
 
 import * as React from 'react';
+import { Localized } from '@fluent/react';
 import { reportError } from 'firefox-profiler/utils/analytics';
 import './ErrorBoundary.css';
 
 type State = {|
   hasError: boolean,
-  showDetails: boolean,
   errorString: string | null,
-  componentStack?: string,
 |};
 
-type Props = {|
+type ExternalProps = {|
   +children: React.Node,
   +message: string,
 |};
 
+type InternalProps = {|
+  ...ExternalProps,
+  buttonContent: React.Node,
+  reportExplanationMessage: React.Node,
+|};
+
 /**
  * This component will catch errors in components, and display a more friendly error
  * message. This stops the entire app from unmounting and displaying an empty screen.
  *
  * See: https://reactjs.org/docs/error-boundaries.html
  */
-export class ErrorBoundary extends React.Component<Props, State> {
+class ErrorBoundaryInternal extends React.Component<InternalProps, State> {
   state = {
     hasError: false,
-    showDetails: false,
     errorString: null,
   };
 
@@ -52,7 +56,10 @@ export class ErrorBoundary extends React.Component<Props, State> {
         errorString = result;
       }
     }
-    this.setState({ hasError: true, errorString, componentStack });
+    this.setState({
+      hasError: true,
+      errorString,
+    });
     reportError({
       exDescription: errorString
         ? errorString + '\n' + componentStack
@@ -61,35 +68,26 @@ export class ErrorBoundary extends React.Component<Props, State> {
     });
   }
 
-  _toggleErrorDetails = () => {
-    this.setState((state) => ({ showDetails: !state.showDetails }));
-  };
-
   render() {
     if (this.state.hasError) {
-      const { errorString, componentStack, showDetails } = this.state;
+      const { errorString } = this.state;
       return (
         <div className="appErrorBoundary">
           <div className="appErrorBoundaryContents">
-            <div className="photon-message-bar photon-message-bar-error photon-message-bar-inner-content appErrorBoundaryMessage">
-              <div className="photon-message-bar-inner-text">
-                {this.props.message}
+            <div className="photon-message-bar photon-message-bar-error photon-message-bar-inner-content">
+              <div className="photon-message-bar-inner-text appErrorBoundaryInnerText">
+                <p>{this.props.message}</p>
+                {errorString ? <p>{errorString}.</p> : null}
+                <p>{this.props.reportExplanationMessage}</p>
               </div>
-              <button
+              <a
                 className="photon-button photon-button-micro photon-message-bar-action-button"
-                type="button"
-                onClick={this._toggleErrorDetails}
-                aria-expanded={showDetails ? 'true' : 'false'}
+                href="https://github.com/firefox-devtools/profiler/issues/new?title=An%20error%20occurred%20in%20Firefox%20Profiler"
+                target="_blank"
+                rel="noreferrer"
               >
-                {showDetails ? 'Hide error details' : 'View full error details'}
-              </button>
-            </div>
-            <div
-              data-testid="error-technical-details"
-              className={`appErrorBoundaryDetails ${showDetails ? '' : 'hide'}`}
-            >
-              {errorString ? <div>{errorString}</div> : null}
-              {componentStack ? <div>{componentStack}</div> : null}
+                {this.props.buttonContent}
+              </a>
             </div>
           </div>
         </div>
@@ -99,3 +97,38 @@ export class ErrorBoundary extends React.Component<Props, State> {
     return this.props.children;
   }
 }
+
+/**
+ * Use this error boundary when outside of the AppLocalizationProvider hierarchy
+ */
+export function NonLocalizedErrorBoundary(props: ExternalProps) {
+  return (
+    <ErrorBoundaryInternal
+      {...props}
+      buttonContent="Report the error on GitHub"
+      reportExplanationMessage="Please report this error to the developers, including the full error as displayed in the Developer Tools’ Web Console."
+    />
+  );
+}
+
+/**
+ * Use this error boundary when inside of the AppLocalizationProvider hierarchy
+ */
+export function LocalizedErrorBoundary(props: ExternalProps) {
+  return (
+    <ErrorBoundaryInternal
+      {...props}
+      buttonContent={
+        <Localized id="ErrorBoundary--report-error-on-github">
+          Report the error on GitHub
+        </Localized>
+      }
+      reportExplanationMessage={
+        <Localized id="ErrorBoundary--report-error-to-developers-description">
+          Please report this issue to the developers, including the full error
+          as displayed in the Developer Tools’ Web Console.
+        </Localized>
+      }
+    />
+  );
+}

src/components/app/Root.js

@@ -4,10 +4,14 @@
 // @flow
 
 import React, { PureComponent } from 'react';
+import { Localized } from '@fluent/react';
 import { Provider } from 'react-redux';
 import { UrlManager } from './UrlManager';
 import { FooterLinks } from './FooterLinks';
-import { ErrorBoundary } from './ErrorBoundary';
+import {
+  NonLocalizedErrorBoundary,
+  LocalizedErrorBoundary,
+} from './ErrorBoundary';
 import { AppViewRouter } from './AppViewRouter';
 import { ProfileLoader } from './ProfileLoader';
 import { ServiceWorkerManager } from './ServiceWorkerManager';
@@ -28,21 +32,28 @@ export class Root extends PureComponent<RootProps> {
   render() {
     const { store } = this.props;
     return (
-      <ErrorBoundary message="Uh oh, some error happened in profiler.firefox.com.">
+      <NonLocalizedErrorBoundary message="Uh oh, some unknown error happened in profiler.firefox.com.">
         <Provider store={store}>
           <AppLocalizationProvider>
-            <DragAndDrop>
-              <UrlManager>
-                <ServiceWorkerManager />
-                <ProfileLoader />
-                <AppViewRouter />
-                <FooterLinks />
-                <WindowTitle />
-              </UrlManager>
-            </DragAndDrop>
+            <Localized
+              id="Root--error-boundary-message"
+              attrs={{ message: true }}
+            >
+              <LocalizedErrorBoundary message="Uh oh, some unknown error happened in profiler.firefox.com.">
+                <DragAndDrop>
+                  <UrlManager>
+                    <ServiceWorkerManager />
+                    <ProfileLoader />
+                    <AppViewRouter />
+                    <FooterLinks />
+                    <WindowTitle />
+                  </UrlManager>
+                </DragAndDrop>
+              </LocalizedErrorBoundary>
+            </Localized>
           </AppLocalizationProvider>
         </Provider>
-      </ErrorBoundary>
+      </NonLocalizedErrorBoundary>
     );
   }
 }