Standardize init file

app/assets/javascripts/pipelines/pipeline_details_bundle.js

-import Vue from 'vue';
 import createFlash from '~/flash';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import Translate from '~/vue_shared/translate';
-import TestReports from './components/test_reports/test_reports.vue';
 import createDagApp from './pipeline_details_dag';
 import { createPipelinesDetailApp } from './pipeline_details_graph';
 import { createPipelineHeaderApp } from './pipeline_details_header';
 import { apolloProvider } from './pipeline_shared_client';
-import createTestReportsStore from './stores/test_reports';
-
-Vue.use(Translate);
+import { createTestDetails } from './pipeline_test_details';
 
 const SELECTORS = {
   PIPELINE_DETAILS: '.js-pipeline-details-vue',
@@ -19,33 +13,6 @@ const SELECTORS = {
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
-const createTestDetails = () => {
-  const el = document.querySelector(SELECTORS.PIPELINE_TESTS);
-  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
-    el?.dataset || {};
-  const testReportsStore = createTestReportsStore({
-    blobPath,
-    summaryEndpoint,
-    suiteEndpoint,
-  });
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      TestReports,
-    },
-    provide: {
-      emptyStateImagePath,
-      hasTestReport: parseBoolean(hasTestReport),
-    },
-    store: testReportsStore,
-    render(createElement) {
-      return createElement('test-reports');
-    },
-  });
-};
-
 export default async function initPipelineDetailsBundle() {
   const { dataset } = document.querySelector(SELECTORS.PIPELINE_DETAILS);
 
@@ -65,6 +32,27 @@ export default async function initPipelineDetailsBundle() {
     });
   }
 
-  createDagApp(apolloProvider);
-  createTestDetails();
+  try {
+    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading a section of this page.'),
+    });
+  }
+
+  try {
+    createDagApp(apolloProvider);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Needs tab.'),
+    });
+  }
+
+  try {
+    createTestDetails(SELECTORS.PIPELINE_TESTS);
+  } catch {
+    createFlash({
+      message: __('An error occurred while loading the Test Reports tab.'),
+    });
+  }
 }

app/assets/javascripts/pipelines/pipeline_test_details.js

+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import Translate from '~/vue_shared/translate';
+import TestReports from './components/test_reports/test_reports.vue';
+import createTestReportsStore from './stores/test_reports';
+
+Vue.use(Translate);
+
+export const createTestDetails = (selector) => {
+  const el = document.querySelector(selector);
+  const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } =
+    el?.dataset || {};
+  const testReportsStore = createTestReportsStore({
+    blobPath,
+    summaryEndpoint,
+    suiteEndpoint,
+  });
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      TestReports,
+    },
+    provide: {
+      emptyStateImagePath,
+      hasTestReport: parseBoolean(hasTestReport),
+    },
+    store: testReportsStore,
+    render(createElement) {
+      return createElement('test-reports');
+    },
+  });
+};

locale/gitlab.pot

@@ -3698,6 +3698,12 @@ msgstr ""
 msgid "An error occurred while loading merge requests."
 msgstr ""
 
+msgid "An error occurred while loading the Needs tab."
+msgstr ""
+
+msgid "An error occurred while loading the Test Reports tab."
+msgstr ""
+
 msgid "An error occurred while loading the access tokens form, please try again."
 msgstr ""