2020-08-17 21:07:16 +01:00
import React from 'react'
2020-08-17 21:59:29 +01:00
import PropTypes from 'prop-types'
2020-05-01 06:50:27 +01:00
import { FormattedMessage } from 'react-intl'
import {
source _url ,
version ,
} from '../initial_state'
import {
APP _NAME ,
DEFAULT _REL ,
} from '../constants'
import Button from './button'
import DotTextSeperator from './dot_text_seperator'
import Divider from './divider'
import Icon from './icon'
import Text from './text'
2020-04-30 05:34:50 +01:00
2020-08-18 01:57:35 +01:00
class ErrorBoundary extends React . PureComponent {
2019-08-07 06:02:36 +01:00
state = {
hasError : false ,
stackTrace : undefined ,
componentStack : undefined ,
2020-05-01 06:50:27 +01:00
copied : false ,
2019-08-07 06:02:36 +01:00
}
componentDidCatch ( error , info ) {
this . setState ( {
hasError : true ,
stackTrace : error . stack ,
componentStack : info && info . componentStack ,
2020-05-01 06:50:27 +01:00
copied : false ,
2020-02-29 15:42:47 +00:00
} )
2019-08-07 06:02:36 +01:00
}
2020-05-01 06:50:27 +01:00
handleCopyStackTrace = ( ) => {
const { stackTrace } = this . state ;
const textarea = document . createElement ( 'textarea' ) ;
textarea . textContent = stackTrace ;
textarea . style . position = 'fixed' ;
document . body . appendChild ( textarea ) ;
try {
textarea . select ( ) ;
document . execCommand ( 'copy' ) ;
} catch ( e ) {
//
}
document . body . removeChild ( textarea ) ;
this . setState ( { copied : true } ) ;
setTimeout ( ( ) => this . setState ( { copied : false } ) , 700 ) ;
}
2019-08-07 06:02:36 +01:00
render ( ) {
2020-05-01 06:50:27 +01:00
const { hasError , copied } = this . state
2020-02-29 15:42:47 +00:00
if ( ! hasError ) return this . props . children
2019-08-07 06:02:36 +01:00
return (
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . minH100VH , _s . w100PC , _s . aiCenter , _s . jcCenter ] . join ( ' ' ) } >
< div className = { [ _s . d , _s . minH53PX , _s . bgBrand , _s . aiCenter , _s . z3 , _s . top0 , _s . right0 , _s . left0 , _s . posFixed ] . join ( ' ' ) } >
< div className = { [ _s . d , _s . flexRow , _s . saveAreaInsetPT , _s . saveAreaInsetPL , _s . saveAreaInsetPR , _s . w1255PX ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . flexRow ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
2020-08-18 21:49:11 +01:00
< h1 className = { [ _s . d , _s . mr15 ] . join ( ' ' ) } >
< Button href = '/' isText aria - label = 'Gab' className = { [ _s . d , _s . jcCenter , _s . noSelect , _s . noUnderline , _s . h53PX , _s . cursorPointer , _s . px10 , _s . mr15 ] . join ( ' ' ) } >
2020-08-19 01:41:26 +01:00
< Icon id = 'logo' className = { _s . fillWhite } / >
2020-05-01 06:50:27 +01:00
< / B u t t o n >
< / h 1 >
< / d i v >
< / d i v >
< / d i v >
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . maxW640PX , _s . px15 , _s . py10 ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
2020-08-18 21:49:11 +01:00
< Icon id = 'warning' size = '28px' className = { [ _s . d , _s . cSecondary , _s . mb15 ] . join ( ' ' ) } / >
2020-05-01 06:50:27 +01:00
< Text size = 'medium' className = { _s . pt15 } >
< FormattedMessage
id = 'error.unexpected_crash.explanation'
defaultMessage = 'Due to a bug in our code or a browser compatibility issue, this page or feature could not be displayed correctly.'
/ >
< / T e x t >
< Text size = 'medium' className = { _s . mt10 } >
< FormattedMessage
id = 'error.unexpected_crash.next_steps'
defaultMessage = 'Try refreshing the page or trying the action again. If that does not help, you may still be able to use Gab Social through a different browser or native app.'
/ >
< / T e x t >
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . py10 , _s . my10 ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
< Text >
{ APP _NAME } ( { version } )
< / T e x t >
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . flexRow , _s . mt10 , _s . aiCenter ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
< Button
isText
href = { source _url }
rel = { DEFAULT _REL }
target = '_blank'
backgroundColor = 'tertiary'
color = 'primary'
radiusSmall
className = { [ _s . py2 , _s . px10 ] . join ( ' ' ) }
>
< Text color = 'inherit' >
< FormattedMessage
id = 'errors.unexpected_crash.report_issue'
defaultMessage = 'Report issue'
/ >
< / T e x t >
< / B u t t o n >
< DotTextSeperator / >
< Button
isText
backgroundColor = 'tertiary'
color = 'primary'
onClick = { this . handleCopyStackTrace }
radiusSmall
className = { [ _s . ml5 , _s . py2 , _s . px10 ] . join ( ' ' ) }
>
< Text color = 'inherit' >
< FormattedMessage
id = 'errors.unexpected_crash.copy_stacktrace'
2020-06-05 13:40:00 +01:00
defaultMessage = 'Copy error to clipboard'
2020-05-01 06:50:27 +01:00
/ >
< / T e x t >
< / B u t t o n >
< / d i v >
< / d i v >
< Divider / >
2020-08-18 21:49:11 +01:00
< div className = { [ _s . d , _s . flexRow ] . join ( ' ' ) } >
2020-05-01 06:50:27 +01:00
< Button href = '/home' >
< Text align = 'center' color = 'inherit' >
< FormattedMessage
id = 'return_home'
defaultMessage = 'Return Home'
/ >
< / T e x t >
< / B u t t o n >
< / d i v >
2019-08-07 06:02:36 +01:00
< / d i v >
< / d i v >
2020-02-29 15:42:47 +00:00
)
2019-08-07 06:02:36 +01:00
}
}
2020-08-18 01:57:35 +01:00
ErrorBoundary . propTypes = {
children : PropTypes . node ,
}
export default ErrorBoundary