From 574ae7a3e814aaec3cac5e1bb690c8dea493baf4 Mon Sep 17 00:00:00 2001 From: Pritesh Nandgaonkar Date: Tue, 19 Mar 2019 08:15:12 -0700 Subject: [PATCH] Improve CrashReporter UI for the latest crash Summary: I have updated the UI of the crash reporter. It doesn't show the multiple crashes now. I will work on that in other diff. This diff just updates the current UI that shows the latest crash, as per the [design](https://our.intern.facebook.com/intern/px/p/pJ11/) Reviewed By: danielbuechele Differential Revision: D14399400 fbshipit-source-id: f6f28c2c6d386f4cd99a257922993ef355b1059b --- src/plugins/crash_reporter/index.js | 197 +++++++++++++++++++--------- src/ui/components/colors.js | 3 + 2 files changed, 140 insertions(+), 60 deletions(-) diff --git a/src/plugins/crash_reporter/index.js b/src/plugins/crash_reporter/index.js index b6d1ddbab..6588ea7be 100644 --- a/src/plugins/crash_reporter/index.js +++ b/src/plugins/crash_reporter/index.js @@ -21,6 +21,11 @@ import { getPersistedState, BaseDevice, shouldParseAndroidLog, + StackTrace, + Text, + colors, + Toolbar, + Spacer, } from 'flipper'; import fs from 'fs'; import os from 'os'; @@ -28,6 +33,17 @@ import util from 'util'; import path from 'path'; import type {Notification} from '../../plugin'; import type {Store, DeviceLogEntry, OS} from 'flipper'; +import {Component} from 'react'; + +type HeaderRowProps = { + title: string, + value: string, +}; +type openLogsCallbackType = () => void; + +type CrashReporterBarProps = {| + openLogsCallback?: openLogsCallbackType, +|}; export type Crash = {| notificationID: string, @@ -46,37 +62,58 @@ export type PersistedState = { crashes: Array, }; -const Title = styled(View)({ +const Padder = styled('div')( + ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({ + paddingLeft: paddingLeft || 0, + paddingRight: paddingRight || 0, + paddingBottom: paddingBottom || 0, + paddingTop: paddingTop || 0, + }), +); + +const Title = styled(Text)({ fontWeight: 'bold', - fontSize: '100%', - color: 'red', + color: colors.greyTint3, + height: 'auto', + width: 200, + textOverflow: 'ellipsis', }); -const Value = styled(View)({ - paddingLeft: '8px', - fontSize: '100%', - fontFamily: 'Monospace', - maxHeight: '200px', +const Line = styled(View)({ + backgroundColor: colors.greyTint2, + height: 1, + width: 'auto', + marginTop: 2, + flexShrink: 0, +}); + +const Container = styled(FlexColumn)({ + overflow: 'hidden', + flexShrink: 0, +}); + +const Value = styled(Title)({ + maxHeight: 200, + height: 'auto', + flexGrow: 1, +}); + +const FlexGrowColumn = styled(FlexColumn)({ + flexGrow: 1, +}); + +const ScrollableColumn = styled(FlexGrowColumn)({ overflow: 'scroll', + height: 'auto', }); -const RootColumn = styled(FlexColumn)({ - paddingLeft: '16px', - paddingRight: '16px', - paddingTop: '8px', - overflow: 'scroll', +const StyledFlexGrowColumn = styled(FlexColumn)({ + flexGrow: 1, }); -const CrashRow = styled(FlexRow)({ - paddingTop: '8px', -}); - -const CallStack = styled('pre')({ - fontFamily: 'Monospace', - fontSize: '100%', - paddingLeft: '8px', - maxHeight: '500px', - overflow: 'scroll', +const StyledFlexColumn = styled(StyledFlexGrowColumn)({ + justifyContent: 'center', + alignItems: 'center', }); export function getNewPersisitedStateFromCrashLog( @@ -258,14 +295,47 @@ function addFileWatcherForiOSCrashLogs( }); } +class CrashReporterBar extends Component { + render() { + const {openLogsCallback} = this.props; + return ( + + + + + ); + } +} + +class HeaderRow extends Component { + render() { + const {title, value} = this.props; + return ( + + + + + {title} + {value} + + + + + + ); + } +} + export default class CrashReporterPlugin extends FlipperDevicePlugin< *, *, PersistedState, > { - static defaultPersistedState = { - crashes: [], - }; + static defaultPersistedState = {crashes: []}; static supportsDevice(device: Device) { return device.os === 'iOS' || device.os === 'Android'; @@ -379,7 +449,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin< }; render() { - let crash: ?Crash = + const currentCrash: ?Crash = this.props.persistedState.crashes && this.props.persistedState.crashes.length > 0 ? this.props.persistedState.crashes[ @@ -387,32 +457,41 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin< ] : null; + let deeplinkedCrash = null; if (this.props.deepLinkPayload) { const id = this.props.deepLinkPayload; const index = this.props.persistedState.crashes.findIndex(elem => { return elem.notificationID === id; }); if (index >= 0) { - crash = this.props.persistedState.crashes[index]; + deeplinkedCrash = this.props.persistedState.crashes[index]; } } + const crash = deeplinkedCrash || currentCrash; if (crash) { const callstackString = crash.callstack; + + const children = crash.callstack.split('\n').map(str => { + return {message: str}; + }); return ( - - - Name - {crash.name} - - - Reason - {crash.reason} - - - CallStack - - + + {this.device.os == 'Android' ? ( + { + this.openInLogs(crash.callstack); + }} + /> + ) : ( + + )} + + + + + Stacktrace + - {callstackString} + + - - {this.device.os == 'Android' && ( - - - - )} - + + ); } return ( - - - Dedicated space to debug crashes. Look out for crash notifications - - + + + + + No Crashes Logged + + + ); } } diff --git a/src/ui/components/colors.js b/src/ui/components/colors.js index c12c39b09..937842320 100644 --- a/src/ui/components/colors.js +++ b/src/ui/components/colors.js @@ -40,6 +40,9 @@ export const colors = { purpleTint: '#E8E3F4', grey: '#88A2AB', // Grey - Debug greyTint: '#E7ECEE', + greyTint2: '#e5e5e5', // Grey - Can be used in demarcation with greyStackTraceTint + greyTint3: '#515151', // Grey - Can be used as the color for the title + greyStackTraceTint: '#f5f6f8', // Grey - It is used as the background for the stacktrace in crash reporter plugin cyan: '#4FC9EA', // Cyan - Info cyanTint: '#DCF4FB', // Cyan - Info // FIG UI Light