diff options
-rw-r--r-- | app/javascript/flavours/glitch/components/hashtag.js | 49 |
1 files changed, 38 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js index 639d87a1e..24c595ed7 100644 --- a/app/javascript/flavours/glitch/components/hashtag.js +++ b/app/javascript/flavours/glitch/components/hashtag.js @@ -2,10 +2,35 @@ import React from 'react'; import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { FormattedMessage } from 'react-intl'; +import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from './permalink'; import ShortNumber from 'flavours/glitch/components/short_number'; +class SilentErrorBoundary extends React.Component { + + static propTypes = { + children: PropTypes.node, + }; + + state = { + error: false, + }; + + componentDidCatch () { + this.setState({ error: true }); + } + + render () { + if (this.state.error) { + return null; + } + + return this.props.children; + } + +} + /** * Used to render counter of how much people are talking about hashtag * @@ -51,17 +76,19 @@ const Hashtag = ({ hashtag }) => ( </div> <div className='trends__item__sparkline'> - <Sparklines - width={50} - height={28} - data={hashtag - .get('history') - .reverse() - .map((day) => day.get('uses')) - .toArray()} - > - <SparklinesCurve style={{ fill: 'none' }} /> - </Sparklines> + <SilentErrorBoundary> + <Sparklines + width={50} + height={28} + data={hashtag + .get('history') + .reverse() + .map((day) => day.get('uses')) + .toArray()} + > + <SparklinesCurve style={{ fill: 'none' }} /> + </Sparklines> + </SilentErrorBoundary> </div> </div> ); |