Add instructions on fixing Failed to open device on Linux

src/components/modals/information.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AccentButtonLarge } from '../inputs/accent-button';
+
+interface InformationModalProps {
+  children?: React.ReactNode;
+  closeModal: Function;
+}
+
+const ModalBackgroundDiv = styled.div`
+  background-color: rgba(0,0,0,0.7);
+  display: flex;
+  flex-wrap: wrap;
+  position: fixed;
+  right: 0;
+  top: 0;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  width: 100%;
+  z-index: 2;
+  padding: 0;
+  margin: 0;
+`;
+
+const ModalDiv = styled.div`
+  background: var(--bg_gradient);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  height: wrap-content;
+  max-width: 80em;
+  border: 0.5em solid var(--border_color_cell);
+  border-radius: 0.5em;
+  padding: 1em;
+`;
+
+export const InformationModal: React.FC<InformationModalProps> = ({ children, closeModal }) => (
+  <ModalBackgroundDiv>
+    <ModalDiv>
+      {children}
+      <AccentButtonLarge onClick={() => closeModal()}>Okay</AccentButtonLarge>
+    </ModalDiv>
+  </ModalBackgroundDiv>
+);

src/components/monospace-text/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IconButtonContainer } from '../inputs/icon-button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconButtonTooltip } from '../inputs/tooltip';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+
+interface MonospaceTextProps {
+  text: string;
+}
+
+const TextComponent = styled.div`
+  font-family: monospace;
+  position: relative;
+`;
+
+const ClipboardButtonDiv = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+export const MonospaceText: React.FC<MonospaceTextProps> = ({ text }) => {
+  return (
+    <TextComponent>
+      <ul>
+        {text?.split('\n').map((line, i) => (
+          <li key={i}>
+            {line.split('').map((char, i) => {
+              if (char === '\t') {
+                return <>
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                  <span>&nbsp;</span>
+                </>
+              }
+              if (char === ' ') {
+                return <span>&nbsp;</span>;
+              }
+              return <span>{char}</span>
+            })}
+          </li>
+        ))}
+      </ul>
+      <ClipboardButtonDiv>
+        <IconButtonContainer onClick={() => navigator.clipboard.writeText(text)}>
+          <FontAwesomeIcon
+            size={'sm'}
+            color="var(--color_label)"
+            icon={faCopy}
+          />
+          <IconButtonTooltip>Copy to clipboard</IconButtonTooltip>
+        </IconButtonContainer>
+      </ClipboardButtonDiv>
+    </TextComponent>
+  )
+};

src/components/panes/errors.tsx

