1 files changed, 26 insertions, 8 deletions
diff --git a/app/assets/javascripts/runner/runner_details/runner_details_app.vue b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
index 5d5fa81b851..6557a7834e7 100644
--- a/app/assets/javascripts/runner/runner_details/runner_details_app.vue
+++ b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
@@ -1,20 +1,22 @@
 <script>
+import createFlash from '~/flash';
+import { TYPE_CI_RUNNER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { sprintf } from '~/locale';
 import RunnerTypeAlert from '../components/runner_type_alert.vue';
 import RunnerTypeBadge from '../components/runner_type_badge.vue';
 import RunnerUpdateForm from '../components/runner_update_form.vue';
-import { I18N_DETAILS_TITLE, RUNNER_ENTITY_TYPE } from '../constants';
+import { I18N_DETAILS_TITLE, I18N_FETCH_ERROR } from '../constants';
 import getRunnerQuery from '../graphql/get_runner.query.graphql';
+import { captureException } from '../sentry_utils';
 
 export default {
+  name: 'RunnerDetailsApp',
   components: {
     RunnerTypeAlert,
     RunnerTypeBadge,
     RunnerUpdateForm,
   },
-  i18n: {
-    I18N_DETAILS_TITLE,
-  },
   props: {
     runnerId: {
       type: String,
@@ -31,9 +33,27 @@ export default {
       query: getRunnerQuery,
       variables() {
         return {
-          id: convertToGraphQLId(RUNNER_ENTITY_TYPE, this.runnerId),
+          id: convertToGraphQLId(TYPE_CI_RUNNER, this.runnerId),
         };
       },
+      error(error) {
+        createFlash({ message: I18N_FETCH_ERROR });
+
+        this.reportToSentry(error);
+      },
+    },
+  },
+  computed: {
+    pageTitle() {
+      return sprintf(I18N_DETAILS_TITLE, { runner_id: this.runnerId });
+    },
+  },
+  errorCaptured(error) {
+    this.reportToSentry(error);
+  },
+  methods: {
+    reportToSentry(error) {
+      captureException({ error, component: this.$options.name });
     },
   },
 };
@@ -41,9 +61,7 @@ export default {
 <template>
   <div>
     <h2 class="page-title">
-      {{ sprintf($options.i18n.I18N_DETAILS_TITLE, { runner_id: runnerId }) }}
-
-      <runner-type-badge v-if="runner" :type="runner.runnerType" />
+      {{ pageTitle }} <runner-type-badge v-if="runner" :type="runner.runnerType" />
     </h2>
 
     <runner-type-alert v-if="runner" :type="runner.runnerType" />