-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
FED-193 Show Component Name in ErrorBoundary Stack
- Loading branch information
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
// Copyright 2022 Workiva Inc. | ||
// | ||
// Licensed under the Apache License, Version 2.0 (the "License"); | ||
// you may not use this file except in compliance with the License. | ||
// You may obtain a copy of the License at | ||
// | ||
// http://www.apache.org/licenses/LICENSE-2.0 | ||
// | ||
// Unless required by applicable law or agreed to in writing, software | ||
// distributed under the License is distributed on an "AS IS" BASIS, | ||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
// See the License for the specific language governing permissions and | ||
// limitations under the License. | ||
|
||
import 'package:over_react/components.dart'; | ||
import 'package:over_react/over_react.dart' hide ErrorBoundary; | ||
|
||
part 'error_ui.over_react.g.dart'; | ||
|
||
UiFactory<ErrorUiProps> ErrorUi = | ||
castUiFactory(_$ErrorUi); // ignore: undefined_identifier | ||
|
||
mixin ErrorUiProps on UiProps {} | ||
|
||
mixin ErrorUiState on UiState { | ||
bool triggerError; | ||
String stack; | ||
} | ||
|
||
class ErrorUiComponent | ||
extends UiStatefulComponent2<ErrorUiProps, ErrorUiState> { | ||
@override | ||
get initialState => (newState()..triggerError = false); | ||
|
||
@override | ||
render() { | ||
return (Dom.div() | ||
..style = { | ||
'margin': 16, | ||
'paddingBottom': 16, | ||
'borderBottom': '1px solid grey' | ||
} | ||
)( | ||
(Dom.div() | ||
..style = { | ||
'height': 300, | ||
} | ||
)( | ||
(ErrorBoundary() | ||
..onComponentDidCatch = (e, i) { | ||
if (state.stack == null) { | ||
setState(newState()..stack = i.componentStack); | ||
} | ||
|
||
print(i.componentStack); | ||
} | ||
)( | ||
state.triggerError ? (ThrowingComponent()()) : null, | ||
), | ||
), | ||
Dom.div()( | ||
(Dom.button() | ||
..onClick = ((_) => setState(newState()..triggerError = true)) | ||
..disabled = state.triggerError | ||
..style = { | ||
'margin': '0 5px 0 5px', | ||
} | ||
)('Trigger Error'), | ||
(Dom.button() | ||
..onClick = ((_) => setState(newState() | ||
..triggerError = false | ||
..stack = null | ||
)) | ||
..disabled = !state.triggerError | ||
..style = { | ||
'margin': '0 5px 0 5px', | ||
} | ||
)('Reset'), | ||
), | ||
state.stack != null | ||
? (Dom.div() | ||
..style = { | ||
'border': '1px solid black', | ||
'margin': 8, | ||
'padding': 8, | ||
} | ||
)( | ||
(Dom.div() | ||
..style = { | ||
'padding': 4, | ||
'borderBottom': '1px solid grey', | ||
'display': 'flex', | ||
'justifyContent': 'space-between', | ||
} | ||
)( | ||
Dom.div()('Stack'), | ||
Dom.div()( | ||
state.stack.contains('ThrowingComponent') | ||
? 'Detected ThrowingComponent ✅' | ||
: 'Failed to Find ThrowingComponent ❌', | ||
), | ||
), | ||
(Dom.div() | ||
..addProp('dangerouslySetInnerHTML', { | ||
'__html': state.stack | ||
.replaceAll('ThrowingComponent', | ||
'<span style="color: green">ThrowingComponent</span>') | ||
.replaceAll('at', '<br /><br />at') | ||
}) | ||
)(), | ||
) | ||
: null, | ||
); | ||
} | ||
} | ||
|
||
UiFactory<ThrowingComponentProps> ThrowingComponent = | ||
castUiFactory(_$ThrowingComponent); // ignore: undefined_identifier | ||
|
||
mixin ThrowingComponentProps on UiProps {} | ||
|
||
class ThrowingComponentComponent extends UiComponent2<ThrowingComponentProps> { | ||
@override | ||
render() { | ||
throw StateError('Oh Dang'); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
<!-- | ||
~ Copyright 2022 Workiva Inc. | ||
~ | ||
~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
~ you may not use this file except in compliance with the License. | ||
~ You may obtain a copy of the License at | ||
~ | ||
~ http://www.apache.org/licenses/LICENSE-2.0 | ||
~ | ||
~ Unless required by applicable law or agreed to in writing, software | ||
~ distributed under the License is distributed on an "AS IS" BASIS, | ||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
~ See the License for the specific language governing permissions and | ||
~ limitations under the License. | ||
--> | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> | ||
<meta charset="utf-8"> | ||
<title>over_react Error Boundary example</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta name="apple-mobile-web-app-capable" content="yes"> | ||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | ||
|
||
<!-- stylesheets --> | ||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | ||
|
||
<!-- javascript --> | ||
|
||
</head> | ||
<body> | ||
<div id="content"></div> | ||
|
||
<script src="packages/react/react_prod.js"></script> | ||
<script src="packages/react/react_dom_prod.js"></script> | ||
|
||
<script type="application/javascript" defer src="main.dart.js"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
// Copyright 2022 Workiva Inc. | ||
// | ||
// Licensed under the Apache License, Version 2.0 (the "License"); | ||
// you may not use this file except in compliance with the License. | ||
// You may obtain a copy of the License at | ||
// | ||
// http://www.apache.org/licenses/LICENSE-2.0 | ||
// | ||
// Unless required by applicable law or agreed to in writing, software | ||
// distributed under the License is distributed on an "AS IS" BASIS, | ||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
// See the License for the specific language governing permissions and | ||
// limitations under the License. | ||
|
||
import 'dart:html'; | ||
|
||
import 'package:react/react_dom.dart' as react_dom; | ||
|
||
import 'error_ui.dart'; | ||
|
||
void main() { | ||
render() { | ||
react_dom.render(ErrorUi()(), querySelector('#content')); | ||
} | ||
|
||
render(); | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.