@@ -4,6 +4,7 @@ import {
   faComputer,
   faDownload,
   faKeyboard,
+  faMagicWandSparkles,
   faWarning,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -31,6 +32,7 @@ import {
   CategoryIconContainer,
 } from './grid';
 import {Pane} from './pane';
+import { InformationModal } from '../modals/information';
 
 const Container = styled.div`
   display: flex;
@@ -81,34 +83,55 @@ const ErrorListContainer: React.FC<
 const AppErrors: React.FC<{}> = ({}) => {
   const errors = useAppSelector(getAppErrors);
   const dispatch = useDispatch();
+  const [fixDialog, setFixDialog] = useState<any>(undefined);
   return (
-    <ErrorListContainer
-      clear={() => dispatch(clearAppErrors())}
-      save={() => saveAppErrors(errors)}
-      hasErrors={!!errors.length}
-    >
-      {errors.map(
-        ({
-          timestamp,
-          deviceInfo: {productId, productName, vendorId},
-          message: error,
-        }) => (
-          <Container key={timestamp}>
-            {timestamp}
-            <ul>
-              {error?.split('\n').map((line) => (
-                <li>{line}</li>
-              ))}
-            </ul>
-            <ul>
-              <li>Device: {productName}</li>
-              <li>Vid: {printId(vendorId)}</li>
-              <li>Pid: {printId(productId)}</li>
-            </ul>
-          </Container>
-        ),
-      )}
-    </ErrorListContainer>
+    <>
+      {fixDialog !== undefined && fixDialog}
+      <ErrorListContainer
+        clear={() => dispatch(clearAppErrors())}
+        save={() => saveAppErrors(errors)}
+        hasErrors={!!errors.length}
+      >
+        {errors.map(
+          ({
+            timestamp,
+            deviceInfo: {productId, productName, vendorId},
+            message: error,
+            isPotentiallyUserFixable: isPotentiallyUserFixable,
+            userFix: userFix,
+          }) => (
+            <Container key={timestamp}>
+              {timestamp}
+              <ul>
+                {error?.split('\n').map((line, i) => (
+                  <li key={i}>{line}</li>
+                ))}
+              </ul>
+              <ul>
+                <li>Device: {productName}</li>
+                <li>Vid: {printId(vendorId)}</li>
+                <li>Pid: {printId(productId)}</li>
+              </ul>
+              {isPotentiallyUserFixable && userFix !== undefined &&
+                <IconButtonContainer onClick={() => setFixDialog(
+                    <InformationModal closeModal={() => setFixDialog(undefined)}>
+                      {userFix()}
+                    </InformationModal>
+                  )}
+                >
+                  <FontAwesomeIcon
+                    size={'sm'}
+                    color="var(--color_label)"
+                    icon={faMagicWandSparkles}
+                  />
+                  <IconButtonTooltip>Fix</IconButtonTooltip>
+                </IconButtonContainer>
+              }
+            </Container>
+          ),
+        )}
+      </ErrorListContainer>
+    </>
   );
 };
 

src/store/errorsSlice.ts

@@ -13,6 +13,8 @@ export type AppError = {
   timestamp: string;
   message: string;
   deviceInfo: DeviceInfo;
+  isPotentiallyUserFixable?: boolean;
+  userFix?: () => JSX.Element | undefined;
 };
 
 export const extractDeviceInfo = (device: DeviceInfo): DeviceInfo => ({

src/utils/keyboard-api.ts

@@ -10,6 +10,7 @@ import {
   logAppError,
   logKeyboardAPIError,
 } from 'src/store/errorsSlice';
+import { getUserFixForError } from './user-fixable-errors';
 
 // VIA Command IDs
 
@@ -625,10 +626,13 @@ export class KeyboardAPI {
           res(ans);
         } catch (e: any) {
           const deviceInfo = extractDeviceInfo(this.getHID());
+          const [isPotentiallyUserFixable, userFix] = getUserFixForError(e, deviceInfo);
           store.dispatch(
             logAppError({
               message: getMessageFromError(e),
               deviceInfo,
+              isPotentiallyUserFixable,
+              userFix,
             }),
           );
           rej(e);

src/utils/user-fixable-errors.tsx

@@ -0,0 +1,49 @@
+import { MonospaceText } from 'src/components/monospace-text';
+import { DeviceInfo } from 'src/types/types';
+
+const LinuxHidrawFix = (deviceInfo: DeviceInfo): () => JSX.Element => {
+  const textUdev = `SUBSYSTEM=="usb", ATTR{idVendor}=="${deviceInfo.vendorId.toString(16).toUpperCase().padStart(4, '0')}", ATTR{idProduct}=="${deviceInfo.productId.toString(16).toUpperCase().padStart(4, '0')}", TAG+="uaccess""
+KERNEL=="hidraw*", MODE="0660", TAG+="uaccess", TAG+="udev-acl"`
+
+  const textDevHidraw = `#!/bin/bash
+HID_NAME='${deviceInfo.productName}'
+# loop over possible devices
+for f in /dev/hidraw*
+do
+	DEVICE_NAME=$(basename \${f})
+	if grep "$HID_NAME" "/sys/class/hidraw/\${DEVICE_NAME}/device/uevent";
+	then
+		# device matches product name
+		echo Running sudo chmod a+rw "$f"
+		sudo chmod a+rw "$f"
+	fi
+done`;
+
+  const textRunDevHidrawScript = `bash script.sh`;
+
+  return () => (
+    <div>
+      <p>This error can happen on Linux when the browser is not allowed to access the keyboard HID device. You can fix this either permanently or temporarily.</p>
+      <p>Create udev rule to fix it permanently. To do this, create a file called</p>
+      {/* Rule has to precede /usr/lib/udev/rules.d/73-seat-late.rules, see https://wiki.archlinux.org/title/Udev#Allowing_regular_users_to_use_devices */}
+      <MonospaceText text="/etc/udev/rules.d/50-qmk.rules" />
+      <p>with the following content:</p>
+      <MonospaceText text={textUdev} />
+      <p>Unplug and plug your keyboard back in. Reload this website and it should work.</p>
+      <p>If you want to temporarily allow the browser access to the keyboard device, create a script with the following content:</p>
+      <MonospaceText text={textDevHidraw} />
+      <p>And run it:</p>
+      <MonospaceText text={textRunDevHidrawScript} />
+      <p>Reload this website and it should work.</p>
+    </div>
+  )
+};
+
+export function getUserFixForError(e: any, deviceInfo: DeviceInfo): [boolean, () => JSX.Element | undefined] {
+  if (e instanceof DOMException) {
+    if (e.name === 'NotAllowedError' && e.message.includes('Failed to open the device')) {
+      return [true, LinuxHidrawFix(deviceInfo)];
+    }
+  }
+  return [false, () => undefined];
+}