[UX] Fixed error rate, made sure all filters are applied (#79222) (#79721)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: shahzad31

x-pack/plugins/apm/e2e/cypress/integration/csm_dashboard.feature

@@ -9,6 +9,10 @@ Feature: CSM Dashboard
     When a user browses the APM UI application for RUM Data
     Then should have correct client metrics
 
+  Scenario: JS Errors
+    When a user browses the APM UI application for RUM Data
+    Then it displays list of relevant js errors
+
   Scenario: Percentile select
     When the user changes the selected percentile
     Then it displays client metric related to that percentile

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Then } from 'cypress-cucumber-preprocessor/steps';
+import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { getDataTestSubj } from './utils';
+
+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('uxJsErrorTable').within(() => {
+    cy.get('tr.euiTableRow', DEFAULT_TIMEOUT)
+      .eq(0)
+      .invoke('text')
+      .should('eq', 'Error messageTest CaptureErrorImpacted page loads100.0 %');
+  });
+});

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext, useState } from 'react';
+import React, { ReactText, useContext, useState } from 'react';
 import {
   EuiBasicTable,
   EuiFlexItem,
@@ -16,15 +16,23 @@ import {
 } 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';
 import { I18LABELS } from '../translations';
 import { CsmSharedContext } from '../CsmSharedContext';
+import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
+
+interface JSErrorItem {
+  errorMessage: string;
+  errorGroupId: ReactText;
+  count: number;
+}
 
 export function JSErrors() {
   const { urlParams, uiFilters } = useUrlParams();
 
-  const { start, end, serviceName } = urlParams;
+  const { start, end, serviceName, searchTerm } = urlParams;
 
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
 
@@ -37,6 +45,7 @@ export function JSErrors() {
             query: {
               start,
               end,
+              urlQuery: searchTerm || undefined,
               uiFilters: JSON.stringify(uiFilters),
               pageSize: String(pagination.pageSize),
               pageIndex: String(pagination.pageIndex),
@@ -46,30 +55,39 @@ export function JSErrors() {
       }
       return Promise.resolve(null);
     },
-    [start, end, serviceName, uiFilters, pagination]
+    [start, end, serviceName, uiFilters, pagination, searchTerm]
   );
 
   const {
     sharedData: { totalPageViews },
   } = useContext(CsmSharedContext);
 
-  const items = (data?.items ?? []).map(({ errorMessage, count }) => ({
-    errorMessage,
-    percent: i18n.translate('xpack.apm.rum.jsErrors.percent', {
-      defaultMessage: '{pageLoadPercent} %',
-      values: { pageLoadPercent: ((count / totalPageViews) * 100).toFixed(1) },
-    }),
-  }));
-
   const cols = [
     {
       field: 'errorMessage',
       name: I18LABELS.errorMessage,
+      render: (errorMessage: string, item: JSErrorItem) => (
+        <ErrorDetailLink
+          serviceName={serviceName!}
+          errorGroupId={item.errorGroupId as string}
+        >
+          {errorMessage}
+        </ErrorDetailLink>
+      ),
     },
     {
       name: I18LABELS.impactedPageLoads,
-      field: 'percent',
+      field: 'count',
       align: 'right' as const,
+      render: (count: number) => (
+        <FormattedMessage
+          id="xpack.apm.ux.jsErrors.percent"
+          defaultMessage="{pageLoadPercent} %"
+          values={{
+            pageLoadPercent: ((count / totalPageViews) * 100).toFixed(1),
+          }}
+        />
+      ),
     },
   ];
 
@@ -89,6 +107,8 @@ export function JSErrors() {
       ? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100
       : 0;
 
+  const totalErrors = data?.totalErrors ?? 0;
+
   return (
     <>
       <EuiTitle size="xs">
@@ -98,18 +118,24 @@ export function JSErrors() {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiStat
+            data-test-subj={'uxJsErrorsTotal'}
             titleSize="s"
             title={
-              <EuiToolTip content={data?.totalErrors ?? 0}>
-                <>{numeral(data?.totalErrors ?? 0).format('0 a')}</>
-              </EuiToolTip>
+              totalErrors < 1000 ? (
+                totalErrors
+              ) : (
+                <EuiToolTip content={totalErrors}>
+                  <>{numeral(totalErrors).format('0 a')}</>
+                </EuiToolTip>
+              )
             }
             description={I18LABELS.totalErrors}
             isLoading={status !== 'success'}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiStat
+            data-test-subj={'uxJsErrorRate'}
             titleSize="s"
             title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
               defaultMessage: '{errorRate} %',
@@ -124,11 +150,12 @@ export function JSErrors() {
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiBasicTable
+        data-test-subj={'uxJsErrorTable'}
         loading={status !== 'success'}
         responsive={false}
         compressed={true}
         columns={cols}
-        items={items}
+        items={data?.items ?? []}
         onChange={onTableChange}
         pagination={{
           ...pagination,

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

@@ -18,13 +18,16 @@ export async function getJSErrors({
   setup,
   pageSize,
   pageIndex,
+  urlQuery,
 }: {
   setup: Setup & SetupTimeRange;
   pageSize: number;
   pageIndex: number;
+  urlQuery?: string;
 }) {
   const projection = getRumErrorsProjection({
     setup,
+    urlQuery,
   });
 
   const params = mergeProjection(projection, {
@@ -83,9 +86,10 @@ export async function getJSErrors({
     totalErrorPages: totalErrorPages?.value ?? 0,
     totalErrors: response.hits.total.value ?? 0,
     totalErrorGroups: totalErrorGroups?.value ?? 0,
-    items: errors?.buckets.map(({ sample, doc_count: count }) => {
+    items: errors?.buckets.map(({ sample, doc_count: count, key }) => {
       return {
         count,
+        errorGroupId: key,
         errorMessage: (sample.hits.hits[0]._source as {
           error: { exception: Array<{ message: string }> };
         }).error.exception?.[0].message,

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

@@ -63,8 +63,10 @@ export function getRumPageLoadTransactionsProjection({
 
 export function getRumErrorsProjection({
   setup,
+  urlQuery,
 }: {
   setup: Setup & SetupTimeRange;
+  urlQuery?: string;
 }) {
   const { start, end, esFilter: esFilter } = setup;
 
@@ -79,6 +81,17 @@ export function getRumErrorsProjection({
         },
       },
       ...esFilter,
+      ...(urlQuery
+        ? [
+            {
+              wildcard: {
+                'url.full': {
+                  value: `*${urlQuery}*`,
+                },
+              },
+            },
+          ]
+        : []),
     ],
   };
 

x-pack/plugins/apm/server/routes/rum_client.ts

@@ -211,17 +211,19 @@ export const rumJSErrors = createRoute(() => ({
       uiFiltersRt,
       rangeRt,
       t.type({ pageSize: t.string, pageIndex: t.string }),
+      t.partial({ urlQuery: t.string }),
     ]),
   },
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
 
     const {
-      query: { pageSize, pageIndex },
+      query: { pageSize, pageIndex, urlQuery },
     } = context.params;
 
     return getJSErrors({
       setup,
+      urlQuery,
       pageSize: Number(pageSize),
       pageIndex: Number(pageIndex),
     });