update(ErrorMessage): Add trace ID link (#361)

* update(ErrorMessage): Add trace ID link * Use ButtonGroup and small prop Co-authored-by: Tyler Geonetta <tyler.geonetta@airbnb.com>
airbnb · Apr 22, 2020 · 29e6fad · 29e6fad
1 parent 3af3a58
commit 29e6fad
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 13 deletions.
diff --git a/packages/core/src/components/ErrorMessage/index.tsx b/packages/core/src/components/ErrorMessage/index.tsx
@@ -6,6 +6,7 @@ import Spacing from '../Spacing';
 import StatusText from '../StatusText';
 import { ErrorType } from '../../types';
 import Core from '../..';
+import ButtonGroup from '../ButtonGroup';
 
 export function getErrorMessage(error: string | ErrorType, includeCode: boolean = false): string {
   if (typeof error === 'string') {
@@ -25,11 +26,6 @@ export function getErrorMessage(error: string | ErrorType, includeCode: boolean
   return message || '';
 }
 
-// istanbul ignore next
-function createRedirectURL(id: string, url?: string) {
-  return () => window.open(url || Core.settings.errorURL.replace('{{id}}', id), '_blank');
-}
-
 export type ErrorMessageProps = {
   /** An `Error` instance or an API endpoint response. */
   error?: ErrorType;
@@ -57,8 +53,8 @@ export default function ErrorMessage({
 
   const message = subtitle || getErrorMessage(error);
   const code = error.error_code || '';
-  const id = error.error_id || '';
-  const url = error.error_url || '';
+  const errorID = error.error_id || '';
+  const traceID = error.trace_id || '';
 
   if (inline) {
     return <StatusText danger>{message}</StatusText>;
@@ -72,11 +68,31 @@ export default function ErrorMessage({
     >
       {message}
 
-      {id && (
+      {(errorID || traceID) && (
         <Spacing top={1}>
-          <MutedButton inverted onClick={createRedirectURL(id, url)}>
-            <T k="lunar.error.viewDetails" phrase="View error details" />
-          </MutedButton>
+          <ButtonGroup>
+            {errorID && (
+              <MutedButton
+                inverted
+                small
+                openInNewWindow
+                href={error.error_url || Core.settings.errorURL.replace('{{id}}', errorID)}
+              >
+                <T k="lunar.error.viewDetails" phrase="View error details" />
+              </MutedButton>
+            )}
+
+            {traceID && (
+              <MutedButton
+                inverted
+                small
+                openInNewWindow
+                href={Core.settings.traceURL.replace('{{id}}', traceID)}
+              >
+                <T k="lunar.trace.viewDetails" phrase="View trace details" />
+              </MutedButton>
+            )}
+          </ButtonGroup>
         </Spacing>
       )}
     </Alert>

diff --git a/packages/core/src/components/ErrorMessage/story.tsx b/packages/core/src/components/ErrorMessage/story.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ErrorMessage from '.';
+import { ErrorObject } from '../../types';
 
 export default {
   title: 'Core/ErrorMessage',
@@ -31,3 +32,15 @@ export function fromAnApiEndpointError() {
 fromAnApiEndpointError.story = {
   name: 'From an API endpoint error.',
 };
+
+export function fromAnApiEndpointErrorWithTraceID() {
+  // Would be shown for an APIError from airbnb-api-resource.
+  const error = new Error('Oh noes') as ErrorObject;
+  error.trace_id = 'tRaCeId==';
+
+  return <ErrorMessage error={error} />;
+}
+
+fromAnApiEndpointErrorWithTraceID.story = {
+  name: 'From an API endpoint error with Trace ID.',
+};
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -25,6 +25,7 @@ export type Settings = {
   defaultTimezone?: TimeZone;
   emojiCDN?: EmojiPath;
   errorURL?: string;
+  traceURL?: string;
   fontFaces?: { [fontFamily: string]: FontFace[] };
   fontFamily?: string;
   logger?: Logger | null;
@@ -41,6 +42,7 @@ class Core {
     defaultTimezone: getTimezoneFromClient() || DEFAULT_TIMEZONE,
     emojiCDN: '',
     errorURL: '',
+    traceURL: '',
     fontFaces: {},
     fontFamily:
       '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -21,6 +21,7 @@ export type ErrorObject = {
   error_url?: string;
   debug_info?: { [key: string]: string };
   user_message?: string;
+  trace_id?: string;
 };
 
 export type ErrorType = ErrorObject | (Error & ErrorObject);

diff --git a/packages/core/test/components/ErrorMessage.test.tsx b/packages/core/test/components/ErrorMessage.test.tsx
@@ -6,8 +6,14 @@ import MutedButton from '../../src/components/MutedButton';
 import ErrorMessage, { getErrorMessage } from '../../src/components/ErrorMessage';
 import StatusText from '../../src/components/StatusText';
 import { ErrorObject } from '../../src/types';
+import Core from '../../src';
 
 describe('getErrorMessage()', () => {
+  beforeAll(() => {
+    Core.settings.errorURL = 'http://error-url-test.com/{{id}}';
+    Core.settings.traceURL = 'http://trace-url-test.com/{{id}}';
+  });
+
   it('returns empty string for no message', () => {
     expect(getErrorMessage({})).toBe('');
   });
@@ -183,7 +189,9 @@ describe('<ErrorMessage />', () => {
         .find(MutedButton)
         .contains(<T k="lunar.error.viewDetails" phrase="View error details" />),
     ).toBe(true);
-    expect(typeof wrapper.find(Alert).find(MutedButton).prop('onClick')).toBe('function');
+    expect(wrapper.find(Alert).find(MutedButton).prop('href')).toBe(
+      'http://error-url-test.com/ABC',
+    );
   });
 
   it('renders a button if an error instance containing an error ID is passed', () => {
@@ -211,6 +219,43 @@ describe('<ErrorMessage />', () => {
         .find(MutedButton)
         .contains(<T k="lunar.error.viewDetails" phrase="View error details" />),
     ).toBe(true);
-    expect(typeof wrapper.find(Alert).find(MutedButton).prop('onClick')).toBe('function');
+    expect(wrapper.find(Alert).find(MutedButton).prop('href')).toBe(
+      'http://error-url-test.com/ABC',
+    );
+  });
+
+  it('renders a button if an trace ID is passed', () => {
+    const error = new Error('Whatever') as ErrorObject; // Satisfy TS.
+
+    const wrapper = shallow(
+      <ErrorMessage
+        error={{
+          error_message: 'Failure',
+        }}
+      />,
+    );
+
+    expect(
+      wrapper
+        .find(Alert)
+        .find(MutedButton)
+        .contains(<T k="lunar.trace.viewDetails" phrase="View trace details" />),
+    ).toBe(false);
+
+    error.trace_id = 'tRaCiD1337==';
+
+    wrapper.setProps({
+      error,
+    });
+
+    expect(
+      wrapper
+        .find(Alert)
+        .find(MutedButton)
+        .contains(<T k="lunar.trace.viewDetails" phrase="View trace details" />),
+    ).toBe(true);
+    expect(wrapper.find(Alert).find(MutedButton).prop('href')).toBe(
+      'http://trace-url-test.com/tRaCiD1337==',
+    );
   });
 });