mirror of
https://github.com/SteamDeckHomebrew/decky-loader.git
synced 2026-06-17 08:47:49 +00:00
jbofill
acaf165219
* improve the error screen visuals * comment out placeholder buttons * run formatter * Refactor DeckyErrorBoundary styles and text - Removed gray text class usage - Removed styles reminiscent of Steam BPM - Fixed typos * Further refactor of DeckyErrorBoundary.tsx - Change background/text of buttons to be closer to Steam Deck UI - Make panel background not reliant on transparency and have a neutral gray - Bold "likely occurred" text - Make swipe prompt appear in the center of a horizontal bar, drawing more attention to it - Make "An error occurred" text smaller, as it isn't helpful for troubleshooting - Add text clarifying solutions are in recommended order and how to get more help - Add "Retry the action or restart" to the left of Retry, Restart Steam, and Restart Decky buttons - Move disabling Decky to beneath the Decky update checking * Revert header boldness change * add disable plugin buttons to error screen * Set background to black --------- Co-authored-by: EMERALD <info@eme.wtf>
446 lines
17 KiB
TypeScript
446 lines
17 KiB
TypeScript
import { joinClassNames, sleep } from '@decky/ui';
|
|
import { FunctionComponent, useEffect, useReducer, useState } from 'react';
|
|
|
|
import { disablePlugin, uninstallPlugin } from '../plugin';
|
|
import { VerInfo, doRestart, doShutdown } from '../updater';
|
|
import { ValveReactErrorInfo, getLikelyErrorSourceFromValveReactError } from '../utils/errors';
|
|
import { useSetting } from '../utils/hooks/useSetting';
|
|
import { UpdateBranch } from './settings/pages/general/BranchSelect';
|
|
|
|
interface DeckyErrorBoundaryProps {
|
|
error: ValveReactErrorInfo;
|
|
errorKey: string;
|
|
identifier: string;
|
|
reset: () => void;
|
|
}
|
|
|
|
declare global {
|
|
interface Window {
|
|
SystemNetworkStore?: any;
|
|
}
|
|
}
|
|
|
|
const classes = {
|
|
root: 'deckyErrorBoundary',
|
|
likelyOccurred: 'likely-occured-msg',
|
|
panel: 'panel-section',
|
|
panelHeader: 'panel-header',
|
|
trace: 'trace',
|
|
rowList: 'row-list',
|
|
rowItem: 'row-item',
|
|
buttonDescRow: 'button-description-row',
|
|
flexRowWGap: 'flex-row',
|
|
marginBottom: 'margin-bottom',
|
|
swipePrompt: 'swipe-prompt',
|
|
};
|
|
|
|
const vars = {
|
|
scrollBarwidth: '18px',
|
|
rootMarginLeft: '15px',
|
|
panelXPadding: '20px',
|
|
};
|
|
|
|
export const startSSH = DeckyBackend.callable('utilities/start_ssh');
|
|
export const starrCEFForwarding = DeckyBackend.callable('utilities/allow_remote_debugging');
|
|
|
|
function ipToString(ip: number) {
|
|
return [(ip >>> 24) & 255, (ip >>> 16) & 255, (ip >>> 8) & 255, (ip >>> 0) & 255].join('.');
|
|
}
|
|
|
|
// Intentionally not localized since we can't really trust React here
|
|
const DeckyErrorBoundary: FunctionComponent<DeckyErrorBoundaryProps> = ({ error, identifier, reset }) => {
|
|
const [actionLog, addLogLine] = useReducer((log: string, line: string) => (log += '\n' + line), '');
|
|
const [actionsEnabled, setActionsEnabled] = useState<boolean>(true);
|
|
const [debugAllowed, setDebugAllowed] = useState<boolean>(true);
|
|
// Intentionally doesn't use DeckyState.
|
|
const [versionInfo, setVersionInfo] = useState<VerInfo>();
|
|
const [errorSource, wasCausedByPlugin, shouldReportToValve] = getLikelyErrorSourceFromValveReactError(error);
|
|
useEffect(() => {
|
|
if (!shouldReportToValve) DeckyPluginLoader.errorBoundaryHook.temporarilyDisableReporting();
|
|
DeckyPluginLoader.updateVersion().then(setVersionInfo);
|
|
}, []);
|
|
|
|
const [selectedBranch, setSelectedBranch] = useSetting<UpdateBranch>('branch', UpdateBranch.Stable);
|
|
const [isChecking, setIsChecking] = useState<boolean>(false);
|
|
const [updateProgress, setUpdateProgress] = useState<number>(-1);
|
|
const [versionToUpdateTo, setSetVersionToUpdateTo] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
const a = DeckyBackend.addEventListener('updater/update_download_percentage', (percentage) => {
|
|
setUpdateProgress(percentage);
|
|
});
|
|
|
|
const b = DeckyBackend.addEventListener('updater/finish_download', () => {
|
|
setUpdateProgress(-2);
|
|
});
|
|
|
|
return () => {
|
|
DeckyBackend.removeEventListener('updater/update_download_percentage', a);
|
|
DeckyBackend.removeEventListener('updater/finish_download', b);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<style>
|
|
{`
|
|
*:has(> .${classes.root}) {
|
|
margin-top: var(--basicui-header-height);
|
|
overflow: scroll !important;
|
|
background: #000;
|
|
}
|
|
*:has(> .${classes.root})::-webkit-scrollbar {
|
|
display: initial !important;
|
|
width: ${vars.scrollBarwidth};
|
|
height: 0px;
|
|
}
|
|
*:has(> .${classes.root})::-webkit-scrollbar-thumb {
|
|
background: #4349535e;
|
|
}
|
|
.${classes.root} {
|
|
color: #93929e;
|
|
font-size: 15px;
|
|
margin: 10px 0px 40px ${vars.rootMarginLeft};
|
|
width: calc(100vw - ${vars.scrollBarwidth} - ${vars.rootMarginLeft});
|
|
overflow: visible;
|
|
}
|
|
.${classes.root} button,
|
|
.${classes.root} select {
|
|
border: none;
|
|
padding: 4px 16px !important;
|
|
background: #333;
|
|
color: #ddd;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
height: 28px;
|
|
}
|
|
.${classes.panel} {
|
|
background: #080808;
|
|
padding: 8px ${vars.panelXPadding};
|
|
border-radius: 3px;
|
|
/* box-shadow: 9px 9px 20px -5px rgb(0 0 0 / 89%); */
|
|
}
|
|
.${classes.panelHeader} {
|
|
font-size: 18px;
|
|
font-weight: bolder;
|
|
text-transform: uppercase;
|
|
}
|
|
.${classes.likelyOccurred} {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #588fb4;
|
|
}
|
|
.${classes.rowItem} {
|
|
position: relative;
|
|
}
|
|
.${classes.rowItem}:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4.5px;
|
|
left: 5px;
|
|
right: 15px;
|
|
height: 0.5px;
|
|
background: #3c3c3c47;
|
|
}
|
|
.${classes.flexRowWGap},
|
|
.${classes.buttonDescRow},
|
|
.${classes.rowList},
|
|
.${classes.panel} {
|
|
display: flex;
|
|
}
|
|
|
|
.${classes.rowList},
|
|
.${classes.panel} {
|
|
flex-direction: column;
|
|
}
|
|
.${classes.flexRowWGap},
|
|
.${classes.rowList} {
|
|
gap: 8px;
|
|
}
|
|
.${classes.marginBottom} {
|
|
margin-bottom: 10px;
|
|
}
|
|
.${classes.buttonDescRow} {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.${classes.swipePrompt} {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
font-style: italic;
|
|
font-size: small;
|
|
margin: 16px 0;
|
|
}
|
|
.${classes.swipePrompt} span {
|
|
padding: 0 8px;
|
|
background-color: #000;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.${classes.swipePrompt}::before,
|
|
.${classes.swipePrompt}::after {
|
|
content: "";
|
|
flex-grow: 1;
|
|
border-bottom: 1px solid #474752;
|
|
top: 50%;
|
|
}
|
|
.${classes.swipePrompt}::before {
|
|
right: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.${classes.swipePrompt}::after {
|
|
left: 50%;
|
|
margin-left: 8px;
|
|
}
|
|
`}
|
|
</style>
|
|
<div className={classes.root}>
|
|
<div className={classes.marginBottom}>An error occurred while rendering this content.</div>
|
|
<pre className={joinClassNames(classes.marginBottom)} style={{ marginTop: '0px' }}>
|
|
<code>
|
|
{identifier && `Error Reference: ${identifier}`}
|
|
{versionInfo?.current && `\nDecky Version: ${versionInfo.current}`}
|
|
</code>
|
|
</pre>
|
|
<div className={joinClassNames(classes.likelyOccurred, classes.marginBottom)}>
|
|
This error likely occurred in {errorSource}.
|
|
</div>
|
|
{actionLog?.length > 0 && (
|
|
<pre>
|
|
<code>
|
|
Running actions...
|
|
{actionLog}
|
|
</code>
|
|
</pre>
|
|
)}
|
|
{actionsEnabled && (
|
|
<div className={classes.panel}>
|
|
<div className={classes.flexRowWGap} style={{ alignItems: 'center', marginBottom: '8px' }}>
|
|
<div className={classes.panelHeader}>Actions</div>
|
|
<div style={{ fontSize: 'small', fontStyle: 'italic' }}>
|
|
Use the touch screen. Solutions are listed in the recommended order. If you are still experiencing
|
|
issues, please post in the #loader-support channel at decky.xyz/discord.
|
|
</div>
|
|
</div>
|
|
<div className={classes.rowList}>
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
Retry the action or restart
|
|
<div className={classes.flexRowWGap}>
|
|
<button onClick={reset}>Retry</button>
|
|
<button
|
|
onClick={() => {
|
|
addLogLine('Restarting Steam...');
|
|
SteamClient.User.StartRestart(false);
|
|
}}
|
|
>
|
|
Restart Steam
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
setActionsEnabled(false);
|
|
addLogLine('Restarting Decky...');
|
|
doRestart();
|
|
await sleep(2000);
|
|
addLogLine('Reloading UI...');
|
|
}}
|
|
>
|
|
Restart Decky
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{wasCausedByPlugin && (
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
Disable or uninstall the suspected plugin
|
|
<div className={classes.flexRowWGap}>
|
|
<button
|
|
onClick={async () => {
|
|
setActionsEnabled(false);
|
|
addLogLine(`Disabling ${errorSource}...`);
|
|
await disablePlugin(errorSource);
|
|
await sleep(1000);
|
|
addLogLine('Restarting Decky...');
|
|
doRestart();
|
|
await sleep(2000);
|
|
addLogLine('Restarting Steam...');
|
|
await sleep(500);
|
|
SteamClient.User.StartRestart(false);
|
|
}}
|
|
>
|
|
Disable {errorSource}
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
setActionsEnabled(false);
|
|
addLogLine(`Uninstalling ${errorSource}...`);
|
|
await uninstallPlugin(errorSource);
|
|
await DeckyPluginLoader.frozenPluginsService.invalidate();
|
|
await DeckyPluginLoader.hiddenPluginsService.invalidate();
|
|
await sleep(1000);
|
|
addLogLine('Restarting Decky...');
|
|
doRestart();
|
|
await sleep(2000);
|
|
addLogLine('Restarting Steam...');
|
|
await sleep(500);
|
|
SteamClient.User.StartRestart(false);
|
|
}}
|
|
>
|
|
Uninstall {errorSource}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
Disable all plugins
|
|
<button
|
|
onClick={async () => {
|
|
setActionsEnabled(false);
|
|
addLogLine(`Disabling plugins...`);
|
|
await DeckyBackend.call('utilities/set_all_plugins_disabled');
|
|
await sleep(1000);
|
|
addLogLine('Restarting Decky...');
|
|
doRestart();
|
|
await sleep(2000);
|
|
addLogLine('Restarting Steam...');
|
|
await sleep(500);
|
|
SteamClient.User.StartRestart(false);
|
|
}}
|
|
>
|
|
Disable All Plugins
|
|
</button>
|
|
</div>
|
|
{
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
{updateProgress > -1
|
|
? 'Update in progress... ' + updateProgress + '%'
|
|
: updateProgress == -2
|
|
? 'Update complete. Restarting...'
|
|
: 'Check for Decky updates'}
|
|
{
|
|
<div className={classes.flexRowWGap}>
|
|
{updateProgress == -1 && (
|
|
<>
|
|
<select
|
|
onChange={async (e) => {
|
|
const branch = parseInt(e.target.value);
|
|
setSelectedBranch(branch);
|
|
setSetVersionToUpdateTo('');
|
|
}}
|
|
>
|
|
<option value="0" selected={selectedBranch == UpdateBranch.Stable}>
|
|
Stable
|
|
</option>
|
|
<option value="1" selected={selectedBranch == UpdateBranch.Prerelease}>
|
|
Pre-Release
|
|
</option>
|
|
<option value="2" selected={selectedBranch == UpdateBranch.Testing}>
|
|
Testing
|
|
</option>
|
|
</select>
|
|
<button
|
|
disabled={updateProgress != -1 || isChecking}
|
|
onClick={async () => {
|
|
if (versionToUpdateTo == '') {
|
|
setIsChecking(true);
|
|
const versionInfo = (await DeckyBackend.callable(
|
|
'updater/check_for_updates',
|
|
)()) as unknown as VerInfo;
|
|
setIsChecking(false);
|
|
if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
|
|
setSetVersionToUpdateTo(versionInfo.remote.tag_name);
|
|
} else {
|
|
setSetVersionToUpdateTo('');
|
|
}
|
|
} else {
|
|
DeckyBackend.callable('updater/do_update')();
|
|
setUpdateProgress(0);
|
|
}
|
|
}}
|
|
>
|
|
{' '}
|
|
{isChecking
|
|
? 'Checking for updates...'
|
|
: versionToUpdateTo != ''
|
|
? 'Update to ' + versionToUpdateTo
|
|
: 'Check for updates'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
Disable Decky until next boot
|
|
<button
|
|
onClick={async () => {
|
|
setActionsEnabled(false);
|
|
addLogLine('Stopping Decky...');
|
|
doShutdown();
|
|
await sleep(5000);
|
|
addLogLine('Restarting Steam...');
|
|
SteamClient.User.StartRestart(false);
|
|
}}
|
|
>
|
|
Disable Decky
|
|
</button>
|
|
</div>
|
|
{debugAllowed && (
|
|
<div className={joinClassNames(classes.rowItem, classes.buttonDescRow)}>
|
|
Enable remote debugging and SSH until next boot (for developers)
|
|
<button
|
|
onClick={async () => {
|
|
setDebugAllowed(false);
|
|
addLogLine('Enabling CEF debugger forwarding...');
|
|
await starrCEFForwarding();
|
|
addLogLine('Enabling SSH...');
|
|
await startSSH();
|
|
addLogLine('Ready for debugging!');
|
|
if (window?.SystemNetworkStore?.wirelessNetworkDevice?.ip4?.addresses?.[0]?.ip) {
|
|
const ip = ipToString(window.SystemNetworkStore.wirelessNetworkDevice.ip4.addresses[0].ip);
|
|
addLogLine(`CEF Debugger: http://${ip}:8081`);
|
|
addLogLine(`SSH: deck@${ip}`);
|
|
}
|
|
}}
|
|
>
|
|
Enable
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{actionsEnabled && (
|
|
<div className={classes.swipePrompt}>
|
|
<span>Swipe to scroll</span>
|
|
</div>
|
|
)}
|
|
<div className={classes.panel}>
|
|
<div className={classes.panelHeader}>Trace</div>
|
|
<pre
|
|
style={{
|
|
margin: `8px calc(-1 * ${vars.panelXPadding})`,
|
|
userSelect: 'auto',
|
|
overflowX: 'scroll',
|
|
padding: `0px ${vars.panelXPadding}`,
|
|
maskImage: `linear-gradient(to right, transparent, black ${vars.panelXPadding}, black calc(100% - ${vars.panelXPadding}), transparent)`,
|
|
}}
|
|
>
|
|
<code>
|
|
{error.error.stack}
|
|
{'\n\n'}
|
|
Component Stack:
|
|
{error.info.componentStack}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DeckyErrorBoundary;
|