mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-09-21 15:38:59 +03:00
Merge pull request #4592 from tylershuster/stacktrace
interface: better error boundary reporting tools and formatting
This commit is contained in:
commit
0c419550ef
BIN
pkg/interface/package-lock.json
generated
BIN
pkg/interface/package-lock.json
generated
Binary file not shown.
@ -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",
|
||||
|
@ -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>“{error.message}”</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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user