From ce4d4826342e43413da0d2785f2e96327a6204ab Mon Sep 17 00:00:00 2001
From: Brandon Farmer <bthesorceror@gmail.com>
Date: Tue, 17 Apr 2018 15:51:50 -0700
Subject: [PATCH] Add error handling to shared components

---
 ui/src/shared/components/AnnotationInput.js          | 2 ++
 ui/src/shared/components/AnnotationPoint.js          | 2 ++
 ui/src/shared/components/AnnotationSpan.js           | 2 ++
 ui/src/shared/components/AnnotationTooltip.js        | 2 ++
 ui/src/shared/components/Annotations.js              | 2 ++
 ui/src/shared/components/AutoRefreshDropdown.js      | 2 ++
 ui/src/shared/components/ClickOutside.tsx            | 2 ++
 ui/src/shared/components/ClickOutsideInput.js        | 2 ++
 ui/src/shared/components/ColorDropdown.js            | 2 ++
 ui/src/shared/components/ColorScaleDropdown.js       | 2 ++
 ui/src/shared/components/ConfirmButton.tsx           | 2 ++
 ui/src/shared/components/ConfirmOrCancel.tsx         | 2 ++
 ui/src/shared/components/Crosshair.js                | 2 ++
 ui/src/shared/components/CustomTimeRange.js          | 2 ++
 ui/src/shared/components/CustomTimeRangeDropdown.tsx | 2 ++
 ui/src/shared/components/CustomTimeRangeOverlay.js   | 2 ++
 ui/src/shared/components/DatabaseDropdown.js         | 2 ++
 ui/src/shared/components/DatabaseList.tsx            | 2 ++
 ui/src/shared/components/Dropdown.js                 | 2 ++
 ui/src/shared/components/Dygraph.js                  | 2 ++
 ui/src/shared/components/DygraphLegend.js            | 2 ++
 ui/src/shared/components/FancyScrollbar.js           | 2 ++
 ui/src/shared/components/FieldList.js                | 2 ++
 ui/src/shared/components/FillQuery.js                | 2 ++
 ui/src/shared/components/FunctionSelector.js         | 2 ++
 ui/src/shared/components/Gauge.js                    | 2 ++
 ui/src/shared/components/GaugeChart.tsx              | 2 ++
 ui/src/shared/components/InfiniteScroll.js           | 2 ++
 ui/src/shared/components/InputClickToEdit.tsx        | 2 ++
 ui/src/shared/components/Layout.js                   | 2 ++
 ui/src/shared/components/LayoutCell.js               | 2 ++
 ui/src/shared/components/LayoutCellMenu.js           | 2 ++
 ui/src/shared/components/LayoutRenderer.js           | 2 ++
 ui/src/shared/components/LineGraph.js                | 2 ++
 ui/src/shared/components/LineGraphColorSelector.js   | 2 ++
 ui/src/shared/components/MeasurementList.tsx         | 2 ++
 ui/src/shared/components/MeasurementListItem.tsx     | 2 ++
 ui/src/shared/components/MenuTooltipButton.js        | 2 ++
 ui/src/shared/components/MultiSelectDBDropdown.js    | 2 ++
 ui/src/shared/components/MultiSelectDropdown.js      | 2 ++
 ui/src/shared/components/NewAnnotation.js            | 2 ++
 ui/src/shared/components/Notification.js             | 2 ++
 ui/src/shared/components/OptIn.js                    | 2 ++
 ui/src/shared/components/ResizeContainer.js          | 2 ++
 ui/src/shared/components/SingleStat.js               | 2 ++
 ui/src/shared/components/SlideToggle.js              | 2 ++
 ui/src/shared/components/StaticLegend.js             | 2 ++
 ui/src/shared/components/TagInput.tsx                | 2 ++
 ui/src/shared/components/TagList.tsx                 | 2 ++
 ui/src/shared/components/TagListItem.tsx             | 2 ++
 ui/src/shared/components/Tags.tsx                    | 2 ++
 ui/src/shared/components/TagsAddButton.tsx           | 4 +++-
 ui/src/shared/components/ThresholdsList.js           | 2 ++
 ui/src/shared/components/ThresholdsListTypeToggle.js | 2 ++
 ui/src/shared/components/TimeRangeDropdown.js        | 2 ++
 55 files changed, 111 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/AnnotationInput.js b/ui/src/shared/components/AnnotationInput.js
