add error handling

frontend/src/metabase/xray/containers/FieldXray.jsx

@@ -85,14 +85,22 @@ const mapDispatchToProps = {
 class FieldXRay extends Component {
     props: Props
 
+    state = {
+       error: null
+    }
+
     componentDidMount () {
         this.fetchFieldFingerprint()
     }
 
-    fetchFieldFingerprint() {
+    async fetchFieldFingerprint() {
         const { params } = this.props
         const cost = COSTS[params.cost]
-        this.props.fetchFieldFingerPrint(params.fieldId, cost)
+        try {
+            await this.props.fetchFieldFingerPrint(params.fieldId, cost)
+        } catch (error) {
+            this.setState({ error })
+        }
 
     }
 
@@ -104,9 +112,11 @@ class FieldXRay extends Component {
 
     render () {
         const { fingerprint, params } = this.props
+        const { error } = this.state
         return (
                 <LoadingAndErrorWrapper
                     loading={!fingerprint}
+                    error={error}
                     noBackground
                 >
                     { () =>

frontend/src/metabase/xray/containers/SegmentXRay.jsx

@@ -54,14 +54,22 @@ const mapDispatchToProps = {
 class SegmentXRay extends Component {
     props: Props
 
+    state = {
+        error: null
+    }
+
     componentDidMount () {
         this.fetchSegmentFingerPrint()
     }
 
-    fetchSegmentFingerPrint () {
+    async fetchSegmentFingerPrint () {
         const { params } = this.props
         const cost = COSTS[params.cost]
-        this.props.fetchSegmentFingerPrint(params.segmentId, cost)
+        try {
+            await this.props.fetchSegmentFingerPrint(params.segmentId, cost)
+        } catch (error) {
+            this.setState({ error })
+        }
     }
 
     componentDidUpdate (prevProps: Props) {
@@ -72,10 +80,12 @@ class SegmentXRay extends Component {
 
     render () {
         const { constituents, fingerprint, params } = this.props
+        const { error } = this.state
         return (
             <XRayPageWrapper>
                 <LoadingAndErrorWrapper
                     loading={!constituents}
+                    error={error}
                     noBackground
                 >
                     { () =>

frontend/src/metabase/xray/containers/TableXRay.jsx

@@ -50,14 +50,22 @@ const mapDispatchToProps = {
 class TableXRay extends Component {
     props: Props
 
+    state = {
+        error: null
+    }
+
     componentDidMount () {
         this.fetchTableFingerPrint()
     }
 
-    fetchTableFingerPrint () {
+    async fetchTableFingerPrint () {
         const { params } = this.props
         const cost = COSTS[params.cost]
-        this.props.fetchTableFingerPrint(params.tableId, cost)
+        try {
+            await this.props.fetchTableFingerPrint(params.tableId, cost)
+        } catch (error) {
+            this.setState({ error })
+        }
     }
 
     componentDidUpdate (prevProps: Props) {
@@ -68,11 +76,13 @@ class TableXRay extends Component {
 
     render () {
         const { constituents, fingerprint, params } = this.props
+        const { error } = this.state
 
         return (
             <XRayPageWrapper>
                 <LoadingAndErrorWrapper
                     loading={!constituents}
+                    error={error}
                     noBackground
                 >
                     { () =>