react-native-macos/React/Modules/RCTRedBox.m

615 строки
24 KiB
Mathematica
Исходник Обычный вид История

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTRedBox.h"
2015-04-12 01:08:00 +03:00
#import "RCTBridge.h"
#import "RCTConvert.h"
2015-04-30 19:50:22 +03:00
#import "RCTDefines.h"
#import "RCTErrorInfo.h"
#import "RCTEventDispatcher.h"
#import "RCTJSStackFrame.h"
#import "RCTRedBoxExtraDataViewController.h"
#import "RCTUtils.h"
2015-04-30 19:50:22 +03:00
#if RCT_DEBUG
@class RCTRedBoxWindow;
@protocol RCTRedBoxWindowActionDelegate <NSObject>
- (void)redBoxWindow:(RCTRedBoxWindow *)redBoxWindow openStackFrameInEditor:(RCTJSStackFrame *)stackFrame;
- (void)reloadFromRedBoxWindow:(RCTRedBoxWindow *)redBoxWindow;
- (void)loadExtraDataViewController;
@end
@interface RCTRedBoxWindow : UIWindow <UITableViewDelegate, UITableViewDataSource>
@property (nonatomic, weak) id<RCTRedBoxWindowActionDelegate> actionDelegate;
@end
@implementation RCTRedBoxWindow
{
UITableView *_stackTraceTableView;
NSString *_lastErrorMessage;
NSArray<RCTJSStackFrame *> *_lastStackTrace;
}
- (instancetype)initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame])) {
#if TARGET_OS_TV
self.windowLevel = UIWindowLevelAlert + 1000;
#else
self.windowLevel = UIWindowLevelStatusBar - 1;
#endif
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
self.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
self.hidden = YES;
UIViewController *rootController = [UIViewController new];
self.rootViewController = rootController;
UIView *rootView = rootController.view;
rootView.backgroundColor = [UIColor clearColor];
const CGFloat buttonHeight = 60;
CGRect detailsFrame = rootView.bounds;
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
detailsFrame.size.height -= buttonHeight + [self bottomSafeViewHeight];
_stackTraceTableView = [[UITableView alloc] initWithFrame:detailsFrame style:UITableViewStylePlain];
_stackTraceTableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_stackTraceTableView.delegate = self;
_stackTraceTableView.dataSource = self;
_stackTraceTableView.backgroundColor = [UIColor clearColor];
#if !TARGET_OS_TV
_stackTraceTableView.separatorColor = [UIColor colorWithWhite:1 alpha:0.3];
_stackTraceTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
#endif
_stackTraceTableView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
[rootView addSubview:_stackTraceTableView];
#if TARGET_OS_SIMULATOR
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
NSString *reloadText = @"Reload\n(\u2318R)";
NSString *dismissText = @"Dismiss\n(ESC)";
NSString *copyText = @"Copy\n(\u2325\u2318C)";
NSString *extraText = @"Extra Info\n(\u2318E)";
#else
NSString *reloadText = @"Reload JS";
NSString *dismissText = @"Dismiss";
NSString *copyText = @"Copy";
NSString *extraText = @"Extra Info";
#endif
UIButton *dismissButton = [UIButton buttonWithType:UIButtonTypeCustom];
dismissButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin;
dismissButton.accessibilityIdentifier = @"redbox-dismiss";
dismissButton.titleLabel.font = [UIFont systemFontOfSize:13];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
dismissButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
dismissButton.titleLabel.textAlignment = NSTextAlignmentCenter;
dismissButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
[dismissButton setTitle:dismissText forState:UIControlStateNormal];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
[dismissButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
UIButton *reloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
reloadButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
reloadButton.accessibilityIdentifier = @"redbox-reload";
reloadButton.titleLabel.font = [UIFont systemFontOfSize:13];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
reloadButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
reloadButton.titleLabel.textAlignment = NSTextAlignmentCenter;
reloadButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
[reloadButton setTitle:reloadText forState:UIControlStateNormal];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
[reloadButton addTarget:self action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
UIButton *copyButton = [UIButton buttonWithType:UIButtonTypeCustom];
copyButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
copyButton.accessibilityIdentifier = @"redbox-copy";
copyButton.titleLabel.font = [UIFont systemFontOfSize:13];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
copyButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
copyButton.titleLabel.textAlignment = NSTextAlignmentCenter;
copyButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
[copyButton setTitle:copyText forState:UIControlStateNormal];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
[copyButton addTarget:self action:@selector(copyStack) forControlEvents:UIControlEventTouchUpInside];
UIButton *extraButton = [UIButton buttonWithType:UIButtonTypeCustom];
extraButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
extraButton.accessibilityIdentifier = @"redbox-extra";
extraButton.titleLabel.font = [UIFont systemFontOfSize:13];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
extraButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
extraButton.titleLabel.textAlignment = NSTextAlignmentCenter;
extraButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
[extraButton setTitle:extraText forState:UIControlStateNormal];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
[extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside];
CGFloat buttonWidth = self.bounds.size.width / 4;
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - [self bottomSafeViewHeight];
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
dismissButton.frame = CGRectMake(0, bottomButtonHeight, buttonWidth, buttonHeight);
reloadButton.frame = CGRectMake(buttonWidth, bottomButtonHeight, buttonWidth, buttonHeight);
copyButton.frame = CGRectMake(buttonWidth * 2, bottomButtonHeight, buttonWidth, buttonHeight);
extraButton.frame = CGRectMake(buttonWidth * 3, bottomButtonHeight, buttonWidth, buttonHeight);
UIView *topBorder = [[UIView alloc] initWithFrame:CGRectMake(0, bottomButtonHeight + 1, rootView.frame.size.width, 1)];
topBorder.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
[rootView addSubview:dismissButton];
[rootView addSubview:reloadButton];
[rootView addSubview:copyButton];
[rootView addSubview:extraButton];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[rootView addSubview:topBorder];
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
UIView *bottomSafeView = [UIView new];
bottomSafeView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
bottomSafeView.frame = CGRectMake(0, self.bounds.size.height - [self bottomSafeViewHeight], self.bounds.size.width, [self bottomSafeViewHeight]);
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
[rootView addSubview:bottomSafeView];
}
return self;
}
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
- (NSInteger)bottomSafeViewHeight
{
if (@available(iOS 11.0, *)) {
return RCTSharedApplication().delegate.window.safeAreaInsets.bottom;
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
} else {
return 0;
}
}
RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
2015-05-07 13:53:35 +03:00
- (void)dealloc
{
_stackTraceTableView.dataSource = nil;
_stackTraceTableView.delegate = nil;
[[NSNotificationCenter defaultCenter] removeObserver:self];
2015-05-07 13:53:35 +03:00
}
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
- (NSString *)stripAnsi:(NSString *)text
{
NSError *error = nil;
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:@"\\x1b\\[[0-9;]*m" options:NSRegularExpressionCaseInsensitive error:&error];
return [regex stringByReplacingMatchesInString:text options:0 range:NSMakeRange(0, [text length]) withTemplate:@""];
}
- (void)showErrorMessage:(NSString *)message withStack:(NSArray<RCTJSStackFrame *> *)stack isUpdate:(BOOL)isUpdate
{
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
// Remove ANSI color codes from the message
NSString *messageWithoutAnsi = [self stripAnsi:message];
// Show if this is a new message, or if we're updating the previous message
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
if ((self.hidden && !isUpdate) || (!self.hidden && isUpdate && [_lastErrorMessage isEqualToString:messageWithoutAnsi])) {
_lastStackTrace = stack;
// message is displayed using UILabel, which is unable to render text of
// unlimited length, so we truncate it
cleanup RedBox message and stack output (#24662) Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
2019-04-30 17:30:45 +03:00
_lastErrorMessage = [messageWithoutAnsi substringToIndex:MIN((NSUInteger)10000, messageWithoutAnsi.length)];
2015-02-25 03:33:39 +03:00
[_stackTraceTableView reloadData];
2015-02-25 03:33:39 +03:00
if (self.hidden) {
[_stackTraceTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]
atScrollPosition:UITableViewScrollPositionTop
animated:NO];
}
[self makeKeyAndVisible];
[self becomeFirstResponder];
}
}
- (void)dismiss
{
self.hidden = YES;
[self resignFirstResponder];
[RCTSharedApplication().delegate.window makeKeyWindow];
}
- (void)reload
{
[_actionDelegate reloadFromRedBoxWindow:self];
}
- (void)showExtraDataViewController
{
[_actionDelegate loadExtraDataViewController];
}
- (void)copyStack
{
NSMutableString *fullStackTrace;
if (_lastErrorMessage != nil) {
fullStackTrace = [_lastErrorMessage mutableCopy];
[fullStackTrace appendString:@"\n\n"];
}
else {
fullStackTrace = [NSMutableString string];
}
for (RCTJSStackFrame *stackFrame in _lastStackTrace) {
[fullStackTrace appendString:[NSString stringWithFormat:@"%@\n", stackFrame.methodName]];
if (stackFrame.file) {
[fullStackTrace appendFormat:@" %@\n", [self formatFrameSource:stackFrame]];
}
}
#if !TARGET_OS_TV
UIPasteboard *pb = [UIPasteboard generalPasteboard];
[pb setString:fullStackTrace];
#endif
}
- (NSString *)formatFrameSource:(RCTJSStackFrame *)stackFrame
{
NSString *fileName = RCTNilIfNull(stackFrame.file) ? [stackFrame.file lastPathComponent] : @"<unknown file>";
NSString *lineInfo = [NSString stringWithFormat:@"%@:%lld",
fileName,
(long long)stackFrame.lineNumber];
if (stackFrame.column != 0) {
lineInfo = [lineInfo stringByAppendingFormat:@":%lld", (long long)stackFrame.column];
}
return lineInfo;
}
#pragma mark - TableView
- (NSInteger)numberOfSectionsInTableView:(__unused UITableView *)tableView
{
return 2;
}
- (NSInteger)tableView:(__unused UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return section == 0 ? 1 : _lastStackTrace.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section == 0) {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"msg-cell"];
return [self reuseCell:cell forErrorMessage:_lastErrorMessage];
}
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
NSUInteger index = indexPath.row;
RCTJSStackFrame *stackFrame = _lastStackTrace[index];
return [self reuseCell:cell forStackFrame:stackFrame];
}
- (UITableViewCell *)reuseCell:(UITableViewCell *)cell forErrorMessage:(NSString *)message
{
if (!cell) {
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"msg-cell"];
cell.textLabel.accessibilityIdentifier = @"redbox-error";
cell.textLabel.textColor = [UIColor whiteColor];
cell.textLabel.font = [UIFont boldSystemFontOfSize:16];
cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
cell.textLabel.numberOfLines = 0;
cell.detailTextLabel.textColor = [UIColor whiteColor];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
cell.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
cell.textLabel.text = message;
return cell;
}
- (UITableViewCell *)reuseCell:(UITableViewCell *)cell forStackFrame:(RCTJSStackFrame *)stackFrame
{
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
cell.textLabel.textColor = [UIColor whiteColor];
cell.textLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:14];
cell.textLabel.lineBreakMode = NSLineBreakByCharWrapping;
cell.textLabel.numberOfLines = 2;
Updated RedBox screen (#22242) Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](https://github.com/react-native-community/discussions-and-proposals/issues/42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: https://github.com/facebook/react-native/pull/22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb
2019-01-15 17:24:02 +03:00
cell.detailTextLabel.textColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
cell.detailTextLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:11];
cell.detailTextLabel.lineBreakMode = NSLineBreakByTruncatingMiddle;
cell.backgroundColor = [UIColor clearColor];
cell.selectedBackgroundView = [UIView new];
cell.selectedBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.2];
}
cell.textLabel.text = stackFrame.methodName ?: @"(unnamed method)";
if (stackFrame.file) {
cell.detailTextLabel.text = [self formatFrameSource:stackFrame];
} else {
cell.detailTextLabel.text = @"";
}
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section == 0) {
NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
NSDictionary *attributes = @{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],
NSParagraphStyleAttributeName: paragraphStyle};
CGRect boundingRect = [_lastErrorMessage boundingRectWithSize:CGSizeMake(tableView.frame.size.width - 30, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil];
return ceil(boundingRect.size.height) + 40;
} else {
return 50;
}
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section == 1) {
NSUInteger row = indexPath.row;
RCTJSStackFrame *stackFrame = _lastStackTrace[row];
[_actionDelegate redBoxWindow:self openStackFrameInEditor:stackFrame];
}
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
#pragma mark - Key commands
- (NSArray<UIKeyCommand *> *)keyCommands
{
// NOTE: We could use RCTKeyCommands for this, but since
// we control this window, we can use the standard, non-hacky
// mechanism instead
return @[
// Dismiss red box
[UIKeyCommand keyCommandWithInput:UIKeyInputEscape
modifierFlags:0
action:@selector(dismiss)],
// Reload
[UIKeyCommand keyCommandWithInput:@"r"
modifierFlags:UIKeyModifierCommand
action:@selector(reload)],
// Copy = Cmd-Option C since Cmd-C in the simulator copies the pasteboard from
// the simulator to the desktop pasteboard.
[UIKeyCommand keyCommandWithInput:@"c"
modifierFlags:UIKeyModifierCommand | UIKeyModifierAlternate
action:@selector(copyStack)],
// Extra data
[UIKeyCommand keyCommandWithInput:@"e"
modifierFlags:UIKeyModifierCommand
action:@selector(showExtraDataViewController)]
];
}
- (BOOL)canBecomeFirstResponder
{
return YES;
}
@end
@interface RCTRedBox () <RCTInvalidating, RCTRedBoxWindowActionDelegate, RCTRedBoxExtraDataActionDelegate>
@end
@implementation RCTRedBox
{
RCTRedBoxWindow *_window;
NSMutableArray<id<RCTErrorCustomizer>> *_errorCustomizers;
RCTRedBoxExtraDataViewController *_extraDataViewController;
}
@synthesize bridge = _bridge;
2015-08-19 15:27:43 +03:00
RCT_EXPORT_MODULE()
- (void)registerErrorCustomizer:(id<RCTErrorCustomizer>)errorCustomizer
{
dispatch_async(dispatch_get_main_queue(), ^{
if (!self->_errorCustomizers) {
self->_errorCustomizers = [NSMutableArray array];
}
if (![self->_errorCustomizers containsObject:errorCustomizer]) {
[self->_errorCustomizers addObject:errorCustomizer];
}
});
}
// WARNING: Should only be called from the main thread/dispatch queue.
- (RCTErrorInfo *)_customizeError:(RCTErrorInfo *)error
{
RCTAssertMainQueue();
if (!self->_errorCustomizers) {
return error;
}
for (id<RCTErrorCustomizer> customizer in self->_errorCustomizers) {
RCTErrorInfo *newInfo = [customizer customizeErrorInfo:error];
if (newInfo) {
error = newInfo;
}
}
return error;
}
- (void)showError:(NSError *)error
{
[self showErrorMessage:error.localizedDescription
withDetails:error.localizedFailureReason
stack:error.userInfo[RCTJSStackTraceKey]];
}
- (void)showErrorMessage:(NSString *)message
{
[self showErrorMessage:message withParsedStack:nil isUpdate:NO];
}
- (void)showErrorMessage:(NSString *)message withDetails:(NSString *)details
{
[self showErrorMessage:message withDetails:details stack:nil];
}
- (void)showErrorMessage:(NSString *)message withDetails:(NSString *)details stack:(NSArray<RCTJSStackFrame *> *)stack {
NSString *combinedMessage = message;
if (details) {
combinedMessage = [NSString stringWithFormat:@"%@\n\n%@", message, details];
}
[self showErrorMessage:combinedMessage withParsedStack:stack isUpdate:NO];
}
- (void)showErrorMessage:(NSString *)message withRawStack:(NSString *)rawStack
{
NSArray<RCTJSStackFrame *> *stack = [RCTJSStackFrame stackFramesWithLines:rawStack];
[self showErrorMessage:message withParsedStack:stack isUpdate:NO];
}
- (void)showErrorMessage:(NSString *)message withStack:(NSArray<NSDictionary *> *)stack
{
[self showErrorMessage:message withParsedStack:[RCTJSStackFrame stackFramesWithDictionaries:stack] isUpdate:NO];
}
- (void)updateErrorMessage:(NSString *)message withStack:(NSArray<NSDictionary *> *)stack
{
[self showErrorMessage:message withParsedStack:[RCTJSStackFrame stackFramesWithDictionaries:stack] isUpdate:YES];
}
- (void)showErrorMessage:(NSString *)message withParsedStack:(NSArray<RCTJSStackFrame *> *)stack
{
[self showErrorMessage:message withParsedStack:stack isUpdate:NO];
}
- (void)updateErrorMessage:(NSString *)message withParsedStack:(NSArray<RCTJSStackFrame *> *)stack
{
[self showErrorMessage:message withParsedStack:stack isUpdate:YES];
}
- (void)showErrorMessage:(NSString *)message withParsedStack:(NSArray<RCTJSStackFrame *> *)stack isUpdate:(BOOL)isUpdate
{
dispatch_async(dispatch_get_main_queue(), ^{
if (self->_extraDataViewController == nil) {
self->_extraDataViewController = [RCTRedBoxExtraDataViewController new];
self->_extraDataViewController.actionDelegate = self;
}
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
[self->_bridge.eventDispatcher sendDeviceEventWithName:@"collectRedBoxExtraData" body:nil];
#pragma clang diagnostic pop
if (!self->_window) {
self->_window = [[RCTRedBoxWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self->_window.actionDelegate = self;
}
RCTErrorInfo *errorInfo = [[RCTErrorInfo alloc] initWithErrorMessage:message
stack:stack];
errorInfo = [self _customizeError:errorInfo];
[self->_window showErrorMessage:errorInfo.errorMessage
withStack:errorInfo.stack
isUpdate:isUpdate];
});
}
- (void)loadExtraDataViewController {
dispatch_async(dispatch_get_main_queue(), ^{
// Make sure the CMD+E shortcut doesn't call this twice
if (self->_extraDataViewController != nil && ![self->_window.rootViewController presentedViewController]) {
[self->_window.rootViewController presentViewController:self->_extraDataViewController animated:YES completion:nil];
}
});
}
RCT_EXPORT_METHOD(setExtraData:(NSDictionary *)extraData forIdentifier:(NSString *)identifier) {
[_extraDataViewController addExtraData:extraData forIdentifier:identifier];
}
RCT_EXPORT_METHOD(dismiss)
{
dispatch_async(dispatch_get_main_queue(), ^{
[self->_window dismiss];
});
}
- (void)invalidate
{
[self dismiss];
}
- (void)redBoxWindow:(__unused RCTRedBoxWindow *)redBoxWindow openStackFrameInEditor:(RCTJSStackFrame *)stackFrame
{
NSURL *const bundleURL = _overrideBundleURL ?: _bridge.bundleURL;
if (![bundleURL.scheme hasPrefix:@"http"]) {
RCTLogWarn(@"Cannot open stack frame in editor because you're not connected to the packager.");
return;
}
NSData *stackFrameJSON = [RCTJSONStringify([stackFrame toDictionary], NULL) dataUsingEncoding:NSUTF8StringEncoding];
NSString *postLength = [NSString stringWithFormat:@"%tu", stackFrameJSON.length];
NSMutableURLRequest *request = [NSMutableURLRequest new];
request.URL = [NSURL URLWithString:@"/open-stack-frame" relativeToURL:bundleURL];
request.HTTPMethod = @"POST";
request.HTTPBody = stackFrameJSON;
[request setValue:postLength forHTTPHeaderField:@"Content-Length"];
[request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"];
[[[NSURLSession sharedSession] dataTaskWithRequest:request] resume];
}
- (void)reload
{
// Window is not used and can be nil
[self reloadFromRedBoxWindow:nil];
}
- (void)reloadFromRedBoxWindow:(__unused RCTRedBoxWindow *)redBoxWindow
{
if (_overrideReloadAction) {
_overrideReloadAction();
} else {
[_bridge reload];
}
[self dismiss];
}
2015-08-19 15:27:43 +03:00
@end
@implementation RCTBridge (RCTRedBox)
- (RCTRedBox *)redBox
{
return [self moduleForClass:[RCTRedBox class]];
}
@end
2015-04-21 19:48:29 +03:00
2015-04-30 19:50:22 +03:00
#else // Disabled
@implementation RCTRedBox
+ (NSString *)moduleName { return nil; }
- (void)registerErrorCustomizer:(id<RCTErrorCustomizer>)errorCustomizer {}
- (void)showError:(NSError *)message {}
2015-04-30 19:50:22 +03:00
- (void)showErrorMessage:(NSString *)message {}
- (void)showErrorMessage:(NSString *)message withDetails:(NSString *)details {}
- (void)showErrorMessage:(NSString *)message withRawStack:(NSString *)rawStack {}
- (void)showErrorMessage:(NSString *)message withStack:(NSArray<NSDictionary *> *)stack {}
- (void)updateErrorMessage:(NSString *)message withStack:(NSArray<NSDictionary *> *)stack {}
- (void)showErrorMessage:(NSString *)message withParsedStack:(NSArray<RCTJSStackFrame *> *)stack {}
- (void)updateErrorMessage:(NSString *)message withParsedStack:(NSArray<RCTJSStackFrame *> *)stack {}
- (void)showErrorMessage:(NSString *)message withStack:(NSArray<NSDictionary *> *)stack isUpdate:(BOOL)isUpdate {}
2015-04-30 19:50:22 +03:00
- (void)dismiss {}
@end
2015-08-19 15:27:43 +03:00
@implementation RCTBridge (RCTRedBox)
- (RCTRedBox *)redBox { return nil; }
@end
2015-04-21 19:48:29 +03:00
#endif