index 2c04160e4e..0338bdb7c4 100644
--- a/ui/src/shared/components/AnnotationInput.js
+++ b/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,
diff --git a/ui/src/shared/components/AnnotationPoint.js b/ui/src/shared/components/AnnotationPoint.js
index 98dcfb526d..cdc529d246 100644
--- a/ui/src/shared/components/AnnotationPoint.js
+++ b/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,
diff --git a/ui/src/shared/components/AnnotationSpan.js b/ui/src/shared/components/AnnotationSpan.js
index 5c673bd6b5..aed861a63b 100644
--- a/ui/src/shared/components/AnnotationSpan.js
+++ b/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,
diff --git a/ui/src/shared/components/AnnotationTooltip.js b/ui/src/shared/components/AnnotationTooltip.js
index 481bda39fb..e347cdec2e 100644
--- a/ui/src/shared/components/AnnotationTooltip.js
+++ b/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,
diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.js
index e38d93e840..fdb9665e94 100644
--- a/ui/src/shared/components/Annotations.js
+++ b/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 {
diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js
index 420ea8140b..92f338cd8c 100644
--- a/ui/src/shared/components/AutoRefreshDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/ClickOutside.tsx b/ui/src/shared/components/ClickOutside.tsx
index 3105df2e85..7907a77de4 100644
--- a/ui/src/shared/components/ClickOutside.tsx
+++ b/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)
diff --git a/ui/src/shared/components/ClickOutsideInput.js b/ui/src/shared/components/ClickOutsideInput.js
index 47b573c59c..fb431b0c27 100644
--- a/ui/src/shared/components/ClickOutsideInput.js
+++ b/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)
diff --git a/ui/src/shared/components/ColorDropdown.js b/ui/src/shared/components/ColorDropdown.js
index ddfd5da298..48d6484101 100644
--- a/ui/src/shared/components/ColorDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/ColorScaleDropdown.js b/ui/src/shared/components/ColorScaleDropdown.js
index 66ca74e55d..d82fcc9866 100644
--- a/ui/src/shared/components/ColorScaleDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/ConfirmButton.tsx b/ui/src/shared/components/ConfirmButton.tsx
index a28a6cd1b3..c211b3990f 100644
--- a/ui/src/shared/components/ConfirmButton.tsx
+++ b/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',
diff --git a/ui/src/shared/components/ConfirmOrCancel.tsx b/ui/src/shared/components/ConfirmOrCancel.tsx
index 5d7b1fc367..3d6b68b102 100644
--- a/ui/src/shared/components/ConfirmOrCancel.tsx
+++ b/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',
diff --git a/ui/src/shared/components/Crosshair.js b/ui/src/shared/components/Crosshair.js
index 11d61d2328..4d89ff7427 100644
--- a/ui/src/shared/components/Crosshair.js
+++ b/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
diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index f3aa47874e..606d67961a 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/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)
diff --git a/ui/src/shared/components/CustomTimeRangeDropdown.tsx b/ui/src/shared/components/CustomTimeRangeDropdown.tsx
index 5afb10dd02..2031b4b9e8 100644
--- a/ui/src/shared/components/CustomTimeRangeDropdown.tsx
+++ b/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)
diff --git a/ui/src/shared/components/CustomTimeRangeOverlay.js b/ui/src/shared/components/CustomTimeRangeOverlay.js
index b7c395a9ce..f23c3b2d6d 100644
--- a/ui/src/shared/components/CustomTimeRangeOverlay.js
+++ b/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)
diff --git a/ui/src/shared/components/DatabaseDropdown.js b/ui/src/shared/components/DatabaseDropdown.js
index 2f88d9a22e..bd27c26015 100644
--- a/ui/src/shared/components/DatabaseDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/DatabaseList.tsx b/ui/src/shared/components/DatabaseList.tsx
index 130e6fcf8c..897f98fadb 100644
--- a/ui/src/shared/components/DatabaseList.tsx
+++ b/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({
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js
index 9517c9aa88..bfafc56369 100644
--- a/ui/src/shared/components/Dropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index 06c970333b..15113b21df 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/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)
diff --git a/ui/src/shared/components/DygraphLegend.js b/ui/src/shared/components/DygraphLegend.js
index 781b073aa8..b6ecc7a372 100644
--- a/ui/src/shared/components/DygraphLegend.js
+++ b/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: {
diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js
index 22ac3fe1a3..09bf06663f 100644
--- a/ui/src/shared/components/FancyScrollbar.js
+++ b/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)
diff --git a/ui/src/shared/components/FieldList.js b/ui/src/shared/components/FieldList.js
index b684942174..b7fc0e1073 100644
--- a/ui/src/shared/components/FieldList.js
+++ b/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)
diff --git a/ui/src/shared/components/FillQuery.js b/ui/src/shared/components/FillQuery.js
index d0497deab1..7a1385636f 100644
--- a/ui/src/shared/components/FillQuery.js
+++ b/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)
diff --git a/ui/src/shared/components/FunctionSelector.js b/ui/src/shared/components/FunctionSelector.js
index 3eca8f84aa..7ac586be53 100644
--- a/ui/src/shared/components/FunctionSelector.js
+++ b/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)
diff --git a/ui/src/shared/components/Gauge.js b/ui/src/shared/components/Gauge.js
index 4d1e3b5692..784c67208e 100644
--- a/ui/src/shared/components/Gauge.js
+++ b/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)
diff --git a/ui/src/shared/components/GaugeChart.tsx b/ui/src/shared/components/GaugeChart.tsx
index dc563fa7c5..75656633c6 100644
--- a/ui/src/shared/components/GaugeChart.tsx
+++ b/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),
diff --git a/ui/src/shared/components/InfiniteScroll.js b/ui/src/shared/components/InfiniteScroll.js
index 8d6b9c18fc..ab75fb0cc6 100644
--- a/ui/src/shared/components/InfiniteScroll.js
+++ b/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
diff --git a/ui/src/shared/components/InputClickToEdit.tsx b/ui/src/shared/components/InputClickToEdit.tsx
index 2445d9dbdc..65bf94c6e6 100644
--- a/ui/src/shared/components/InputClickToEdit.tsx
+++ b/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,
diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js
index bac72f5198..684afbc858 100644
--- a/ui/src/shared/components/Layout.js
+++ b/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: [],
diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index bb735cea51..9672e7ff7b 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/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)
diff --git a/ui/src/shared/components/LayoutCellMenu.js b/ui/src/shared/components/LayoutCellMenu.js
index bbb058e795..182fdc7bc1 100644
--- a/ui/src/shared/components/LayoutCellMenu.js
+++ b/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,
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 81ce4c8572..1308bdf4d0 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/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)
diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js
index 0b133ed591..17183c5016 100644
--- a/ui/src/shared/components/LineGraph.js
+++ b/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)
diff --git a/ui/src/shared/components/LineGraphColorSelector.js b/ui/src/shared/components/LineGraphColorSelector.js
index 50ca3c838d..4e7ebacb8a 100644
--- a/ui/src/shared/components/LineGraphColorSelector.js
+++ b/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
diff --git a/ui/src/shared/components/MeasurementList.tsx b/ui/src/shared/components/MeasurementList.tsx
index 77fe9bdd93..e2d63cbf7a 100644
--- a/ui/src/shared/components/MeasurementList.tsx
+++ b/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({
diff --git a/ui/src/shared/components/MeasurementListItem.tsx b/ui/src/shared/components/MeasurementListItem.tsx
index 7dd61867e6..3c410e0c12 100644
--- a/ui/src/shared/components/MeasurementListItem.tsx
+++ b/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)
diff --git a/ui/src/shared/components/MenuTooltipButton.js b/ui/src/shared/components/MenuTooltipButton.js
index cbe5ce26d6..94d100029c 100644
--- a/ui/src/shared/components/MenuTooltipButton.js
+++ b/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,
diff --git a/ui/src/shared/components/MultiSelectDBDropdown.js b/ui/src/shared/components/MultiSelectDBDropdown.js
index 4ba5ed535b..4ac82c5aa7 100644
--- a/ui/src/shared/components/MultiSelectDBDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index 77b954329b..b120a7e296 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/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)
diff --git a/ui/src/shared/components/NewAnnotation.js b/ui/src/shared/components/NewAnnotation.js
index f599196419..98e2b6ebe8 100644
--- a/ui/src/shared/components/NewAnnotation.js
+++ b/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,
diff --git a/ui/src/shared/components/Notification.js b/ui/src/shared/components/Notification.js
index ceb0f118d6..7dc19a9e14 100644
--- a/ui/src/shared/components/Notification.js
+++ b/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)
diff --git a/ui/src/shared/components/OptIn.js b/ui/src/shared/components/OptIn.js
index 265c081351..2160648e7e 100644
--- a/ui/src/shared/components/OptIn.js
+++ b/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)
diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js
index f4ebfc0673..d9aaf53c9b 100644
--- a/ui/src/shared/components/ResizeContainer.js
+++ b/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)
diff --git a/ui/src/shared/components/SingleStat.js b/ui/src/shared/components/SingleStat.js
index 154d9ecce3..4a396dd345 100644
--- a/ui/src/shared/components/SingleStat.js
+++ b/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 {
diff --git a/ui/src/shared/components/SlideToggle.js b/ui/src/shared/components/SlideToggle.js
index d8f2c945d3..bf042b31bc 100644
--- a/ui/src/shared/components/SlideToggle.js
+++ b/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)
diff --git a/ui/src/shared/components/StaticLegend.js b/ui/src/shared/components/StaticLegend.js
index 7de93f177a..5541ae9ebc 100644
--- a/ui/src/shared/components/StaticLegend.js
+++ b/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)
diff --git a/ui/src/shared/components/TagInput.tsx b/ui/src/shared/components/TagInput.tsx
index 225fade3cc..ec20d8363f 100644
--- a/ui/src/shared/components/TagInput.tsx
+++ b/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
 
