DashboardScene: Fix broken error handling and error rendering (#93680)

public/app/features/dashboard-scene/pages/DashboardScenePage.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo } from 'react';
 
 import { PageLayoutType } from '@grafana/data';
 import { UrlSyncContextProvider } from '@grafana/scenes';
+import { Alert, Box } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -68,9 +69,15 @@ export function DashboardScenePage({ match, route, queryParams, history }: Props
 
   if (!dashboard) {
     return (
-      <Page layout={PageLayoutType.Canvas} data-testid={'dashboard-scene-page'}>
+      <Page navId="dashboards/browse" layout={PageLayoutType.Canvas} data-testid={'dashboard-scene-page'}>
-        {isLoading && <PageLoader />}
+        <Box paddingY={4} display="flex" direction="column" alignItems="center">
-        {loadError && <h2>{loadError}</h2>}
+          {isLoading && <PageLoader />}
+          {loadError && (
+            <Alert title="Dashboard failed to load" severity="error" data-testid="dashboard-not-found">
+              {loadError}
+            </Alert>
+          )}
+        </Box>
       </Page>
     );
   }

public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.test.ts

@@ -35,7 +35,7 @@ describe('DashboardScenePageStateManager', () => {
       const loader = new DashboardScenePageStateManager({});
       await loader.loadDashboard({ uid: 'fake-dash', route: DashboardRoutes.Normal });
 
-      expect(loader.state.dashboard).toBeDefined();
+      expect(loader.state.dashboard).toBeUndefined();
       expect(loader.state.isLoading).toBe(false);
       expect(loader.state.loadError).toBe('Dashboard not found');
     });
@@ -107,8 +107,7 @@ describe('DashboardScenePageStateManager', () => {
         const loader = new DashboardScenePageStateManager({});
         await loader.loadDashboard({ uid: '', route: DashboardRoutes.Home });
 
-        expect(loader.state.dashboard).toBeDefined();
+        expect(loader.state.dashboard).toBeUndefined();
-        expect(loader.state.dashboard?.state.title).toEqual('Failed to load home dashboard');
         expect(loader.state.loadError).toEqual('Failed to load home dashboard');
       });
     });

public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts

@@ -1,13 +1,11 @@
 import { locationUtil } from '@grafana/data';
 import { config, getBackendSrv, isFetchError, locationService } from '@grafana/runtime';
-import { defaultDashboard } from '@grafana/schema';
 import { StateManagerBase } from 'app/core/services/StateManagerBase';
 import { default as localStorageStore } from 'app/core/store';
 import { getMessageFromError } from 'app/core/utils/errors';
 import { startMeasure, stopMeasure } from 'app/core/utils/metrics';
 import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { DashboardModel } from 'app/features/dashboard/state';
 import { emitDashboardViewEvent } from 'app/features/dashboard/state/analyticsProcessor';
 import {
   DASHBOARD_FROM_LS_KEY,
@@ -20,10 +18,7 @@ import { DashboardDTO, DashboardRoutes } from 'app/types';
 import { PanelEditor } from '../panel-edit/PanelEditor';
 import { DashboardScene } from '../scene/DashboardScene';
 import { buildNewDashboardSaveModel } from '../serialization/buildNewDashboardSaveModel';
-import {
+import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
-  createDashboardSceneFromDashboardModel,
-  transformSaveModelToScene,
-} from '../serialization/transformSaveModelToScene';
 import { restoreDashboardStateFromLocalStorage } from '../utils/dashboardSessionState';
 
 import { updateNavModel } from './utils';
@@ -203,11 +198,7 @@ export class DashboardScenePageStateManager extends StateManagerBase<DashboardSc
       }
     } catch (err) {
       const msg = getMessageFromError(err);
-      this.setState({
+      this.setState({ isLoading: false, loadError: msg });
-        isLoading: false,
-        loadError: msg,
-        dashboard: getErrorScene(msg),
-      });
     }
   }
 
@@ -318,59 +309,3 @@ export function getDashboardScenePageStateManager(): DashboardScenePageStateMana
 
   return stateManager;
 }
-
-function getErrorScene(msg: string) {
-  const dto: DashboardDTO = {
-    dashboard: {
-      ...defaultDashboard,
-      uid: 'error-dash',
-      title: msg,
-      annotations: {
-        list: [
-          {
-            builtIn: 1,
-            datasource: {
-              type: 'grafana',
-              uid: '-- Grafana --',
-            },
-            enable: false,
-            hide: true,
-            iconColor: 'rgba(0, 211, 255, 1)',
-            name: 'Annotations & Alerts',
-            type: 'dashboard',
-          },
-        ],
-      },
-
-      panels: [
-        {
-          fieldConfig: {
-            defaults: {},
-            overrides: [],
-          },
-          gridPos: {
-            h: 6,
-            w: 12,
-            x: 7,
-            y: 0,
-          },
-          id: 1,
-          options: {
-            code: {
-              language: 'plaintext',
-              showLineNumbers: false,
-              showMiniMap: false,
-            },
-            content: `<br/><br/><center><h1>${msg}</h1></center>`,
-            mode: 'html',
-          },
-          title: '',
-          transparent: true,
-          type: 'text',
-        },
-      ],
-    },
-    meta: { canSave: false, canEdit: false },
-  };
-  return createDashboardSceneFromDashboardModel(new DashboardModel(dto.dashboard, dto.meta), dto.dashboard);
-}