Add error handling to shared components

ui/src/shared/components/AnnotationInput.js

@@ -1,7 +1,9 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import onClickOutside from 'react-onclickoutside'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class AnnotationInput extends Component {
   state = {
     isEditing: false,

ui/src/shared/components/AnnotationPoint.js

@@ -11,7 +11,9 @@ import {ANNOTATION_MIN_DELTA, EDITING} from 'shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
 import AnnotationTooltip from 'shared/components/AnnotationTooltip'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class AnnotationPoint extends React.Component {
   state = {
     isMouseOver: false,

ui/src/shared/components/AnnotationSpan.js

@@ -12,7 +12,9 @@ import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
 import AnnotationTooltip from 'shared/components/AnnotationTooltip'
 import AnnotationWindow from 'shared/components/AnnotationWindow'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class AnnotationSpan extends React.Component {
   state = {
     isDragging: null,

ui/src/shared/components/AnnotationTooltip.js

@@ -7,6 +7,7 @@ import classnames from 'classnames'
 import AnnotationInput from 'src/shared/components/AnnotationInput'
 import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const TimeStamp = ({time}) => (
   <div className="annotation-tooltip--timestamp">
@@ -14,6 +15,7 @@ const TimeStamp = ({time}) => (
   </div>
 )
 
+@ErrorHandling
 class AnnotationTooltip extends Component {
   state = {
     annotation: this.props.annotation,

ui/src/shared/components/Annotations.js

@@ -17,7 +17,9 @@ import {
   mouseLeaveTempAnnotation,
 } from 'src/shared/actions/annotations'
 import {visibleAnnotations} from 'src/shared/annotations/helpers'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class Annotations extends Component {
   render() {
     const {

ui/src/shared/components/AutoRefreshDropdown.js

@@ -4,7 +4,9 @@ import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
 
 import autoRefreshItems from 'shared/data/autoRefreshes'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class AutoRefreshDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/ClickOutside.tsx

@@ -1,11 +1,13 @@
 import React, {PureComponent, ReactElement} from 'react'
 import ReactDOM from 'react-dom'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children: ReactElement<any>
   onClickOutside: () => void
 }
 
+@ErrorHandling
 export class ClickOutside extends PureComponent<Props> {
   public componentDidMount() {
     document.addEventListener('click', this.handleClickOutside, true)

ui/src/shared/components/ClickOutsideInput.js

@@ -2,7 +2,9 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
 import onClickOutside from 'shared/components/OnClickOutside'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class ClickOutsideInput extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/ColorDropdown.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class ColorDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/ColorScaleDropdown.js

@@ -7,7 +7,9 @@ import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {LINE_COLOR_SCALES} from 'src/shared/constants/graphColorPalettes'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class ColorScaleDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/ConfirmButton.tsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   text?: string
@@ -17,6 +18,7 @@ interface State {
   expanded: boolean
 }
 
+@ErrorHandling
 class ConfirmButton extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
     confirmText: 'Confirm',

ui/src/shared/components/ConfirmOrCancel.tsx

@@ -3,6 +3,7 @@ import React, {PureComponent, SFC} from 'react'
 import classnames from 'classnames'
 
 import OnClickOutside from 'src/shared/components/OnClickOutside'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 type Item = object | string
 
@@ -74,6 +75,7 @@ export const Cancel: SFC<CancelProps> = ({
   </button>
 )
 
+@ErrorHandling
 class ConfirmOrCancel extends PureComponent<ConfirmOrCancelProps, {}> {
   public static defaultProps: Partial<ConfirmOrCancelProps> = {
     buttonSize: 'btn-sm',

ui/src/shared/components/Crosshair.js

@@ -4,7 +4,9 @@ import classnames from 'classnames'
 
 import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'shared/constants'
 import {NULL_HOVER_TIME} from 'shared/constants/tableGraph'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class Crosshair extends PureComponent {
   shouldCompnentUpdate(nextProps) {
     return this.props.hoverTime !== nextProps.hoverTime

ui/src/shared/components/CustomTimeRange.js

@@ -4,8 +4,10 @@ import rome from 'rome'
 import moment from 'moment'
 
 import shortcuts from 'shared/data/timeRangeShortcuts'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 const dateFormat = 'YYYY-MM-DD HH:mm'
 
+@ErrorHandling
 class CustomTimeRange extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/CustomTimeRangeDropdown.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import CustomTimeRange from 'src/shared/components/CustomTimeRange'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface State {
   expanded: boolean
@@ -17,6 +18,7 @@ interface Props {
   onApplyTimeRange: () => void
 }
 
+@ErrorHandling
 class CustomTimeRangeDropdown extends PureComponent<Props, State> {
   constructor(props) {
     super(props)

ui/src/shared/components/CustomTimeRangeOverlay.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import OnClickOutside from 'react-onclickoutside'
 
 import CustomTimeRange from 'shared/components/CustomTimeRange'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class CustomTimeRangeOverlay extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/DatabaseDropdown.js

@@ -4,8 +4,10 @@ import Dropdown from 'shared/components/Dropdown'
 
 import {showDatabases} from 'shared/apis/metaQuery'
 import parsers from 'shared/parsing'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 const {databases: showDatabasesParser} = parsers
 
+@ErrorHandling
 class DatabaseDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/DatabaseList.tsx

@@ -12,6 +12,7 @@ import showRetentionPoliciesParser from 'src/shared/parsing/showRetentionPolicie
 
 import DatabaseListItem from 'src/shared/components/DatabaseListItem'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface DatabaseListProps {
   query: Query
@@ -26,6 +27,7 @@ interface DatabaseListState {
 
 const {shape} = PropTypes
 
+@ErrorHandling
 class DatabaseList extends PureComponent<DatabaseListProps, DatabaseListState> {
   public static contextTypes = {
     source: shape({

ui/src/shared/components/Dropdown.js

@@ -5,7 +5,9 @@ import OnClickOutside from 'shared/components/OnClickOutside'
 import DropdownMenu, {DropdownMenuEmpty} from 'shared/components/DropdownMenu'
 import DropdownInput from 'shared/components/DropdownInput'
 import DropdownHead from 'shared/components/DropdownHead'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 export class Dropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/Dygraph.js

@@ -24,12 +24,14 @@ import {
   CHAR_PIXELS,
   barPlotter,
 } from 'src/shared/graphs/helpers'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {getLineColorsHexes} from 'src/shared/constants/graphColorPalettes'
 const {LINEAR, LOG, BASE_10, BASE_2} = AXES_SCALE_OPTIONS
 
 import {colorsStringSchema} from 'shared/schemas'
 
+@ErrorHandling
 class Dygraph extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/DygraphLegend.js

@@ -5,7 +5,9 @@ import classnames from 'classnames'
 import uuid from 'uuid'
 
 import {makeLegendStyles, removeMeasurement} from 'shared/graphs/helpers'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DygraphLegend extends Component {
   state = {
     legend: {

ui/src/shared/components/FancyScrollbar.js

@@ -2,7 +2,9 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {Scrollbars} from 'react-custom-scrollbars'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class FancyScrollbar extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/FieldList.js

@@ -14,7 +14,9 @@ import {
   getFieldsWithName,
   getFuncsByFieldName,
 } from 'shared/reducers/helpers/fields'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class FieldList extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/FillQuery.js

@@ -5,7 +5,9 @@ import Dropdown from 'shared/components/Dropdown'
 import {NULL_STRING, NUMBER} from 'shared/constants/queryFillOptions'
 
 import queryFills from 'shared/data/queryFills'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class FillQuery extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/FunctionSelector.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import _ from 'lodash'
 import {INFLUXQL_FUNCTIONS} from 'src/data_explorer/constants'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class FunctionSelector extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/Gauge.js

@@ -11,7 +11,9 @@ import {
 } from 'shared/constants/thresholds'
 
 import {colorsStringSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class Gauge extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/GaugeChart.tsx

@@ -6,6 +6,7 @@ import _ from 'lodash'
 import {DEFAULT_GAUGE_COLORS} from 'src/shared/constants/thresholds'
 import {stringifyColorValues} from 'src/shared/constants/colorOperations'
 import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'src/shared/constants'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Color {
   type: string
@@ -30,6 +31,7 @@ interface Props {
   }
 }
 
+@ErrorHandling
 class GaugeChart extends PureComponent<Props> {
   public static defaultProps: Partial<Props> = {
     colors: stringifyColorValues(DEFAULT_GAUGE_COLORS),

ui/src/shared/components/InfiniteScroll.js

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {Scrollbars} from 'react-custom-scrollbars'
 import _ from 'lodash'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const {arrayOf, number, shape, string} = PropTypes
 
+@ErrorHandling
 class InfiniteScroll extends Component {
   // Cache values from Scrollbars events that need to be independent of render
   // Should not be setState as need not trigger a re-render

ui/src/shared/components/InputClickToEdit.tsx

@@ -1,4 +1,5 @@
 import React, {ChangeEvent, KeyboardEvent, PureComponent} from 'react'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   wrapperClass: string
@@ -16,6 +17,7 @@ interface State {
   initialValue: string
 }
 
+@ErrorHandling
 class InputClickToEdit extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
     tabIndex: 0,

ui/src/shared/components/Layout.js

@@ -9,6 +9,7 @@ import {IS_STATIC_LEGEND} from 'src/shared/constants'
 import _ from 'lodash'
 
 import {colorsStringSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const getSource = (cell, source, sources, defaultSource) => {
   const s = _.get(cell, ['queries', '0', 'source'], null)
@@ -19,6 +20,7 @@ const getSource = (cell, source, sources, defaultSource) => {
   return sources.find(src => src.links.self === s) || defaultSource
 }
 
+@ErrorHandling
 class LayoutState extends Component {
   state = {
     celldata: [],

ui/src/shared/components/LayoutCell.js

@@ -10,7 +10,9 @@ import {notify} from 'src/shared/actions/notifications'
 import {notifyCSVDownloadFailed} from 'src/shared/copy/notifications'
 import {dashboardtoCSV} from 'shared/parsing/resultsToCSV'
 import download from 'src/external/download.js'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class LayoutCell extends Component {
   handleDeleteCell = cell => () => {
     this.props.onDeleteCell(cell)

ui/src/shared/components/LayoutCellMenu.js

@@ -16,7 +16,9 @@ import {
   editingAnnotation,
   dismissEditingAnnotation,
 } from 'src/shared/actions/annotations'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class LayoutCellMenu extends Component {
   state = {
     subMenuIsOpen: false,

ui/src/shared/components/LayoutRenderer.js

@@ -15,9 +15,11 @@ import {
   LAYOUT_MARGIN,
   DASHBOARD_LAYOUT_ROW_HEIGHT,
 } from 'shared/constants'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const GridLayout = WidthProvider(ReactGridLayout)
 
+@ErrorHandling
 class LayoutRenderer extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/LineGraph.js

@@ -7,7 +7,9 @@ import SingleStat from 'src/shared/components/SingleStat'
 import timeSeriesToDygraph from 'utils/timeSeriesTransformers'
 
 import {colorsStringSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class LineGraph extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/LineGraphColorSelector.js

@@ -7,7 +7,9 @@ import ColorScaleDropdown from 'shared/components/ColorScaleDropdown'
 
 import {updateLineColors} from 'src/dashboards/actions/cellEditorOverlay'
 import {colorsStringSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class LineGraphColorSelector extends Component {
   handleSelectColors = colorScale => {
     const {handleUpdateLineColors} = this.props

ui/src/shared/components/MeasurementList.tsx

@@ -11,6 +11,7 @@ import {Query, Source} from 'src/types'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import MeasurementListFilter from 'src/shared/components/MeasurementListFilter'
 import MeasurementListItem from 'src/shared/components/MeasurementListItem'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   query: Query
@@ -29,6 +30,7 @@ interface State {
 
 const {shape} = PropTypes
 
+@ErrorHandling
 class MeasurementList extends PureComponent<Props, State> {
   public static contextTypes = {
     source: shape({

ui/src/shared/components/MeasurementListItem.tsx

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import classnames from 'classnames'
 import React, {PureComponent, MouseEvent} from 'react'
 import TagList from 'src/shared/components/TagList'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface SourceLinks {
   proxy: string
@@ -44,6 +45,7 @@ interface State {
   isOpen: boolean
 }
 
+@ErrorHandling
 class MeasurementListItem extends PureComponent<Props, State> {
   constructor(props) {
     super(props)

ui/src/shared/components/MenuTooltipButton.js

@@ -2,7 +2,9 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import OnClickOutside from 'react-onclickoutside'
 import classnames from 'classnames'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class MenuTooltipButton extends Component {
   state = {
     expanded: false,

ui/src/shared/components/MultiSelectDBDropdown.js

@@ -5,7 +5,9 @@ import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery'
 import showDatabasesParser from 'shared/parsing/showDatabases'
 import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class MultiSelectDBDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/MultiSelectDropdown.js

@@ -7,6 +7,7 @@ import _ from 'lodash'
 import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const labelText = ({localSelectedItems, isOpen, label}) => {
   if (localSelectedItems.length) {
@@ -25,6 +26,7 @@ const labelText = ({localSelectedItems, isOpen, label}) => {
   return 'None'
 }
 
+@ErrorHandling
 class MultiSelectDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/NewAnnotation.js

@@ -10,7 +10,9 @@ import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
 
 import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'shared/constants'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class NewAnnotation extends Component {
   state = {
     isMouseOver: false,

ui/src/shared/components/Notification.js

@@ -8,7 +8,9 @@ import classnames from 'classnames'
 import {dismissNotification as dismissNotificationAction} from 'shared/actions/notifications'
 
 import {NOTIFICATION_TRANSITION} from 'shared/constants/index'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class Notification extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/OptIn.js

@@ -5,7 +5,9 @@ import classnames from 'classnames'
 import uuid from 'uuid'
 
 import ClickOutsideInput from 'shared/components/ClickOutsideInput'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class OptIn extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/ResizeContainer.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import ResizeHandle from 'shared/components/ResizeHandle'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const maximumNumChildren = 2
 const defaultMinTopHeight = 200
@@ -10,6 +11,7 @@ const defaultMinBottomHeight = 200
 const defaultInitialTopHeight = '50%'
 const defaultInitialBottomHeight = '50%'
 
+@ErrorHandling
 class ResizeContainer extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/SingleStat.js

@@ -8,7 +8,9 @@ import {SMALL_CELL_HEIGHT} from 'shared/graphs/helpers'
 import {DYGRAPH_CONTAINER_V_MARGIN} from 'shared/constants'
 import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
 import {colorsStringSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class SingleStat extends PureComponent {
   render() {
     const {

ui/src/shared/components/SlideToggle.js

@@ -1,6 +1,8 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class SlideToggle extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/StaticLegend.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import uuid from 'uuid'
 import {removeMeasurement} from 'shared/graphs/helpers'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const staticLegendItemClassname = (visibilities, i, hoverEnabled) => {
   if (visibilities.length) {
@@ -15,6 +16,7 @@ const staticLegendItemClassname = (visibilities, i, hoverEnabled) => {
   return 'static-legend--item'
 }
 
+@ErrorHandling
 class StaticLegend extends Component {
   constructor(props) {
     super(props)

ui/src/shared/components/TagInput.tsx

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'
 import _ from 'lodash'
 
 import Tags from 'src/shared/components/Tags'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Item {
   text?: string
@@ -15,6 +16,7 @@ interface Props {
   disableTest: () => void
 }
 
+@ErrorHandling
 class TagInput extends PureComponent<Props> {
   private input: HTMLInputElement
 

ui/src/shared/components/TagList.tsx

@@ -8,6 +8,7 @@ import TagListItem from 'src/shared/components/TagListItem'
 import {showTagKeys, showTagValues} from 'src/shared/apis/metaQuery'
 import showTagKeysParser from 'src/shared/parsing/showTagKeys'
 import showTagValuesParser from 'src/shared/parsing/showTagValues'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const {shape} = PropTypes
 
@@ -45,6 +46,7 @@ interface State {
   tags: {}
 }
 
+@ErrorHandling
 class TagList extends PureComponent<Props, State> {
   public static contextTypes = {
     source: shape({

ui/src/shared/components/TagListItem.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import _ from 'lodash'
 import React, {PureComponent, MouseEvent} from 'react'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Tag {
   key: string
@@ -21,6 +22,7 @@ interface State {
   filterText: string
 }
 
+@ErrorHandling
 class TagListItem extends PureComponent<Props, State> {
   constructor(props) {
     super(props)

ui/src/shared/components/Tags.tsx

@@ -2,6 +2,7 @@ import React, {PureComponent, SFC} from 'react'
 import TagsAddButton from 'src/shared/components/TagsAddButton'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 import uuid from 'uuid'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Item {
   text?: string
@@ -38,6 +39,7 @@ interface TagProps {
   onDelete: (item: Item) => void
 }
 
+@ErrorHandling
 class Tag extends PureComponent<TagProps> {
   public render() {
     const {item} = this.props

ui/src/shared/components/TagsAddButton.tsx

@@ -1,7 +1,8 @@
 import React, {PureComponent} from 'react'
+import uuid from 'uuid'
 
 import {ClickOutside} from 'src/shared/components/ClickOutside'
-import uuid from 'uuid'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   items: Item[]
@@ -17,6 +18,7 @@ interface State {
   open: boolean
 }
 
+@ErrorHandling
 class TagsAddButton extends PureComponent<Props, State> {
   constructor(props) {
     super(props)

ui/src/shared/components/ThresholdsList.js

@@ -19,12 +19,14 @@ import {
   MAX_THRESHOLDS,
   THRESHOLD_TYPE_BASE,
 } from 'shared/constants/thresholds'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const formatColor = color => {
   const {hex, name} = color
   return {hex, name}
 }
 
+@ErrorHandling
 class ThresholdsList extends Component {
   handleAddThreshold = () => {
     const {

ui/src/shared/components/ThresholdsListTypeToggle.js

@@ -9,7 +9,9 @@ import {
   THRESHOLD_TYPE_TEXT,
   THRESHOLD_TYPE_BG,
 } from 'shared/constants/thresholds'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class ThresholdsListTypeToggle extends Component {
   handleToggleThresholdsListType = newType => () => {
     const {handleUpdateThresholdsListType} = this.props

ui/src/shared/components/TimeRangeDropdown.js

@@ -9,11 +9,13 @@ import CustomTimeRangeOverlay from 'shared/components/CustomTimeRangeOverlay'
 
 import {timeRanges} from 'shared/data/timeRanges'
 import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const dateFormat = 'YYYY-MM-DD HH:mm'
 const emptyTime = {lower: '', upper: ''}
 const format = t => moment(t.replace(/\'/g, '')).format(dateFormat)
 
+@ErrorHandling
 class TimeRangeDropdown extends Component {
   constructor(props) {
     super(props)