Skip to content

Commit 038a15b

Browse files
garrettlchowgarrettlchow
committed
reverted error container
1 parent 4bccc0f commit 038a15b

File tree

4 files changed

+270
-56
lines changed

4 files changed

+270
-56
lines changed

‎src/app/components/ErrorHandling/ErrorHandler.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
3+
class ErrorHandler extends React.Component {
4+
constructor(props: unknown) {
5+
super(props);
6+
this.state = { errorOccurred: false };
7+
}
8+
9+
componentDidCatch(): void {
10+
this.setState({ errorOccurred: true });
11+
}
12+
13+
render(): JSX.Element {
14+
const { errorOccurred } = this.state;
15+
// eslint-disable-next-line react/prop-types
16+
const { children } = this.props;
17+
return errorOccurred ? <div>Unexpected Error</div> : children;
18+
}
19+
}
20+
21+
export default ErrorHandler;

‎src/app/components/ErrorHandling/ErrorMsg.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* eslint-disable react/prop-types */
2+
import React from 'react';
3+
4+
/*
5+
This file determines what text will be displayed to the user if any one of the following fail to load:
6+
7+
1. if the content script has been launched on the current tab
8+
2. if React Dev Tools has been installed
9+
3. if target tab contains a compatible React app
10+
11+
*/
12+
13+
// parses loadingArray and status and returns the correct message
14+
function parseError(loadingArray: [], status: Record<string, unknown>): string {
15+
let stillLoading = true;
16+
loadingArray.forEach((e) => {
17+
if (e === false) stillLoading = false;
18+
});
19+
20+
if (stillLoading) return 'default'; // As long as everything is still loading dont diplay an error message
21+
22+
// If we're done loading everything, return the first status that fails
23+
if (!status.contentScriptLaunched) return 'Content Script Error';
24+
if (!status.reactDevToolsInstalled) return 'RDT Error';
25+
if (!status.targetPageisaReactApp) return 'Not React App';
26+
return 'default';
27+
}
28+
29+
function ErrorMsg({ loadingArray, status, launchContent, reinitialize }): JSX.Element {
30+
switch (
31+
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
32+
) {
33+
case 'Content Script Error':
34+
return (
35+
<div>
36+
Target App not yet found...
37+
<br />
38+
If you encounter this error on the initial launch of Reactime, try refreshing the webpage
39+
you are developing.
40+
<br />
41+
<br />
42+
If Reactime is running as an iframe in your developer tools, right click on the Reactime
43+
application and click 'Reload Frame'
44+
<br />
45+
<br />
46+
NOTE: By default Reactime only launches the content script on URLS starting with
47+
localhost.
48+
<br />
49+
If your target URL does not match, you can manually launch the content script below.
50+
<br />
51+
<br />
52+
<button type='button' className='launchContentButton' onClick={launchContent}>
53+
{' '}
54+
Launch{' '}
55+
</button>
56+
</div>
57+
);
58+
case 'RDT Error':
59+
return (
60+
<div>
61+
React Dev Tools is not installed!
62+
<br />
63+
<br />
64+
If you encounter this error on the initial launch of Reactime, refresh the webpage you are
65+
developing.
66+
<br />
67+
If Reactime is running as an iframe in your developer tools, right click on the Reactime
68+
application and click 'Reload Frame'
69+
<br />
70+
<br />
71+
<a
72+
href='https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en'
73+
target='_blank'
74+
rel='noopener noreferrer'
75+
>
76+
NOTE: The React Developer Tools extension is required for Reactime to run, if you do not
77+
already have it installed on your browser.
78+
</a>
79+
</div>
80+
);
81+
case 'Not React App':
82+
return (
83+
<div>
84+
The Target app is either not a React application or is not compatible with Reactime.
85+
</div>
86+
);
87+
default:
88+
return null;
89+
}
90+
}
91+
92+
export default ErrorMsg;