diff --git a/ui/src/shared/components/TagList.tsx b/ui/src/shared/components/TagList.tsx
index f9792968f7..a4e9905045 100644
--- a/ui/src/shared/components/TagList.tsx
+++ b/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({
diff --git a/ui/src/shared/components/TagListItem.tsx b/ui/src/shared/components/TagListItem.tsx
index ad1ad8c1b5..0ba7c1fb6b 100644
--- a/ui/src/shared/components/TagListItem.tsx
+++ b/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)
diff --git a/ui/src/shared/components/Tags.tsx b/ui/src/shared/components/Tags.tsx
index fd7e1c60a8..130791be43 100644
--- a/ui/src/shared/components/Tags.tsx
+++ b/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
diff --git a/ui/src/shared/components/TagsAddButton.tsx b/ui/src/shared/components/TagsAddButton.tsx
index 7e7c72221e..1a0ab07e9a 100644
--- a/ui/src/shared/components/TagsAddButton.tsx
+++ b/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)
diff --git a/ui/src/shared/components/ThresholdsList.js b/ui/src/shared/components/ThresholdsList.js
index 48645cf4e8..fc925abf41 100644
--- a/ui/src/shared/components/ThresholdsList.js
+++ b/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 {
diff --git a/ui/src/shared/components/ThresholdsListTypeToggle.js b/ui/src/shared/components/ThresholdsListTypeToggle.js
index 459d9f28b9..1a49e5cc0d 100644
--- a/ui/src/shared/components/ThresholdsListTypeToggle.js
+++ b/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
diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js
index 086bc43c7e..eca65d81eb 100644
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/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)