LogBox - Display errors for notifications and inspector

Summary:
This diff adds and displays errors in LogBox. We will now toast both warnings and errors, open errors for inspection, and allow paginating through errors and warnings.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18091519

fbshipit-source-id: c155969dc505de5cfb0e95bb5a8221b9f8cfe4f7

Libraries/LogBox/UI/LogBoxContainer.js

@@ -30,13 +30,6 @@ function LogBoxContainer(props: Props): React.Node {
 
   const logs = Array.from(props.logs);
 
-  function getVisibleLog() {
-    // TODO: currently returns the newest log but later will need to return
-    // the newest log of the highest level. For example, we want to show
-    // the latest error message even if there are newer warnings.
-    return logs[logs.length - 1];
-  }
-
   function handleInspectorDismissAll() {
     props.onDismissAll();
   }
@@ -59,8 +52,12 @@ function LogBoxContainer(props: Props): React.Node {
     setSelectedLog(null);
   }
 
-  function handleRowPress(index: number) {
+  function openLog(log: LogBoxLog) {
-    setSelectedLog(logs.length - 1);
+    let index = logs.length - 1;
+    while (index > 0 && logs[index] !== log) {
+      index -= 1;
+    }
+    setSelectedLog(index);
   }
 
   if (selectedLogIndex != null) {
@@ -77,20 +74,42 @@ function LogBoxContainer(props: Props): React.Node {
     );
   }
 
-  return logs.length === 0 ? null : (
+  if (logs.length === 0) {
+    return null;
+  }
+
+  const warnings = logs.filter(log => log.level === 'warn');
+  const errors = logs.filter(log => log.level === 'error');
+  return (
     <View style={styles.list}>
-      <View style={styles.toast}>
+      {warnings.length > 0 && (
-        <LogBoxLogNotification
+        <View style={styles.toast}>
-          log={getVisibleLog()}
+          <LogBoxLogNotification
-          level="warn"
+            log={warnings[warnings.length - 1]}
-          totalLogCount={logs.length}
+            level="warn"
-          onPressOpen={handleRowPress}
+            totalLogCount={warnings.length}
-          onPressList={() => {
+            onPressOpen={() => openLog(warnings[warnings.length - 1])}
-            /* TODO: open log list */
+            onPressList={() => {
-          }}
+              /* TODO: open log list */
-          onPressDismiss={handleInspectorDismissAll}
+            }}
-        />
+            onPressDismiss={handleInspectorDismissAll}
-      </View>
+          />
+        </View>
+      )}
+      {errors.length > 0 && (
+        <View style={styles.toast}>
+          <LogBoxLogNotification
+            log={errors[errors.length - 1]}
+            level="error"
+            totalLogCount={errors.length}
+            onPressOpen={() => openLog(errors[errors.length - 1])}
+            onPressList={() => {
+              /* TODO: open log list */
+            }}
+            onPressDismiss={handleInspectorDismissAll}
+          />
+        </View>
+      )}
       <SafeAreaView style={styles.safeArea} />
     </View>
   );
@@ -105,6 +124,7 @@ const styles = StyleSheet.create({
   },
   toast: {
     borderRadius: 8,
+    marginBottom: 5,
     overflow: 'hidden',
   },
   safeArea: {

Libraries/LogBox/UI/LogBoxInspector.js

@@ -55,6 +55,7 @@ class LogBoxInspector extends React.Component<Props> {
           onSelectIndex={this._handleSelectIndex}
           selectedIndex={selectedIndex}
           total={logs.length}
+          level={log.level}
         />
         <LogBoxInspectorBody
           log={log}
@@ -113,6 +114,7 @@ function LogBoxInspectorBody(props) {
           collapsed={collapsed}
           onPress={() => setCollapsed(!collapsed)}
           message={props.log.message}
+          level={props.log.level}
         />
         <ScrollView style={styles.scrollBody}>
           <LogBoxInspectorReactFrames log={props.log} />
@@ -128,6 +130,7 @@ function LogBoxInspectorBody(props) {
         collapsed={collapsed}
         onPress={() => setCollapsed(!collapsed)}
         message={props.log.message}
+        level={props.log.level}
       />
       <LogBoxInspectorReactFrames log={props.log} />
       <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />

Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -20,11 +20,12 @@ import View from '../../Components/View/View';
 import LogBoxImageSource from './LogBoxImageSource';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
-
+import type {LogLevel} from '../Data/LogBoxLog';
 type Props = $ReadOnly<{|
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,
+  level: LogLevel,
 |}>;
 
 function LogBoxInspectorHeader(props: Props): React.Node {
@@ -37,10 +38,11 @@ function LogBoxInspectorHeader(props: Props): React.Node {
       : `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <SafeAreaView style={styles.root}>
+    <SafeAreaView style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={prevIndex < 0}
+          level={props.level}
           image={LogBoxImageSource.chevronLeft}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
@@ -49,6 +51,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
         </View>
         <LogBoxInspectorHeaderButton
           disabled={nextIndex >= props.total}
+          level={props.level}
           image={LogBoxImageSource.chevronRight}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
@@ -61,14 +64,21 @@ function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|
     disabled: boolean,
     image: string,
+    level: LogLevel,
     onPress?: ?() => void,
   |}>,
 ): React.Node {
   return (
     <LogBoxButton
       backgroundColor={{
-        default: LogBoxStyle.getWarningColor(),
+        default:
-        pressed: LogBoxStyle.getWarningDarkColor(),
+          props.level === 'warn'
+            ? LogBoxStyle.getWarningColor()
+            : LogBoxStyle.getErrorColor(),
+        pressed:
+          props.level === 'warn'
+            ? LogBoxStyle.getWarningDarkColor()
+            : LogBoxStyle.getErrorDarkColor(),
       }}
       onPress={props.disabled ? null : props.onPress}
       style={headerStyles.button}>
@@ -99,8 +109,11 @@ const headerStyles = StyleSheet.create({
 });
 
 const styles = StyleSheet.create({
-  root: {
+  warn: {
-    backgroundColor: LogBoxStyle.getWarningColor(1),
+    backgroundColor: LogBoxStyle.getWarningColor(),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(),
   },
   header: {
     flexDirection: 'row',

Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -17,12 +17,13 @@ import View from '../../Components/View/View';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import LogBoxMessage from './LogBoxMessage';
-
+import type {LogLevel} from '../Data/LogBoxLog';
 import type {Message} from '../Data/parseLogBoxLog';
 
 type Props = $ReadOnly<{|
   collapsed: boolean,
   message: Message,
+  level: LogLevel,
   onPress: () => void,
 |}>;
 
@@ -49,7 +50,9 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
   return (
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
-        <Text style={messageStyles.headingText}>Warning</Text>
+        <Text style={[messageStyles.headingText, messageStyles[props.level]]}>
+          {props.level === 'warn' ? 'Warning' : 'Error'}
+        </Text>
         {renderShowMore()}
       </View>
       <Text
@@ -91,13 +94,18 @@ const messageStyles = StyleSheet.create({
     marginBottom: 5,
   },
   headingText: {
-    color: LogBoxStyle.getWarningColor(1),
     flex: 1,
     fontSize: 20,
     fontWeight: '600',
     includeFontPadding: false,
     lineHeight: 28,
   },
+  warn: {
+    color: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    color: LogBoxStyle.getErrorColor(1),
+  },
   messageText: {
     color: LogBoxStyle.getTextColor(0.6),
   },

Libraries/LogBox/UI/LogBoxStyle.js

@@ -34,6 +34,10 @@ export function getErrorColor(opacity?: number): string {
   return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
 }
 
+export function getErrorDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
 export function getLogColor(opacity?: number): string {
   return `rgba(119, 119, 119, ${opacity == null ? 1 : opacity})`;
 }

Libraries/LogBox/UI/__tests__/LogBoxContainer-test.js

@@ -29,7 +29,7 @@ describe('LogBoxContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the latest log', () => {
+  it('should render the latest warning', () => {
     const output = render.shallowRender(
       <LogBoxContainer
         onDismiss={() => {}}
@@ -63,4 +63,74 @@ describe('LogBoxContainer', () => {
 
     expect(output).toMatchSnapshot();
   });
+
+  it('should render the latest error', () => {
+    const output = render.shallowRender(
+      <LogBoxContainer
+        onDismiss={() => {}}
+        onDismissAll={() => {}}
+        logs={
+          new Set([
+            new LogBoxLog(
+              'error',
+              {
+                content: 'Some kind of message',
+                substitutions: [],
+              },
+              [],
+              'Some kind of message',
+              [],
+            ),
+            new LogBoxLog(
+              'error',
+              {
+                content: 'Some kind of message (latest)',
+                substitutions: [],
+              },
+              [],
+              'Some kind of message (latest)',
+              [],
+            ),
+          ])
+        }
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render both an error and warning', () => {
+    const output = render.shallowRender(
+      <LogBoxContainer
+        onDismiss={() => {}}
+        onDismissAll={() => {}}
+        logs={
+          new Set([
+            new LogBoxLog(
+              'warn',
+              {
+                content: 'Some kind of message',
+                substitutions: [],
+              },
+              [],
+              'Some kind of message',
+              [],
+            ),
+            new LogBoxLog(
+              'error',
+              {
+                content: 'Some kind of message (latest)',
+                substitutions: [],
+              },
+              [],
+              'Some kind of message (latest)',
+              [],
+            ),
+          ])
+        }
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
 });

Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js

@@ -28,7 +28,7 @@ const logs = [
     [],
   ),
   new LogBoxLog(
-    'warn',
+    'error',
     {
       content: 'Some kind of message (second)',
       substitutions: [],
@@ -54,7 +54,7 @@ describe('LogBoxContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render first log with selectedIndex 0', () => {
+  it('should render warning with selectedIndex 0', () => {
     const output = render.shallowRender(
       <LogBoxInspector
         onDismiss={() => {}}
@@ -68,7 +68,7 @@ describe('LogBoxContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render second log with selectedIndex 1', () => {
+  it('should render error with selectedIndex 1', () => {
     const output = render.shallowRender(
       <LogBoxInspector
         onDismiss={() => {}}

Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js

@@ -22,6 +22,7 @@ describe('LogBoxInspectorHeader', () => {
         onSelectIndex={() => {}}
         selectedIndex={0}
         total={1}
+        level="warn"
       />,
     );
 
@@ -34,18 +35,33 @@ describe('LogBoxInspectorHeader', () => {
         onSelectIndex={() => {}}
         selectedIndex={1}
         total={2}
+        level="warn"
       />,
     );
 
     expect(output).toMatchSnapshot();
   });
 
-  it('should render two buttons for three total, middle selected', () => {
+  it('should render two buttons for three total, middle selected (warning)', () => {
     const output = render.shallowRender(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}
         total={1}
+        level="warn"
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render two buttons for three total, middle selected (error)', () => {
+    const output = render.shallowRender(
+      <LogBoxInspectorHeader
+        onSelectIndex={() => {}}
+        selectedIndex={0}
+        total={1}
+        level="error"
       />,
     );
 
@@ -58,6 +74,7 @@ describe('LogBoxInspectorHeader', () => {
         onSelectIndex={() => {}}
         selectedIndex={0}
         total={2}
+        level="warn"
       />,
     );
 

Libraries/LogBox/UI/__tests__/LogBoxInspectorMesageHeader-test.js

@@ -17,9 +17,26 @@ const LogBoxInspectorMessageHeader = require('../LogBoxInspectorMessageHeader')
 const render = require('../../../../jest/renderer');
 
 describe('LogBoxInspectorMessageHeader', () => {
+  it('should not render error', () => {
+    const output = render.shallowRender(
+      <LogBoxInspectorMessageHeader
+        level="error"
+        collapsed={false}
+        message={{
+          content: 'Short',
+          substitutions: [],
+        }}
+        onPress={() => {}}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
   it('should not render collapse button for short content', () => {
     const output = render.shallowRender(
       <LogBoxInspectorMessageHeader
+        level="warn"
         collapsed={false}
         message={{
           content: 'Short',
@@ -35,6 +52,7 @@ describe('LogBoxInspectorMessageHeader', () => {
   it('should render "collapse" if expanded', () => {
     const output = render.shallowRender(
       <LogBoxInspectorMessageHeader
+        level="warn"
         collapsed={false}
         message={{content: '#'.repeat(200), substitutions: []}}
         onPress={() => {}}
@@ -47,6 +65,7 @@ describe('LogBoxInspectorMessageHeader', () => {
   it('should render "see more" if collapsed', () => {
     const output = render.shallowRender(
       <LogBoxInspectorMessageHeader
+        level="warn"
         collapsed={true}
         message={{
           content: '#'.repeat(200),

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogBoxContainer should render null with no logs 1`] = `null`;
+exports[`LogBoxContainer should render both an error and warning 1`] = `
-
-exports[`LogBoxContainer should render the latest log 1`] = `
 <View
   style={
     Object {
@@ -17,6 +15,156 @@ exports[`LogBoxContainer should render the latest log 1`] = `
     style={
       Object {
         "borderRadius": 8,
+        "marginBottom": 5,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <LogBoxLogNotification
+      level="warn"
+      log={
+        LogBoxLog {
+          "category": "Some kind of message",
+          "componentStack": Array [],
+          "count": 1,
+          "level": "warn",
+          "message": Object {
+            "content": "Some kind of message",
+            "substitutions": Array [],
+          },
+          "stack": Array [],
+          "symbolicated": Object {
+            "error": null,
+            "stack": null,
+            "status": "NONE",
+          },
+        }
+      }
+      onPressDismiss={[Function]}
+      onPressList={[Function]}
+      onPressOpen={[Function]}
+      totalLogCount={1}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "borderRadius": 8,
+        "marginBottom": 5,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <LogBoxLogNotification
+      level="error"
+      log={
+        LogBoxLog {
+          "category": "Some kind of message (latest)",
+          "componentStack": Array [],
+          "count": 1,
+          "level": "error",
+          "message": Object {
+            "content": "Some kind of message (latest)",
+            "substitutions": Array [],
+          },
+          "stack": Array [],
+          "symbolicated": Object {
+            "error": null,
+            "stack": null,
+            "status": "NONE",
+          },
+        }
+      }
+      onPressDismiss={[Function]}
+      onPressList={[Function]}
+      onPressOpen={[Function]}
+      totalLogCount={1}
+    />
+  </View>
+  <ForwardRef(SafeAreaView)
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`LogBoxContainer should render null with no logs 1`] = `null`;
+
+exports[`LogBoxContainer should render the latest error 1`] = `
+<View
+  style={
+    Object {
+      "bottom": 10,
+      "left": 10,
+      "position": "absolute",
+      "right": 10,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "borderRadius": 8,
+        "marginBottom": 5,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <LogBoxLogNotification
+      level="error"
+      log={
+        LogBoxLog {
+          "category": "Some kind of message (latest)",
+          "componentStack": Array [],
+          "count": 1,
+          "level": "error",
+          "message": Object {
+            "content": "Some kind of message (latest)",
+            "substitutions": Array [],
+          },
+          "stack": Array [],
+          "symbolicated": Object {
+            "error": null,
+            "stack": null,
+            "status": "NONE",
+          },
+        }
+      }
+      onPressDismiss={[Function]}
+      onPressList={[Function]}
+      onPressOpen={[Function]}
+      totalLogCount={2}
+    />
+  </View>
+  <ForwardRef(SafeAreaView)
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`LogBoxContainer should render the latest warning 1`] = `
+<View
+  style={
+    Object {
+      "bottom": 10,
+      "left": 10,
+      "position": "absolute",
+      "right": 10,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "borderRadius": 8,
+        "marginBottom": 5,
         "overflow": "hidden",
       }
     }

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
+exports[`LogBoxContainer should render error with selectedIndex 1 1`] = `
 <View
   style={
     Object {
@@ -11,6 +11,53 @@ exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
   }
 >
   <LogBoxInspectorHeader
+    level="error"
+    onSelectIndex={[Function]}
+    selectedIndex={1}
+    total={2}
+  />
+  <LogBoxInspectorBody
+    log={
+      LogBoxLog {
+        "category": "Some kind of message (second)",
+        "componentStack": Array [],
+        "count": 1,
+        "level": "error",
+        "message": Object {
+          "content": "Some kind of message (second)",
+          "substitutions": Array [],
+        },
+        "stack": Array [],
+        "symbolicated": Object {
+          "error": null,
+          "stack": null,
+          "status": "NONE",
+        },
+      }
+    }
+    onRetry={[Function]}
+  />
+  <LogBoxInspectorFooter
+    onDismiss={[Function]}
+    onMinimize={[Function]}
+  />
+</View>
+`;
+
+exports[`LogBoxContainer should render null with no logs 1`] = `null`;
+
+exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "rgba(255, 255, 255, 1)",
+      "elevation": undefined,
+      "height": "100%",
+    }
+  }
+>
+  <LogBoxInspectorHeader
+    level="warn"
     onSelectIndex={[Function]}
     selectedIndex={0}
     total={2}
@@ -42,48 +89,3 @@ exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
   />
 </View>
 `;
-
-exports[`LogBoxContainer should render null with no logs 1`] = `null`;
-
-exports[`LogBoxContainer should render second log with selectedIndex 1 1`] = `
-<View
-  style={
-    Object {
-      "backgroundColor": "rgba(255, 255, 255, 1)",
-      "elevation": undefined,
-      "height": "100%",
-    }
-  }
->
-  <LogBoxInspectorHeader
-    onSelectIndex={[Function]}
-    selectedIndex={1}
-    total={2}
-  />
-  <LogBoxInspectorBody
-    log={
-      LogBoxLog {
-        "category": "Some kind of message (second)",
-        "componentStack": Array [],
-        "count": 1,
-        "level": "warn",
-        "message": Object {
-          "content": "Some kind of message (second)",
-          "substitutions": Array [],
-        },
-        "stack": Array [],
-        "symbolicated": Object {
-          "error": null,
-          "stack": null,
-          "status": "NONE",
-        },
-      }
-    }
-    onRetry={[Function]}
-  />
-  <LogBoxInspectorFooter
-    onDismiss={[Function]}
-    onMinimize={[Function]}
-  />
-</View>
-`;

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap

@@ -19,6 +19,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
+      level="warn"
       onPress={[Function]}
     />
     <View
@@ -47,6 +48,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
+      level="warn"
       onPress={[Function]}
     />
   </View>
@@ -72,6 +74,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
     <LogBoxInspectorHeaderButton
       disabled={false}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
+      level="warn"
       onPress={[Function]}
     />
     <View
@@ -100,6 +103,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
+      level="warn"
       onPress={[Function]}
     />
   </View>
@@ -125,6 +129,7 @@ exports[`LogBoxInspectorHeader should render one right button for two total, lef
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
+      level="warn"
       onPress={[Function]}
     />
     <View
@@ -153,17 +158,18 @@ exports[`LogBoxInspectorHeader should render one right button for two total, lef
     <LogBoxInspectorHeaderButton
       disabled={false}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
+      level="warn"
       onPress={[Function]}
     />
   </View>
 </ForwardRef(SafeAreaView)>
 `;
 
-exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected 1`] = `
+exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (error) 1`] = `
 <ForwardRef(SafeAreaView)
   style={
     Object {
-      "backgroundColor": "rgba(250, 186, 48, 1)",
+      "backgroundColor": "rgba(243, 83, 105, 1)",
     }
   }
 >
@@ -178,6 +184,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three total, middle
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
+      level="error"
       onPress={[Function]}
     />
     <View
@@ -206,6 +213,62 @@ exports[`LogBoxInspectorHeader should render two buttons for three total, middle
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
+      level="error"
+      onPress={[Function]}
+    />
+  </View>
+</ForwardRef(SafeAreaView)>
+`;
+
+exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (warning) 1`] = `
+<ForwardRef(SafeAreaView)
+  style={
+    Object {
+      "backgroundColor": "rgba(250, 186, 48, 1)",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "height": 44,
+      }
+    }
+  >
+    <LogBoxInspectorHeaderButton
+      disabled={true}
+      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
+      level="warn"
+      onPress={[Function]}
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "rgba(255, 255, 255, 1)",
+            "fontSize": 16,
+            "fontWeight": "600",
+            "includeFontPadding": false,
+            "lineHeight": 20,
+          }
+        }
+      >
+        Log
+      </Text>
+    </View>
+    <LogBoxInspectorHeaderButton
+      disabled={true}
+      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
+      level="warn"
       onPress={[Function]}
     />
   </View>

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap

@@ -30,14 +30,18 @@ exports[`LogBoxInspectorMessageHeader should not render collapse button for shor
   >
     <Text
       style={
-        Object {
+        Array [
-          "color": "rgba(250, 186, 48, 1)",
+          Object {
-          "flex": 1,
+            "flex": 1,
-          "fontSize": 20,
+            "fontSize": 20,
-          "fontWeight": "600",
+            "fontWeight": "600",
-          "includeFontPadding": false,
+            "includeFontPadding": false,
-          "lineHeight": 28,
+            "lineHeight": 28,
-        }
+          },
+          Object {
+            "color": "rgba(250, 186, 48, 1)",
+          },
+        ]
       }
     >
       Warning
@@ -74,6 +78,84 @@ exports[`LogBoxInspectorMessageHeader should not render collapse button for shor
 </View>
 `;
 
+exports[`LogBoxInspectorMessageHeader should not render error 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "rgba(51, 51, 51, 1)",
+      "elevation": 2,
+      "flex": 0,
+      "shadowColor": "#000",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.5,
+      "shadowRadius": 2,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginBottom": 5,
+        "marginTop": 10,
+        "paddingHorizontal": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "fontSize": 20,
+            "fontWeight": "600",
+            "includeFontPadding": false,
+            "lineHeight": 28,
+          },
+          Object {
+            "color": "rgba(243, 83, 105, 1)",
+          },
+        ]
+      }
+    >
+      Error
+    </Text>
+  </View>
+  <Text
+    numberOfLines={null}
+    style={
+      Object {
+        "color": "rgba(255, 255, 255, 1)",
+        "fontSize": 14,
+        "fontWeight": "500",
+        "includeFontPadding": false,
+        "lineHeight": 20,
+        "paddingBottom": 10,
+        "paddingHorizontal": 12,
+      }
+    }
+  >
+    <LogBoxMessage
+      message={
+        Object {
+          "content": "Short",
+          "substitutions": Array [],
+        }
+      }
+      style={
+        Object {
+          "color": "rgba(255, 255, 255, 0.6)",
+        }
+      }
+    />
+  </Text>
+</View>
+`;
+
 exports[`LogBoxInspectorMessageHeader should render "collapse" if expanded 1`] = `
 <View
   style={
@@ -104,14 +186,18 @@ exports[`LogBoxInspectorMessageHeader should render "collapse" if expanded 1`] =
   >
     <Text
       style={
-        Object {
+        Array [
-          "color": "rgba(250, 186, 48, 1)",
+          Object {
-          "flex": 1,
+            "flex": 1,
-          "fontSize": 20,
+            "fontSize": 20,
-          "fontWeight": "600",
+            "fontWeight": "600",
-          "includeFontPadding": false,
+            "includeFontPadding": false,
-          "lineHeight": 28,
+            "lineHeight": 28,
-        }
+          },
+          Object {
+            "color": "rgba(250, 186, 48, 1)",
+          },
+        ]
       }
     >
       Warning
@@ -207,14 +293,18 @@ exports[`LogBoxInspectorMessageHeader should render "see more" if collapsed 1`]
   >
     <Text
       style={
-        Object {
+        Array [
-          "color": "rgba(250, 186, 48, 1)",
+          Object {
-          "flex": 1,
+            "flex": 1,
-          "fontSize": 20,
+            "fontSize": 20,
-          "fontWeight": "600",
+            "fontWeight": "600",
-          "includeFontPadding": false,
+            "includeFontPadding": false,
-          "lineHeight": 28,
+            "lineHeight": 28,
-        }
+          },
+          Object {
+            "color": "rgba(250, 186, 48, 1)",
+          },
+        ]
       }
     >
       Warning