Merge pull request #4592 from tylershuster/stacktrace

interface: better error boundary reporting tools and formatting

pkg/interface/package.json

@@ -42,6 +42,7 @@
     "react-visibility-sensor": "^5.1.1",
     "remark-breaks": "^2.0.1",
     "remark-disable-tokenizers": "^1.0.24",
+    "stacktrace-js": "^2.0.2",
     "style-loader": "^1.3.0",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",

pkg/interface/src/views/components/Error.tsx

@@ -18,6 +18,16 @@ const Details = styled.details``;
 class ErrorComponent extends Component<ErrorProps> {
   render () {
     const { code, error, history, description } = this.props;
+    let title = '';
+    if (error) {
+      title = error.message;
+    } else if (description) {
+      title = description;
+    }
+    let body = '';
+    if (error) {
+      body =`\`\`\`%0A${error.stack?.replaceAll('\n', '%0A')}%0A\`\`\``;
+    }
     return (
       <Col alignItems="center" justifyContent="center" height="100%" p="4" backgroundColor="white" maxHeight="100%">
         <Box mb={4}>
@@ -32,12 +42,21 @@ class ErrorComponent extends Component<ErrorProps> {
              <Text mono>&ldquo;{error.message}&rdquo;</Text>
            </Box>
            <Details>
-               <Summary>Stack trace</Summary>
-              <Text mono p='1' borderRadius='1' display='block' overflow='auto'  backgroundColor='washedGray' style={{ whiteSpace: 'pre', wordWrap: 'break-word' }}>{error.stack}</Text>
+              <Summary>Stack trace</Summary>
+              <Text
+                mono
+                p={1}
+                borderRadius={1}
+                display='block'
+                overflow='scroll'
+                maxHeight='50vh'
+                backgroundColor='washedGray'
+                style={{ whiteSpace: 'pre', wordWrap: 'break-word' }}
+              >{error.stack}</Text>
            </Details>
           </Box>
        )}
-          <Text mb={4} textAlign="center">If this is unexpected, email <code>support@tlon.io</code> or <BaseAnchor color='black' href="https://github.com/urbit/urbit/issues/new/choose">submit an issue</BaseAnchor>.</Text>
+          <Text mb={4} textAlign="center">If this is unexpected, email <code>support@tlon.io</code> or <BaseAnchor borderBottom={1} color='black' href={`https://github.com/urbit/landscape/issues/new?assignees=&labels=bug&title=${title}&body=${body}`} target="_blank">submit an issue</BaseAnchor>.</Text>
           {history.length > 1
             ? <Button primary onClick={() => history.go(-1) }>Go back</Button>
             : <Button primary onClick={() => history.push('/') }>Go home</Button>

pkg/interface/src/views/components/ErrorBoundary.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
+import StackTrace from 'stacktrace-js';
 import ErrorComponent from './Error';
+import { Spinner } from '~/views/components/Spinner';
 
 class ErrorBoundary extends Component<
   RouteComponentProps,
-  { error?: Error }
+  { error?: Error | true}
 > {
   constructor(props) {
     super(props);
@@ -19,13 +21,31 @@ class ErrorBoundary extends Component<
     });
   }
 
-  componentDidCatch(error) {
-    this.setState({ error });
+  componentDidCatch(error: Error) {
+    this.setState({ error: true });
+    StackTrace.fromError(error).then(stackframes => {
+      const stack = stackframes.map(frame => {
+        return `${frame.functionName} (${frame.fileName} ${frame.lineNumber}:${frame.columnNumber})`;
+      }).join('\n');
+      error = { name: error.name, message: error.message, stack };
+      this.setState({ error })
+    });
     return false;
   }
 
   render() {
     if (this.state.error) {
+      if (this.state.error === true) {
+        return (
+          <div className="relative h-100 w-100">
+            <Spinner
+              text="Encountered error, gathering information"
+              awaiting={true}
+              classes="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
+            />
+          </div>
+        );
+      }
       return (<ErrorComponent error={this.state.error} />);
     }
     return this.props.children;