[APM] Transaction page throws unhandled exception if transactions doe…

…sn't have `http.request` (#53760) (#53785)

* Making http.request optional

* changing unit test

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.test.tsx

@@ -126,4 +126,31 @@ describe('DetailView', () => {
     expect(wrapper.exists()).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render without http request info', () => {
+    const errorGroup = {
+      occurrencesCount: 10,
+      transaction: undefined,
+      error: {
+        timestamp: {
+          us: 0
+        },
+        http: { response: { status_code: 404 } },
+        url: { full: 'myUrl' },
+        service: { name: 'myService' },
+        user: { id: 'myUserId' },
+        error: { exception: { handled: true } },
+        transaction: { id: 'myTransactionId', sampled: true }
+      } as any
+    };
+    expect(() =>
+      shallow(
+        <DetailView
+          errorGroup={errorGroup}
+          urlParams={{}}
+          location={{} as Location}
+        />
+      )
+    ).not.toThrowError();
+  });
 });

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx

@@ -81,7 +81,7 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
 
   const errorUrl = error.error.page?.url || error.url?.full;
 
-  const method = error.http?.request.method;
+  const method = error.http?.request?.method;
   const status = error.http?.response?.status_code;
 
   return (

x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.test.tsx

@@ -7,12 +7,26 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { TransactionSummary } from './TransactionSummary';
-import { Transaction } from '../../../../typings/es_schemas/ui/Transaction';
 import * as exampleTransactions from './__fixtures__/transactions';
 
 describe('TransactionSummary', () => {
   describe('render', () => {
-    const transaction: Transaction = exampleTransactions.httpOk;
+    const transaction = exampleTransactions.httpOk;
+
+    const props = {
+      errorCount: 0,
+      totalDuration: 0,
+      transaction
+    };
+
+    it('renders', () => {
+      expect(() =>
+        shallow(<TransactionSummary {...props} />)
+      ).not.toThrowError();
+    });
+  });
+  describe('renders RUM transaction without request info', () => {
+    const transaction = exampleTransactions.httpRumOK;
 
     const props = {
       errorCount: 0,

x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx

@@ -28,7 +28,7 @@ const getTransactionResultSummaryItem = (transaction: Transaction) => {
     : transaction.url?.full;
 
   if (url) {
-    const method = transaction.http?.request.method;
+    const method = transaction.http?.request?.method;
     const status = transaction.http?.response?.status_code;
 
     return <HttpInfoSummaryItem method={method} status={status} url={url} />;

x-pack/legacy/plugins/apm/public/components/shared/Summary/__fixtures__/transactions.ts

@@ -25,3 +25,25 @@ export const httpOk: Transaction = {
     duration: { us: 0 }
   }
 };
+
+export const httpRumOK: Transaction = {
+  '@timestamp': '0',
+  agent: { name: 'rum-js', version: '0' },
+  http: {
+    response: { status_code: 200 }
+  },
+  processor: { event: 'transaction', name: 'transaction' },
+  service: { name: 'testServiceName' },
+  timestamp: { us: 0 },
+  trace: { id: 'testTrace' },
+  transaction: {
+    page: {
+      url: 'elastic.co'
+    },
+    name: 'testTransaction',
+    id: 'testId',
+    sampled: false,
+    type: 'testType',
+    duration: { us: 0 }
+  }
+};

x-pack/legacy/plugins/apm/typings/es_schemas/raw/fields/Http.ts

@@ -5,7 +5,7 @@
  */
 
 export interface Http {
-  request: { method: string; [key: string]: unknown };
+  request?: { method: string; [key: string]: unknown };
   response?: { status_code: number; [key: string]: unknown };
   version?: string;
 }