From 2ce14858b3ee7f1e5fb80a5314916a2d4b7bb62e Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:30:54 +0100 Subject: [PATCH 1/7] ErrorBoundary: include service worker state --- src/components/explorer.jsx | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/explorer.jsx b/src/components/explorer.jsx index 5edb599a..9218daf6 100644 --- a/src/components/explorer.jsx +++ b/src/components/explorer.jsx @@ -1,4 +1,4 @@ -import React, { Component, lazy, Suspense, useMemo, useRef, useState } from 'react'; +import React, { Component, lazy, Suspense, useEffect, useRef, useState } from 'react'; import { connect } from 'react-redux'; import Obstruction from 'obstruction'; import localforage from 'localforage'; @@ -63,21 +63,40 @@ const styles = (theme) => ({ }); const ErrorFallback = ({ error, componentStack }) => { + const [swInfo, setSwInfo] = useState(''); const [copied, setCopied] = useState(false); const copiedInterval = useRef(null); - const version = import.meta.env.VITE_APP_GIT_SHA || 'unknown'; - const userAgent = window.navigator.userAgent; - const platform = window.navigator.platform; + useEffect(() => { + if ('serviceWorker' in navigator) { + setSwInfo('loading...'); + navigator.serviceWorker.getRegistrations().then((registrations) => { + if (registrations.length === 0) { + setSwInfo('none'); + return; + } + for (const registration of registrations) { + serviceWorkers.push(`${registration.scope} ${registration.active?.state}`); + } + setSwInfo(serviceWorkers.join('; ')); + }).catch((err) => { + setSwInfo(err.toString()); + }); + } else { + setSwInfo('not supported'); + } + }, []); - const information = useMemo(() => `connect version: ${version} + const information = `connect version: ${import.meta.env.VITE_APP_GIT_SHA || 'unknown'} +Build timestamp: ${import.meta.env.VITE_APP_BUILD_TIMESTAMP || 'unknown'} URL: ${window.location.href} -Device: ${platform} -Browser: ${userAgent} +Browser: ${window.navigator.userAgent} Window: ${window.innerWidth}x${window.innerHeight} -${error.toString()}${componentStack}`, [version, userAgent, platform, error, componentStack]); +Service workers: ${swInfo} + +${error.toString()}${componentStack}`; const copyError = async () => { if (copiedInterval.current) { From d5e6080bf6ac86a5c1230ddb505be586517044eb Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:45:02 +0100 Subject: [PATCH 2/7] move ErrorFallback to App.jsx --- src/App.jsx | 10 ++- src/components/ErrorFallback.jsx | 91 ++++++++++++++++++++++++++ src/components/explorer.jsx | 107 ++++--------------------------- 3 files changed, 109 insertions(+), 99 deletions(-) create mode 100644 src/components/ErrorFallback.jsx diff --git a/src/App.jsx b/src/App.jsx index 9202fb12..4a2ecd85 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,6 +15,8 @@ import { getZoom, getClipsNav } from './url'; import { isDemo } from './demo'; import store, { history } from './store'; +import ErrorFallback from './components/ErrorFallback'; + const Explorer = lazy(() => import('./components/explorer')); const AnonymousLanding = lazy(() => import('./components/anonymous')); @@ -120,9 +122,11 @@ class App extends Component { return ( - - { showLogin ? this.anonymousRoutes() : this.authRoutes() } - + }> + + { showLogin ? this.anonymousRoutes() : this.authRoutes() } + + ); diff --git a/src/components/ErrorFallback.jsx b/src/components/ErrorFallback.jsx new file mode 100644 index 00000000..64a78990 --- /dev/null +++ b/src/components/ErrorFallback.jsx @@ -0,0 +1,91 @@ +import { useEffect, useRef, useState } from 'react'; + +import { Check, ContentCopy } from '../icons'; + +const ErrorFallback = ({ error, componentStack }) => { + const [swInfo, setSwInfo] = useState(''); + const [copied, setCopied] = useState(false); + const copiedInterval = useRef(null); + + console.log({ error, componentStack }); + + useEffect(() => { + if ('serviceWorker' in navigator) { + setSwInfo('loading...'); + navigator.serviceWorker.getRegistrations().then((registrations) => { + if (registrations.length === 0) { + setSwInfo('none'); + return; + } + for (const registration of registrations) { + serviceWorkers.push(`${registration.scope} ${registration.active?.state}`); + } + setSwInfo(serviceWorkers.join('; ')); + }).catch((err) => { + setSwInfo(err.toString()); + }); + } else { + setSwInfo('not supported'); + } + }, []); + + const information = `connect version: ${import.meta.env.VITE_APP_GIT_SHA || 'unknown'} +Build timestamp: ${import.meta.env.VITE_APP_BUILD_TIMESTAMP || 'unknown'} +URL: ${window.location.href} + +Browser: ${window.navigator.userAgent} +Window: ${window.innerWidth}x${window.innerHeight} + +Service workers: ${swInfo} + +${error.toString()}${componentStack}`; + + const copyError = async () => { + if (copiedInterval.current) { + clearTimeout(copiedInterval.current); + } + try { + await navigator.clipboard.writeText('```' + information + '```'); + setCopied(true); + copiedInterval.current = setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }; + + return ( +
+
+

Oops!

+

Something went wrong. Please reload the page.

+

+ If you continue to have problems, let us know on Discord{` `} + in the #connect-feedback channel. +

+

+ + Reload + +

+
+
+ Show debugging information +
+ 
+            {information}
+
+ +
+
+
+ ); +}; + +export default ErrorFallback; diff --git a/src/components/explorer.jsx b/src/components/explorer.jsx index 9218daf6..14726b56 100644 --- a/src/components/explorer.jsx +++ b/src/components/explorer.jsx @@ -1,4 +1,4 @@ -import React, { Component, lazy, Suspense, useEffect, useRef, useState } from 'react'; +import React, { Component, lazy, Suspense } from 'react'; import { connect } from 'react-redux'; import Obstruction from 'obstruction'; import localforage from 'localforage'; @@ -17,12 +17,11 @@ import AppDrawer from './AppDrawer'; import PullDownReload from './utils/PullDownReload'; import { analyticsEvent, selectDevice, updateDevice } from '../actions'; -import ResizeHandler from './ResizeHandler'; +import init from '../actions/startup'; import Colors from '../colors'; -import { Check, ContentCopy } from '../icons'; import { verifyPairToken, pairErrorToMessage } from '../utils'; import { play, pause } from '../timeline/playback'; -import init from '../actions/startup'; +import ResizeHandler from './ResizeHandler'; const ClipView = lazy(() => import('./ClipView')); const DriveView = lazy(() => import('./DriveView')); @@ -62,88 +61,6 @@ const styles = (theme) => ({ }, }); -const ErrorFallback = ({ error, componentStack }) => { - const [swInfo, setSwInfo] = useState(''); - const [copied, setCopied] = useState(false); - const copiedInterval = useRef(null); - - useEffect(() => { - if ('serviceWorker' in navigator) { - setSwInfo('loading...'); - navigator.serviceWorker.getRegistrations().then((registrations) => { - if (registrations.length === 0) { - setSwInfo('none'); - return; - } - for (const registration of registrations) { - serviceWorkers.push(`${registration.scope} ${registration.active?.state}`); - } - setSwInfo(serviceWorkers.join('; ')); - }).catch((err) => { - setSwInfo(err.toString()); - }); - } else { - setSwInfo('not supported'); - } - }, []); - - const information = `connect version: ${import.meta.env.VITE_APP_GIT_SHA || 'unknown'} -Build timestamp: ${import.meta.env.VITE_APP_BUILD_TIMESTAMP || 'unknown'} -URL: ${window.location.href} - -Browser: ${window.navigator.userAgent} -Window: ${window.innerWidth}x${window.innerHeight} - -Service workers: ${swInfo} - -${error.toString()}${componentStack}`; - - const copyError = async () => { - if (copiedInterval.current) { - clearTimeout(copiedInterval.current); - } - try { - await navigator.clipboard.writeText('```' + information + '```'); - setCopied(true); - copiedInterval.current = setTimeout(() => setCopied(false), 2000); - } catch (err) { - console.error('Failed to copy:', err); - } - }; - - return ( -
-

Oops!

-

Something went wrong. Please reload the page.

-

- If you continue to have problems, let us know on Discord{` `} - in the #connect-feedback channel. -

-

- - Reload - -

-
- Show debugging information -
- 
-            {information}
-
- -
-
-
- ); -}; - class ExplorerApp extends Component { constructor(props) { super(props); @@ -310,16 +227,14 @@ class ExplorerApp extends Component { style={ drawerStyles } />
- }> - - { noDevicesUpsell - ? - : (clips - ? - : (zoom ? : ) - ) } - - + + { noDevicesUpsell + ? + : (clips + ? + : (zoom ? : ) + ) } +
From 7fa7f24f594566610553d153fa06e8228b989517 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:45:11 +0100 Subject: [PATCH 3/7] test --- src/App.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 4a2ecd85..e0deec6f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,6 +19,7 @@ import ErrorFallback from './components/ErrorFallback'; const Explorer = lazy(() => import('./components/explorer')); const AnonymousLanding = lazy(() => import('./components/anonymous')); +const Fred = lazy(() => import('./Fred'[0])); class App extends Component { constructor(props) { @@ -86,7 +87,7 @@ class App extends Component { - + ); } @@ -97,7 +98,7 @@ class App extends Component { - + ); } From a71c3085e4c7967aa739e87de7ed4b4a25708b80 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:48:09 +0100 Subject: [PATCH 4/7] fix --- src/components/ErrorFallback.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ErrorFallback.jsx b/src/components/ErrorFallback.jsx index 64a78990..54f8eeb1 100644 --- a/src/components/ErrorFallback.jsx +++ b/src/components/ErrorFallback.jsx @@ -17,6 +17,7 @@ const ErrorFallback = ({ error, componentStack }) => { setSwInfo('none'); return; } + const serviceWorkers = []; for (const registration of registrations) { serviceWorkers.push(`${registration.scope} ${registration.active?.state}`); } From 0c0afa37ad9ee992f34588db2e59f71781275ae4 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:49:39 +0100 Subject: [PATCH 5/7] Revert "test" This reverts commit 7fa7f24f594566610553d153fa06e8228b989517. --- src/App.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e0deec6f..4a2ecd85 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,7 +19,6 @@ import ErrorFallback from './components/ErrorFallback'; const Explorer = lazy(() => import('./components/explorer')); const AnonymousLanding = lazy(() => import('./components/anonymous')); -const Fred = lazy(() => import('./Fred'[0])); class App extends Component { constructor(props) { @@ -87,7 +86,7 @@ class App extends Component { - + ); } @@ -98,7 +97,7 @@ class App extends Component { - + ); } From 45701e630d464bad24f8d4476a29ecbc421859e3 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Mon, 10 Jul 2023 14:50:54 +0100 Subject: [PATCH 6/7] test 2 --- src/components/utils/SwitchLoading.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/utils/SwitchLoading.jsx b/src/components/utils/SwitchLoading.jsx index 89a233df..55394417 100644 --- a/src/components/utils/SwitchLoading.jsx +++ b/src/components/utils/SwitchLoading.jsx @@ -93,6 +93,7 @@ class SwitchLoading extends Component { const isChecked = this.state.checked !== null ? this.state.checked : checked; const loadingCls = (loading || this.state.loading) ? { icon: classes.switchThumbLoading } : {}; + console.debug('just a test'); const switchEl = ( Date: Mon, 10 Jul 2023 14:54:24 +0100 Subject: [PATCH 7/7] Revert "test 2" This reverts commit 45701e630d464bad24f8d4476a29ecbc421859e3. --- src/components/utils/SwitchLoading.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/utils/SwitchLoading.jsx b/src/components/utils/SwitchLoading.jsx index 55394417..89a233df 100644 --- a/src/components/utils/SwitchLoading.jsx +++ b/src/components/utils/SwitchLoading.jsx @@ -93,7 +93,6 @@ class SwitchLoading extends Component { const isChecked = this.state.checked !== null ? this.state.checked : checked; const loadingCls = (loading || this.state.loading) ? { icon: classes.switchThumbLoading } : {}; - console.debug('just a test'); const switchEl = (