‎src/app/components/ErrorHandling/Loader.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// /* eslint-disable react/prop-types */
2+
3+
import React from 'react';
4+
import { ClipLoader } from 'react-spinners';
5+
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
6+
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
7+
8+
/*
9+
This file is what decides what icon (loading, checkmark, exclamation point) is displayed next to the checks in the ErrorContainer loading screen:
10+
11+
1. if the content script has been launched on the current tab
12+
2. if React Dev Tools has been installed
13+
3. if target tab contains a compatible React app
14+
*/
15+
16+
const handleResult = (result: boolean): JSX.Element =>
17+
result ? (
18+
<CheckCircleOutlineIcon className='check' /> // if result boolean is true, we display a checkmark icon
19+
) : (
20+
<ErrorOutlineIcon className='fail' /> // if the result boolean is false, we display a fail icon
21+
);
22+
23+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
24+
// Returns the 'Loader' component
25+
const Loader = ({ loading, result }): JSX.Element =>
26+
loading ? (
27+
<ClipLoader color='#123abc' size={30} loading={loading} /> // if the loadingArray value is true, we display a loading icon
28+
) : (
29+
handleResult(result) // else we display a component produced by 'handleResult' depending on if the result parameter (which takes an argument from the status object in 'ErrorContainer') is true or false
30+
);
31+
32+
export default Loader;

‎src/app/containers/ErrorContainer.tsx

Lines changed: 125 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,144 @@
1-
import React from 'react';
2-
import { useDispatch, useSelector } from 'react-redux';
1+
/* eslint-disable max-len */
2+
import React, { useState, useEffect, useRef } from 'react';
33
import { launchContentScript } from '../slices/mainSlice';
4+
import Loader from '../components/ErrorHandling/Loader';
5+
import ErrorMsg from '../components/ErrorHandling/ErrorMsg';
6+
import { useDispatch, useSelector } from 'react-redux';
47
import { MainState, RootState, ErrorContainerProps } from '../FrontendTypes';
5-
import { RefreshCw, Github, PlayCircle } from 'lucide-react';
8+
import { current } from '@reduxjs/toolkit';
9+
/*
10+
This is the loading screen that a user may get when first initalizing the application. This page checks:
11+
12+
1. if the content script has been launched on the current tab
13+
2. if React Dev Tools has been installed
14+
3. if target tab contains a compatible React app
15+
*/
616

