[User experience] Fix JS error rate (#81512) (#81888)

* Query adjustments for getClientMetrics
* Remove error rate from JS errors section

Author: Kerry350

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/js_errors.ts

@@ -12,12 +12,7 @@ Then(`it displays list of relevant js errors`, () => {
   cy.get('.euiBasicTable-loading').should('not.be.visible');
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
-  getDataTestSubj('uxJsErrorsTotal').should('have.text', 'Total errors110');
-
-  getDataTestSubj('uxJsErrorRate').should(
-    'have.text',
-    'Error rate100 %Error rate 100 %'
-  );
+  getDataTestSubj('uxJsErrorsTotal').should('have.text', 'Total errors112');
 
   getDataTestSubj('uxJsErrorTable').within(() => {
     cy.get('tr.euiTableRow', DEFAULT_TIMEOUT)

x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx

@@ -15,7 +15,6 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import numeral from '@elastic/numeral';
-import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { useFetcher } from '../../../../hooks/useFetcher';
@@ -102,11 +101,6 @@ export function JSErrors() {
     });
   };
 
-  const errorRate =
-    totalPageViews > 0
-      ? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100
-      : 0;
-
   const totalErrors = data?.totalErrors ?? 0;
 
   return (
@@ -133,20 +127,6 @@ export function JSErrors() {
             isLoading={status !== 'success'}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiStat
-            data-test-subj={'uxJsErrorRate'}
-            titleSize="s"
-            title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
-              defaultMessage: '{errorRate} %',
-              values: {
-                errorRate: errorRate.toFixed(0),
-              },
-            })}
-            description={I18LABELS.errorRate}
-            isLoading={status !== 'success'}
-          />
-        </EuiFlexItem>{' '}
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiBasicTable

x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TRANSACTION_DURATION } from '../../../common/elasticsearch_fieldnames';
 import { getRumPageLoadTransactionsProjection } from '../../projections/rum_page_load_transactions';
 import { mergeProjection } from '../../projections/util/merge_projection';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
@@ -25,32 +24,36 @@ export async function getClientMetrics({
   const projection = getRumPageLoadTransactionsProjection({
     setup,
     urlQuery,
+    checkFetchStartFieldExists: false,
   });
 
   const params = mergeProjection(projection, {
     body: {
       size: 0,
+      track_total_hits: true,
       aggs: {
-        pageViews: {
-          value_count: {
-            field: TRANSACTION_DURATION,
+        hasFetchStartField: {
+          filter: {
+            exists: { field: 'transaction.marks.navigationTiming.fetchStart' },
           },
-        },
-        backEnd: {
-          percentiles: {
-            field: TRANSACTION_TIME_TO_FIRST_BYTE,
-            percents: [percentile],
-            hdr: {
-              number_of_significant_value_digits: 3,
+          aggs: {
+            backEnd: {
+              percentiles: {
+                field: TRANSACTION_TIME_TO_FIRST_BYTE,
+                percents: [percentile],
+                hdr: {
+                  number_of_significant_value_digits: 3,
+                },
+              },
             },
-          },
-        },
-        domInteractive: {
-          percentiles: {
-            field: TRANSACTION_DOM_INTERACTIVE,
-            percents: [percentile],
-            hdr: {
-              number_of_significant_value_digits: 3,
+            domInteractive: {
+              percentiles: {
+                field: TRANSACTION_DOM_INTERACTIVE,
+                percents: [percentile],
+                hdr: {
+                  number_of_significant_value_digits: 3,
+                },
+              },
             },
           },
         },
@@ -59,15 +62,16 @@ export async function getClientMetrics({
   });
 
   const { apmEventClient } = setup;
-
   const response = await apmEventClient.search(params);
-  const { backEnd, domInteractive, pageViews } = response.aggregations!;
+  const {
+    hasFetchStartField: { backEnd, domInteractive },
+  } = response.aggregations!;
 
   const pkey = percentile.toFixed(1);
 
   // Divide by 1000 to convert ms into seconds
   return {
-    pageViews,
+    pageViews: { value: response.hits.total.value ?? 0 },
     backEnd: { value: backEnd.values[pkey] || 0 },
     frontEnd: {
       value: (domInteractive.values[pkey] || 0) - (backEnd.values[pkey] || 0),

x-pack/plugins/apm/server/lib/rum_client/get_client_metrics.ts

@@ -20,6 +20,7 @@ export async function getPageViewTrends({
   const projection = getRumPageLoadTransactionsProjection({
     setup,
     urlQuery,
+    checkFetchStartFieldExists: false,
   });
   let breakdownItem: BreakdownItem | null = null;
   if (breakdowns) {

x-pack/plugins/apm/server/lib/rum_client/get_page_view_trends.ts

@@ -17,23 +17,29 @@ import { TRANSACTION_PAGE_LOAD } from '../../common/transaction_types';
 export function getRumPageLoadTransactionsProjection({
   setup,
   urlQuery,
+  checkFetchStartFieldExists = true,
 }: {
   setup: Setup & SetupTimeRange;
   urlQuery?: string;
+  checkFetchStartFieldExists?: boolean;
 }) {
   const { start, end, esFilter } = setup;
 
   const bool = {
     filter: [
       { range: rangeFilter(start, end) },
       { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
-      {
-        // Adding this filter to cater for some inconsistent rum data
-        // not available on aggregated transactions
-        exists: {
-          field: 'transaction.marks.navigationTiming.fetchStart',
-        },
-      },
+      ...(checkFetchStartFieldExists
+        ? [
+            {
+              // Adding this filter to cater for some inconsistent rum data
+              // not available on aggregated transactions
+              exists: {
+                field: 'transaction.marks.navigationTiming.fetchStart',
+              },
+            },
+          ]
+        : []),
       ...(urlQuery
         ? [
             {
@@ -74,7 +80,6 @@ export function getRumErrorsProjection({
     filter: [
       { range: rangeFilter(start, end) },
       { term: { [AGENT_NAME]: 'rum-js' } },
-      { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
       {
         term: {
           [SERVICE_LANGUAGE_NAME]: 'javascript',

x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts

@@ -5045,7 +5045,6 @@
     "xpack.apm.rum.filters.url.noResults": "結果がありません",
     "xpack.apm.rum.jsErrors.errorMessage": "エラーメッセージ",
     "xpack.apm.rum.jsErrors.errorRate": "エラー率",
-    "xpack.apm.rum.jsErrors.errorRateValue": "{errorRate} %",
     "xpack.apm.rum.jsErrors.impactedPageLoads": "影響を受けるページ読み込み数",
     "xpack.apm.rum.jsErrors.totalErrors": "合計エラー数",
     "xpack.apm.rum.userExperienceMetrics": "ユーザーエクスペリエンスメトリック",

x-pack/plugins/translations/translations/ja-JP.json

@@ -5049,7 +5049,6 @@
     "xpack.apm.rum.filters.url.noResults": "没有可用结果",
     "xpack.apm.rum.jsErrors.errorMessage": "错误消息",
     "xpack.apm.rum.jsErrors.errorRate": "错误率",
-    "xpack.apm.rum.jsErrors.errorRateValue": "{errorRate}%",
     "xpack.apm.rum.jsErrors.impactedPageLoads": "受影响的页面加载",
     "xpack.apm.rum.jsErrors.totalErrors": "错误总数",
     "xpack.apm.rum.userExperienceMetrics": "用户体验指标",