[Discover][Traces] Show errors in the context of a trace (#234178)

## Summary


- Introduces `GET /internal/apm/unified_traces/{traceId}/errors`
fetching the unified errors (apm, unprocessed otel)
- Shows errors related to a trace (apm and uprocessed otel errors)
- Fix the error count for the unified waterfall 
- Collapse Logs section by default

### APM errors


https://github.com/user-attachments/assets/808732f5-86c0-4b9e-b5d1-d00a24ead44e


### Otel processed errors  (sending to apm server) 


https://github.com/user-attachments/assets/529d3971-684c-45f0-a975-b2b7ed149f8c


### Otel unprocessed errors


https://github.com/user-attachments/assets/a769394d-ee90-464a-a154-41c1b9c519d4




### How to test it
- Produce any errors (apm, otel, unprocessed errors) 
- Go to discover

 
### Todo
- [ ] tests


### Notes
- apm doesn't support unprocessed errors

---------

Co-authored-by: kibanamachine <[email protected]>

Author: 2 people

src/platform/packages/shared/kbn-apm-synthtrace-client/src/lib/otel_logs/index.ts

@@ -16,6 +16,7 @@ export type OtelLogDocument = Fields &
   Partial<{
     _index?: string;
     trace_id?: string;
+    span_id?: string;
     attributes?: Record<string, unknown>;
     severity_text?: string;
     resource?: {

src/platform/packages/shared/kbn-apm-synthtrace/src/scenarios/many_errors.ts

@@ -41,22 +41,25 @@ const scenario: Scenario<ApmFields> = async (runOptions) => {
         .interval('1m')
         .rate(2000)
         .generator((timestamp, index) => {
-          const severity = severities[index % severities.length];
-          const errorMessage = `${severity}: ${getRandomNameForIndex(index)} ${index}`;
+          const errors = Array.from({ length: 10 }, (_, errorIndex) => {
+            const severity = severities[errorIndex % severities.length];
+            const errorMessage = `${severity}: ${getRandomNameForIndex(index)}`;
+
+            return instance
+              .error({
+                message: errorMessage + ` ${errorIndex}`,
+                type: getExceptionTypeForIndex(index + errorIndex),
+                culprit: 'request (node_modules/@elastic/transport/src/Transport.ts)',
+              })
+              .timestamp(timestamp + 50 * (errorIndex + 1)); // Stagger error timestamps
+          });
+
           return instance
             .transaction({ transactionName })
             .timestamp(timestamp)
             .duration(1000)
             .failure()
-            .errors(
-              instance
-                .error({
-                  message: errorMessage,
-                  type: getExceptionTypeForIndex(index),
-                  culprit: 'request (node_modules/@elastic/transport/src/Transport.ts)',
-                })
-                .timestamp(timestamp + 50)
-            );
+            .errors(...errors);
         });
 
       return withClient(

src/platform/plugins/shared/discover_shared/public/services/discover_features/types.ts

@@ -11,8 +11,9 @@ import type { DataTableRecord } from '@kbn/discover-utils';
 import type { FunctionComponent, PropsWithChildren } from 'react';
 import type { DataGridCellValueElementProps } from '@kbn/unified-data-table';
 import type { Query, TimeRange } from '@kbn/es-query';
-import type { SpanLinks } from '@kbn/apm-types';
+import type { SpanLinks, ErrorsByTraceId } from '@kbn/apm-types';
 import type { ProcessorEvent } from '@kbn/apm-types-shared';
+
 import type { FeaturesRegistry } from '../../../common';
 
 /**
@@ -59,6 +60,19 @@ export interface ObservabilityTracesSpanLinksFeature {
   ) => Promise<SpanLinks>;
 }
 
+export interface ObservabilityTracesFetchErrorsFeature {
+  id: 'observability-traces-fetch-errors';
+  fetchErrorsByTraceId: (
+    params: {
+      traceId: string;
+      docId?: string;
+      start: string;
+      end: string;
+    },
+    signal: AbortSignal
+  ) => Promise<ErrorsByTraceId>;
+}
+
 export interface ObservabilityCreateSLOFeature {
   id: 'observability-create-slo';
   createSLOFlyout: (props: {
@@ -108,6 +122,7 @@ export type DiscoverFeature =
   | ObservabilityCreateSLOFeature
   | ObservabilityLogEventsFeature
   | ObservabilityTracesSpanLinksFeature
+  | ObservabilityTracesFetchErrorsFeature
   | SecuritySolutionFeature;
 
 /**

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/section/index.tsx

@@ -40,6 +40,7 @@ export interface ContentFrameworkSectionProps {
   actions?: Action[];
   children: React.ReactNode;
   'data-test-subj'?: string;
+  initialIsOpen?: boolean;
 }
 
 export function ContentFrameworkSection({
@@ -49,8 +50,9 @@ export function ContentFrameworkSection({
   actions,
   children,
   'data-test-subj': accordionDataTestSubj,
+  initialIsOpen = true,
 }: ContentFrameworkSectionProps) {
-  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(initialIsOpen);
   const renderActions = () => (
     <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center">
       {actions?.map((action, idx) => {
@@ -89,7 +91,7 @@ export function ContentFrameworkSection({
       <EuiAccordion
         data-test-subj={accordionDataTestSubj}
         id={`sectionAccordion-${id}`}
-        initialIsOpen
+        initialIsOpen={isAccordionExpanded}
         onToggle={setIsAccordionExpanded}
         buttonContent={
           <EuiFlexGroup alignItems="center" gutterSize="s">

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/common/constants.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const OPEN_IN_DISCOVER_LABEL = i18n.translate(
+  'unifiedDocViewer.observability.traces.openInDiscoverLinkLabel',
+  {
+    defaultMessage: 'Open in Discover',
+  }
+);
+
+export const OPEN_IN_DISCOVER_LABEL_ARIAL_LABEL = i18n.translate(
+  'unifiedDocViewer.observability.traces.openInDiscoverArialLabel',
+  { defaultMessage: 'Open in discover link' }
+);
+
+export const NOT_AVAILABLE_LABEL = i18n.translate('unifiedDocViewer.observability.traces.na', {
+  defaultMessage: 'N/A',
+});

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/trace_context_log_events/get_esql_query.test.ts renamed to src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/common/create_trace_context_where_clause.test.ts

@@ -7,33 +7,41 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { getEsqlQuery } from './get_esql_query';
+import { createTraceContextWhereClause } from './create_trace_context_where_clause';
 import { from } from '@kbn/esql-composer';
 
 const source = from('foo-*');
 
-describe('getEsqlQuery', () => {
+describe('createTraceContextWhereClause', () => {
   it('returns a where AST node with only traceId', () => {
-    const pipeline = source.pipe(getEsqlQuery({ traceId: 'abc123' }));
+    const pipeline = source.pipe(createTraceContextWhereClause({ traceId: 'abc123' }));
     expect(pipeline.toString()).toEqual('FROM foo-*\n  | WHERE trace.id == "abc123"');
   });
 
   it('returns a pipeline with traceId and spanId', () => {
-    const pipeline = source.pipe(getEsqlQuery({ traceId: 'abc123', spanId: 'span456' }));
+    const pipeline = source.pipe(
+      createTraceContextWhereClause({ traceId: 'abc123', spanId: 'span456' })
+    );
     expect(pipeline.toString()).toEqual(
       'FROM foo-*\n  | WHERE trace.id == "abc123" AND span.id == "span456"'
     );
   });
   it('returns a pipeline with traceId and transactionId', () => {
-    const pipeline = source.pipe(getEsqlQuery({ traceId: 'abc123', transactionId: 'txn789' }));
+    const pipeline = source.pipe(
+      createTraceContextWhereClause({ traceId: 'abc123', transactionId: 'txn789' })
+    );
     expect(pipeline.toString()).toEqual(
       'FROM foo-*\n  | WHERE trace.id == "abc123" AND transaction.id == "txn789"'
     );
   });
 
   it('returns a pipeline with all fields', () => {
     const pipeline = source.pipe(
-      getEsqlQuery({ traceId: 'abc123', spanId: 'span456', transactionId: 'txn789' })
+      createTraceContextWhereClause({
+        traceId: 'abc123',
+        spanId: 'span456',
+        transactionId: 'txn789',
+      })
     );
     expect(pipeline.toString()).toEqual(
       'FROM foo-*\n  | WHERE trace.id == "abc123" AND transaction.id == "txn789" AND span.id == "span456"'

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/trace_context_log_events/get_esql_query.ts renamed to src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/common/create_trace_context_where_clause.ts

@@ -9,7 +9,7 @@
 import { SPAN_ID_FIELD, TRACE_ID_FIELD, TRANSACTION_ID_FIELD } from '@kbn/discover-utils';
 import { where } from '@kbn/esql-composer';
 
-export const getEsqlQuery = ({
+export const createTraceContextWhereClause = ({
   traceId,
   spanId,
   transactionId,

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/errors/errors_table.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1".
+ */
+
+import type { EuiInMemoryTableProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useMemo } from 'react';
+import { ContentFrameworkSection } from '../../../../content_framework/section';
+import { getColumns } from './get_columns';
+import { useFetchErrorsByTraceId } from './use_fetch_errors_by_trace_id';
+import { useDataSourcesContext } from '../../hooks/use_data_sources';
+import { useGetGenerateDiscoverLink } from '../../hooks/use_get_generate_discover_link';
+import { OPEN_IN_DISCOVER_LABEL, OPEN_IN_DISCOVER_LABEL_ARIAL_LABEL } from '../../common/constants';
+import { createTraceContextWhereClause } from '../../common/create_trace_context_where_clause';
+
+export interface Props {
+  traceId: string;
+  docId?: string;
+}
+
+const sorting: EuiInMemoryTableProps['sorting'] = {
+  sort: { field: 'lastSeen', direction: 'desc' as const },
+};
+
+export function ErrorsTable({ traceId, docId }: Props) {
+  const { indexes } = useDataSourcesContext();
+  const { generateDiscoverLink } = useGetGenerateDiscoverLink({ indexPattern: indexes.apm.errors });
+
+  const { loading, error, response } = useFetchErrorsByTraceId({
+    traceId,
+    docId,
+  });
+
+  const { columns, openInDiscoverLink } = useMemo(() => {
+    const cols = getColumns({ traceId, docId, generateDiscoverLink, source: response.source });
+
+    const link = generateDiscoverLink(createTraceContextWhereClause({ traceId, spanId: docId }));
+
+    return { columns: cols, openInDiscoverLink: link };
+  }, [traceId, docId, generateDiscoverLink, response.source]);
+
+  if (loading || (!error && response.traceErrors.length === 0)) {
+    return null;
+  }
+
+  return (
+    <ContentFrameworkSection
+      data-test-subj="unifiedDocViewerErrorsAccordion"
+      id="errorsSection"
+      title={i18n.translate('unifiedDocViewer.observability.traces.docViewerSpanOverview.errors', {
+        defaultMessage: 'Errors',
+      })}
+      description={i18n.translate(
+        'unifiedDocViewer.observability.traces.docViewerSpanOverview.errors.description',
+        { defaultMessage: 'Errors that occurred during this span and their causes' }
+      )}
+      actions={
+        openInDiscoverLink
+          ? [
+              {
+                icon: 'discoverApp',
+                label: OPEN_IN_DISCOVER_LABEL,
+                ariaLabel: OPEN_IN_DISCOVER_LABEL_ARIAL_LABEL,
+                href: openInDiscoverLink,
+                dataTestSubj: 'unifiedDocViewerSpanLinksRefreshButton',
+              },
+            ]
+          : undefined
+      }
+    >
+      <EuiSpacer size="s" />
+      {error ? (
+        <EuiText color="subdued">
+          {i18n.translate('unifiedDocViewer.observability.traces.docViewerSpanOverview.error', {
+            defaultMessage: 'An error happened when trying to fetch data. Please try again',
+          })}
+        </EuiText>
+      ) : (
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexItem>
+            <EuiInMemoryTable
+              responsiveBreakpoint={false}
+              items={response.traceErrors}
+              columns={columns}
+              pagination={{ showPerPageOptions: false, pageSize: 5 }}
+              sorting={sorting}
+              compressed
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </ContentFrameworkSection>
+  );
+}