717
function ErrorContainer(props: ErrorContainerProps): JSX.Element {
818
const dispatch = useDispatch();
919
const { tabs, currentTitle, currentTab }: MainState = useSelector(
1020
(state: RootState) => state.main,
1121
);
22+
const [loadingArray, setLoading] = useState([true, true, true]); // We create a local state "loadingArray" and set it to an array with three true elements. These will be used as hooks for error checking against a 'status' object that is declared later in a few lines. 'loadingArray' is used later in the return statement to display a spinning loader icon if it's true. If it's false, either a checkmark icon or an exclamation icon will be displayed to the user.
23+
const titleTracker = useRef(currentTitle); // useRef returns an object with a property 'initialValue' and a value of whatever was passed in. This allows us to reference a value that's not needed for rendering
24+
const timeout = useRef(null);
25+
const { port } = props;
1226

13-
// function that launches the main app and refreshes the page
27+
// function that launches the main app
1428
function launch(): void {
1529
dispatch(launchContentScript(tabs[currentTab]));
16-
// Allow the dispatch to complete before refreshing
17-
setTimeout(() => {
18-
chrome.tabs.reload(currentTab);
19-
}, 100);
2030
}
2131

32+
function reinitialize(): void {
33+
port.postMessage({
34+
action: 'reinitialize',
35+
tabId: currentTab,
36+
});
37+
}
38+
39+
let status = {
40+
// We create a status object that we may use later if tabs[currentTab] exists
41+
contentScriptLaunched: false,
42+
reactDevToolsInstalled: false,
43+
targetPageisaReactApp: false,
44+
};
45+
46+
if (tabs[currentTab]) {
47+
// If we do have a tabs[currentTab] object, we replace the status obj we declared above with the properties of the tabs[currentTab].status
48+
Object.assign(status, tabs[currentTab].status);
49+
}
50+
51+
// hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
52+
useEffect(() => {
53+
// We declare a function
54+
function setLoadingArray(i: number, value: boolean) {
55+
// 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument
56+
if (loadingArray[i] !== value) {
57+
// this conditional helps us avoid unecessary state changes if the element and the value are already the same
58+
const loadingArrayClone = [...loadingArray];
59+
loadingArrayClone[i] = value;
60+
setLoading(loadingArrayClone);
61+
}
62+
}
63+
64+
if (titleTracker.current !== currentTitle) {
65+
// if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
66+
titleTracker.current = currentTitle;
67+
setLoadingArray(0, true);
68+
setLoadingArray(1, true);
69+
setLoadingArray(2, true);
70+
71+
if (timeout.current) {
72+
// if there is a current timeout set, we clear it
73+
clearTimeout(timeout.current);
74+
timeout.current = null;
75+
}
76+
}
77+
78+
if (!status.contentScriptLaunched) {
79+
// if content script hasnt been launched/found, set a timer or immediately update 'loadingArray' state
80+
81+
if (loadingArray[0] === true) {
82+
// if loadingArray[0] is true, then that means our timeout.current is still null so we now set it to a setTimeout function that will flip loadingArray[0] to false after 3 seconds
83+
timeout.current = setTimeout(() => {
84+
setLoadingArray(0, false);
85+
}, 3000); // increased from 1500
86+
}
87+
} else {
88+
setLoadingArray(0, false); // if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.
89+
}
90+
91+
// The next two if statements are written in a way to allow the checking of 'content script hook', 'reactDevTools check', and 'target page is a react app' to be run in chronological order.
92+
if (loadingArray[0] === false && status.contentScriptLaunched === true) {
93+
timeout.current = setTimeout(() => {
94+
setLoadingArray(1, false);
95+
}, 3000); // increased from 1500
96+
setLoadingArray(1, false);
97+
}
98+
if (loadingArray[1] === false && status.reactDevToolsInstalled === true) {
99+
setLoadingArray(2, false);
100+
}
101+
102+
// Unload async function when Error Container is unmounted
103+
return () => {
104+
clearTimeout(timeout.current);
105+
};
106+
}, [status, currentTitle, timeout, loadingArray]); // within our dependency array, we're keeping track of if the status, currentTitle/tab, timeout, or loadingArray changes and we re-run the useEffect hook if they do
107+
22108
return (
23109
<div className='error-container'>
24-
<img src='../assets/whiteBlackSquareLogo.png' alt='Reactime Logo' className='error-logo' />
25-
26-
<div className='error-content'>
27-
<div className='error-alert'>
28-
<div className='error-title'>
29-
<RefreshCw size={20} />
30-
Welcome to Reactime
31-
</div>
32-
33-
<p className='error-description'>
34-
To ensure Reactime works correctly with your React application, please either refresh
35-
your development page or click the launch button below. This allows Reactime to properly
36-
connect with your app and start monitoring state changes.
37-
</p>
38-
<p className='error-description'>
39-
Important: Reactime requires React Developer Tools to be installed. If you haven't
40-
already, please{' '}
41-
<a
42-
href='https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en'
43-
target='_blank'
44-
rel='noopener noreferrer'
45-
className='devtools-link'
46-
>
47-
install React Developer Tools
48-
</a>{' '}
49-
first.
50-
</p>
51-
</div>
52-
53-
<p className='error-note'>
54-
Note: Reactime only works with React applications and by default only launches on URLs
55-
starting with localhost.
56-
</p>
57-
58-
<button type='button' className='launch-button' onClick={launch}>
59-
<PlayCircle size={20} />
60-
Launch Reactime
61-
</button>
62-
63-
<a
64-
href='https://github.com/open-source-labs/reactime'
65-
target='_blank'
66-
rel='noopener noreferrer'
67-
className='github-link'
68-
>
69-
<Github size={18} />
70-
Visit Reactime Github for more information
71-
</a>
110+
<img src='../assets/whiteBlackSquareLogo.png' alt='Reactime Logo' height='50px' />
111+
112+
<h2>Launching Reactime on tab: {currentTitle}</h2>
113+
114+
<div className='loaderChecks'>
115+
<p>Checking if content script has been launched on current tab</p>
116+
<Loader loading={loadingArray[0]} result={status.contentScriptLaunched} />
117+
118+
<p>Checking if React Dev Tools has been installed</p>
119+
<Loader loading={loadingArray[1]} result={status.reactDevToolsInstalled} />
120+
121+
<p>Checking if target is a compatible React app</p>
122+
<Loader loading={loadingArray[2]} result={status.targetPageisaReactApp} />
123+
</div>
124+
125+
<br />
126+
<div className='errorMsg'>
127+
<ErrorMsg
128+
loadingArray={loadingArray}
129+
status={status}
130+
launchContent={launch}
131+
reinitialize={reinitialize}
132+
/>
72133
</div>
134+
<br />
135+
<a
136+
href='https://github.com/open-source-labs/reactime'
137+
target='_blank'
138+
rel='noopener noreferrer'
139+
>
140+
Please visit the Reactime Github for more info.
141+
</a>
73142
</div>
74143
);
75144
}

0 commit comments

Comments
 (0)