Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: show error message in fatal error boundary and allow copying stack trace to clipboard #592

Merged
merged 1 commit into from
Jul 19, 2021
Merged

feat: show error message in fatal error boundary and allow copying stack trace to clipboard #592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions adapter/i18n/en.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,15 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2021-07-14T21:34:51.462Z\n"
"PO-Revision-Date: 2021-07-14T21:34:51.462Z\n"
"POT-Creation-Date: 2021-07-16T13:22:12.456Z\n"
"PO-Revision-Date: 2021-07-16T13:22:12.456Z\n"

msgid "An error occurred in the DHIS2 application."
msgstr "An error occurred in the DHIS2 application."

msgid "Technical details copied to clipboard"
msgstr "Technical details copied to clipboard"

msgid "Something went wrong"
msgstr "Something went wrong"

Expand All @@ -26,6 +29,9 @@ msgstr "Show technical details"
msgid "The following information may be requested by technical support."
msgstr "The following information may be requested by technical support."

msgid "Copy technical details to clipboard"
msgstr "Copy technical details to clipboard"

msgid "Please sign in"
msgstr "Please sign in"

Expand Down
103 changes: 58 additions & 45 deletions adapter/src/components/ErrorBoundary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,25 @@ import React, { Component } from 'react'
import buttonStyles from './styles/Button.style'
import styles from './styles/ErrorBoundary.style'

// In order to avoid using @dhis2/ui components in the error boundary - as anything
// that breaks within it will not be caught properly - we define a component
// with the same styles as Button
const UIButton = ({ children, onClick }) => (
<>
<style jsx>{buttonStyles}</style>
<button onClick={onClick}>{children}</button>
</>
)

UIButton.propTypes = {
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired,
}

const translatedErrorHeading = i18n.t(
'An error occurred in the DHIS2 application.'
)

const replaceNewlinesWithBreaks = text =>
text
.split('\n')
.reduce((out, line, i) => [...out, line, <br key={i} />], [])

export class ErrorBoundary extends Component {
constructor(props) {
super(props)
Expand All @@ -22,6 +32,7 @@ export class ErrorBoundary extends Component {
errorInfo: null,
drawerOpen: false,
}
this.errorDetailsRef = React.createRef()
}

componentDidCatch(error, errorInfo) {
Expand All @@ -37,62 +48,64 @@ export class ErrorBoundary extends Component {
})
}

handleCopyErrorDetails = () => {
const errorDetails = this.errorDetailsRef.current.textContent
navigator.clipboard.writeText(errorDetails).then(() => {
alert(i18n.t('Technical details copied to clipboard'))
})
}

render() {
const { children } = this.props
const { children, fullscreen, onRetry } = this.props
if (this.state.error) {
return (
<div
className={cx('mask', {
fullscreen: this.props.fullscreen,
})}
>
<div className={cx('mask', { fullscreen })}>
<style jsx>{styles}</style>
<style jsx>{buttonStyles}</style>
<div className="container">
{/* <InfoIcon className="icon" /> */}
<div className="message">
<h1 className="message">
{i18n.t('Something went wrong')}
</div>
<div className="retry">
<button
onClick={() => {
this.props.onRetry && this.props.onRetry()
}}
>
{i18n.t('Try again')}
</button>
</div>
<div
</h1>
{onRetry && (
<div className="retry">
<UIButton onClick={onRetry}>
{i18n.t('Try again')}
</UIButton>
</div>
)}
<button
className="drawerToggle"
onClick={this.toggleTechInfoDrawer}
>
{this.state.drawerOpen
? i18n.t('Hide technical details')
: i18n.t('Show technical details')}
</div>
</button>
<div
className={
this.state.drawerOpen
? 'drawerVisible'
: 'drawerHidden'
}
className={cx('drawer', {
hidden: !this.state.drawerOpen,
})}
>
<div className="errorIntro">
{translatedErrorHeading}
<br />
{i18n.t(
'The following information may be requested by technical support.'
)}
</div>
<div className="errorDetails">
{[
replaceNewlinesWithBreaks(
this.state.error.stack +
'\n---' +
this.state.errorInfo.componentStack
),
]}
<p>{translatedErrorHeading}</p>
<p>
{i18n.t(
'The following information may be requested by technical support.'
)}
</p>
<UIButton onClick={this.handleCopyErrorDetails}>
{i18n.t(
'Copy technical details to clipboard'
)}
</UIButton>
</div>
<pre
className="errorDetails"
ref={this.errorDetailsRef}
>
{`${this.state.error}\n`}
{this.state.error.stack}
{this.state.errorInfo.componentStack}
</pre>
</div>
</div>
</div>
Expand Down
34 changes: 21 additions & 13 deletions adapter/src/components/styles/ErrorBoundary.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ const bgColor = '#F4F6F8',
iconColor = '#B0BEC5',
primaryTextColor = '#000000',
secondaryTextColor = '#494949',
errorColor = 'red'
errorColor = '#D32F2F',
grey050 = '#FBFCFD'

export default css`
.mask {
min-height: 480px;
height: 100%;
width: 100%;

Expand All @@ -18,10 +20,6 @@ export default css`
background-color: ${bgColor};

display: flex;

min-width: 640px;
min-height: 480px;

align-items: center;
justify-content: center;
}
Expand All @@ -48,6 +46,8 @@ export default css`

.message {
font-size: 24px;
font-weight: normal;
margin-top: 0;
margin-bottom: 24px;
}

Expand All @@ -61,32 +61,40 @@ export default css`
text-decoration: underline;
cursor: pointer;
margin-bottom: 12px;
background: none;
border: none;
}

.drawerVisible {
.drawer {
margin: auto;
padding: 8px;
display: block;
height: 150px;
width: 500px;
height: 250px;
width: min(500px, 100%);
overflow: auto;
overflow-y: auto;
background: ${grey050};
border: 1px solid ${secondaryTextColor};
text-align: left;
}

.drawerHidden {
.hidden {
display: none;
}

.errorIntro {
font-size: 12px;
line-height: 1.2;
margin-bottom: 16px;
}

.errorIntro p {
margin-top: 0;
margin-bottom: 4px;
font-size: 14px;
color: ${secondaryTextColor};
margin-bottom: 8px;
font-family: Menlo, Courier, monospace !important;
}

.errorDetails {
white-space: pre-wrap;
font-size: 12px;
line-height: 1.2;
color: ${errorColor};
Expand Down