Skip to content

Commit a12a184

Browse files
jrosengrantjrosengrant
committed
added some stuff to try to fix loading errors such as port connection in content script
1 parent 077477a commit a12a184

File tree

8 files changed

+212
-333
lines changed

8 files changed

+212
-333
lines changed

‎src/app/__tests__/ErrorMsg.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const props = {
1111
targetPageisaReactApp: true,
1212
},
1313
launchContent: null,
14+
reinitialize: null,
1415
};
1516

1617
describe('unit testing for ErrorContainer.tsx', () => {

‎src/app/components/ErrorMsg.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function parseError(loadingArray: [], status: Record<string, unknown>): string {
2626
return 'default';
2727
}
2828

29-
function ErrorMsg({ loadingArray, status, launchContent }): JSX.Element {
29+
function ErrorMsg({ loadingArray, status, launchContent, reinitialize }): JSX.Element {
3030
switch (
3131
parseError(loadingArray, status) // parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
3232
) {
@@ -76,6 +76,10 @@ function ErrorMsg({ loadingArray, status, launchContent }): JSX.Element {
7676
NOTE: The React Developer Tools extension is required for Reactime to run, if you do not
7777
already have it installed on your browser.
7878
</a>
79+
<button type='button' className='launchContentButton' onClick={reinitialize}>
80+
{' '}
81+
Reinitialize{' '}
82+
</button>
7983
</div>
8084
);
8185
case 'Not React App':

‎src/app/components/StateRoute/StateRoute.tsx‎

Lines changed: 76 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,9 @@ const StateRoute = (props: StateRouteProps) => {
3333
webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
3434
currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
3535
} = props;
36-
console.log('snapshot from StateRoute props: ', snapshot);
37-
console.log('snapshots from StateRoute props: ', snapshots);
38-
console.log('currLocation from StateRoute props', currLocation);
36+
3937
const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
40-
const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
38+
const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
4139
const hierarchy = propsHierarchy || tabsHierarchy; //JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above
4240
const viewIndex = propsViewIndex || tabsViewIndex;
4341

@@ -62,58 +60,81 @@ const StateRoute = (props: StateRouteProps) => {
6260
</div>
6361
<div className='app-content'>
6462
<Routes>
65-
66-
<Route path='/history' element={ hierarchy ?
67-
<ParentSize>
68-
{({ width, height }) => (
69-
<History
70-
width={width}
71-
height={height}
72-
hierarchy={hierarchy}
73-
// Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
74-
// dispatch={dispatch}
75-
sliderIndex={sliderIndex}
76-
viewIndex={viewIndex}
77-
currLocation={currLocation}
78-
snapshots={snapshots}
79-
/>
80-
)}
81-
</ParentSize> : <div className='noState'>{NO_STATE_MSG}</div>} />
82-
<Route path='/performance/*' element={hierarchy ?
83-
<div style={{height: "100%"}}>
84-
<ParentSize className='performanceContainer'>
85-
{({ width, height }) => (
86-
<PerformanceVisx
87-
width={width}
88-
height={height}
89-
snapshots={snapshots}
90-
// note: is propdrilled within Performance Visx, but doesn't seem to be used
91-
changeSlider={changeSlider}
92-
changeView={changeView}
93-
hierarchy={hierarchy}
94-
/>
95-
)}
96-
</ParentSize>
97-
<Outlet/>
98-
</div>
99-
: <div className='noState'>{NO_STATE_MSG}</div>
100-
} />
63+
<Route
64+
path='/history'
65+
element={
66+
hierarchy ? (
67+
<ParentSize>
68+
{({ width, height }) => (
69+
<History
70+
width={width}
71+
height={height}
72+
hierarchy={hierarchy}
73+
// Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
74+
// dispatch={dispatch}
75+
sliderIndex={sliderIndex}
76+
viewIndex={viewIndex}
77+
currLocation={currLocation}
78+
snapshots={snapshots}
79+
/>
80+
)}
81+
</ParentSize>
82+
) : (
83+
<div className='noState'>{NO_STATE_MSG}</div>
84+
)
85+
}
86+
/>
87+
<Route
88+
path='/performance/*'
89+
element={
90+
hierarchy ? (
91+
<div style={{ height: '100%' }}>
92+
<ParentSize className='performanceContainer'>
93+
{({ width, height }) => (
94+
<PerformanceVisx
95+
width={width}
96+
height={height}
97+
snapshots={snapshots}
98+
// note: is propdrilled within Performance Visx, but doesn't seem to be used
99+
changeSlider={changeSlider}
100+
changeView={changeView}
101+
hierarchy={hierarchy}
102+
/>
103+
)}
104+
</ParentSize>
105+
<Outlet />
106+
</div>
107+
) : (
108+
<div className='noState'>{NO_STATE_MSG}</div>
109+
)
110+
}
111+
/>
101112
<Route path='/webMetrics' element={<WebMetricsContainer webMetrics={webMetrics} />} />
102-
<Route path='/tree' element={<Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />} />
103-
<Route path='*' element={hierarchy ?
104-
<ParentSize className='componentMapContainer'>
105-
{({ width, height }) => {
106-
// eslint-disable-next-line react/prop-types
107-
const maxHeight: number = 1200;
108-
const h = Math.min(height, maxHeight)
109-
return (<ComponentMap
110-
currentSnapshot={currLocation.stateSnapshot}
111-
width={width}
112-
height={h}
113-
/>)
114-
}}
115-
</ParentSize>
116-
: null} />
113+
<Route
114+
path='/tree'
115+
element={<Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />}
116+
/>
117+
<Route
118+
path='*'
119+
element={
120+
hierarchy ? (
121+
<ParentSize className='componentMapContainer'>
122+
{({ width, height }) => {
123+
// eslint-disable-next-line react/prop-types
124+
const maxHeight: number = 1200;
125+
const h = Math.min(height, maxHeight);
126+
return (
127+
<ComponentMap
128+
currentSnapshot={currLocation.stateSnapshot}
129+
width={width}
130+
height={h}
131+
/>
132+
);
133+
}}
134+
</ParentSize>
135+
) : null
136+
}
137+
/>
117138
</Routes>
118139
</div>
119140
</div>

‎src/app/containers/ErrorContainer v2.tsx‎

Lines changed: 0 additions & 160 deletions
This file was deleted.

‎src/app/containers/ErrorContainer.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
3636
dispatch(launchContentScript(tabs[currentTab]));
3737
}
3838

39+
function reinitialize(): void {
40+
port.postMessage({
41+
action: 'reinitialize',
42+
tabId: currentTab,
43+
});
44+
}
45+
3946
let status = {
4047
// We create a status object that we may use later if tabs[currentTab] exists
4148
contentScriptLaunched: false,
@@ -107,7 +114,7 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
107114
// console.log('ErrorContainer react devtools check passed');
108115
// status.reactDevToolsInstalled = true;
109116

110-
// console.log('ErrorContainer attempting reinitalize');
117+
// console.log('ErrorContainer attempting reinitialize');
111118
// port.postMessage({
112119
// action: 'reinitialize',
113120
// tabId: currentTab,
@@ -143,7 +150,12 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
143150

144151
<br />
145152
<div className='errorMsg'>
146-
<ErrorMsg loadingArray={loadingArray} status={status} launchContent={launch} />
153+
<ErrorMsg
154+
loadingArray={loadingArray}
155+
status={status}
156+
launchContent={launch}
157+
reinitialize={reinitialize}
158+
/>
147159
</div>
148160
<br />
149161
<a

0 commit comments

Comments
 (0)