using error callback from datapanel instead

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -35,8 +35,16 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { show, placement, onMouseEnter, onMouseLeave, className, wrapperClassName, renderArrow } = this.props;
-    const { content } = this.props;
+    const {
+      content,
+      show,
+      placement,
+      onMouseEnter,
+      onMouseLeave,
+      className,
+      wrapperClassName,
+      renderArrow,
+    } = this.props;
 
     return (
       <Manager>

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -34,6 +34,7 @@ export interface Props {
   maxDataPoints?: number;
   children: (r: RenderProps) => JSX.Element;
   onDataResponse?: (data: DataQueryResponse) => void;
+  onError: (errorMessage: string) => void;
 }
 
 export interface State {
@@ -94,6 +95,7 @@ export class DataPanel extends Component<Props, State> {
       widthPixels,
       maxDataPoints,
       onDataResponse,
+      onError,
     } = this.props;
 
     if (!isVisible) {
@@ -146,7 +148,9 @@ export class DataPanel extends Component<Props, State> {
     } catch (err) {
       console.log('Loading error', err);
       this.setState({ isFirstLoad: false });
-      throw new Error('Request Error');
+      onError(`Query error
+      status: ${err.status}
+      message: ${err.statusText}`);
     }
   };
 
@@ -169,7 +173,6 @@ export class DataPanel extends Component<Props, State> {
   render() {
     const { queries } = this.props;
     const { loading, isFirstLoad } = this.state;
-
     const panelData = this.getPanelData();
 
     if (isFirstLoad && loading === LoadingState.Loading) {

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -171,6 +171,7 @@ export class PanelChrome extends PureComponent<Props, State> {
             widthPixels={width}
             refreshCounter={refreshCounter}
             onDataResponse={this.onDataResponse}
+            onError={this.onError}
           >
             {({ loading, panelData }) => {
               return this.renderPanelPlugin(loading, panelData, width, height);
@@ -185,7 +186,7 @@ export class PanelChrome extends PureComponent<Props, State> {
 
   render() {
     const { dashboard, panel } = this.props;
-    const { timeInfo } = this.state;
+    const { errorMessage, timeInfo } = this.state;
     const { transparent } = panel;
 
     const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
@@ -206,7 +207,7 @@ export class PanelChrome extends PureComponent<Props, State> {
                 description={panel.description}
                 scopedVars={panel.scopedVars}
                 links={panel.links}
-                error={this.state.errorMessage}
+                error={errorMessage}
               />
               <ErrorBoundary>
                 {({ error, errorInfo }) => {