errorbuttons 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# This displays errors in the frontend
+
+## Error Buttons

package/index.js

@@ -0,0 +1,115 @@
+import buttonizer from 'buttonizer';
+
+const defaultDefaultStyles = {
+  borderRadius: '8px',
+  border: '1px solid black',
+  padding: '10px 12px',
+  fontSize: '14px',
+  fontWeight: 'bold',
+  backgroundColor: '#fdd',
+  cursor: 'pointer',
+  outlineOffset: '4px',
+  userSelect: 'none',
+  fontFamily: 'sans-serif',
+  pointerEvents: 'auto',
+  textAlign: 'right',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+};
+
+const defaultHoverStyles = {
+  backgroundColor: '#fbb',
+  outline: '2px solid #fbb',
+};
+
+const defaultFocusStyles = { outline: '2px solid #f99' };
+
+const defaultPressedStyles = { backgroundColor: '#f99' };
+
+const defaultOptionalStyles = {
+  hover: defaultHoverStyles,
+  focus: defaultFocusStyles,
+  default: defaultDefaultStyles,
+};
+
+const defaultTsStyles = {
+  fontWeight: 'normal',
+  fontSize: '12px'
+}
+
+const defaultHolderStyles = {
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+  padding: '10px 12px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  flexWrap: 'wrap-reverse',
+  justifyContent: 'end',
+  alignContent: 'end',
+  alignItems: 'end',
+  gap: '12px',
+  pointerEvents: 'none'
+}
+
+const defaultSpanStyles = {
+  maxWidth: '400px',
+  wordBreak: 'break-word'
+}
+
+export const setupErrorButtons = (myError, options={}) => {
+  const pressedStyles=options.pressedStyles || defaultPressedStyles;
+  const optionalStyles=options.optionalStyles || defaultOptionalStyles;
+  const tsStyles=options.tsStyles || defaultTsStyles;
+  const holderStyles=options.holderStyles || defaultHolderStyles;
+  const idValue=options.idValue || 'statusbuttonerrholder';
+  const title=options.title || `Copy to clipboard and dismiss`;
+  const spanStyles =options.spanStyles || defaultSpanStyles;
+  let errHolder = document.getElementById(idValue);
+  if (!errHolder) {
+    errHolder = document.createElement('div');
+    errHolder.id = idValue;
+    Object.assign(errHolder.style, holderStyles);
+    document.body.appendChild(errHolder);
+  }
+  let statusButton = document.createElement('button');
+  statusButton.type = 'button';
+  statusButton.title = title;
+  let errUrlSpan = document.createElement('span');
+  errUrlSpan.textContent = myError instanceof Response ? myError.url : myError instanceof ErrorEvent ? `${myError.filename} - ${myError.lineno}:${myError.colno}` : myError instanceof Error ? `${myError.name}` : myError instanceof PromiseRejectionEvent ? `Unhandled Promise Rejection` : Array.isArray(myError) ? myError[0] : myError instanceof string ? myError : myError.toString();
+  let errStatusSpan = document.createElement('span');
+  errStatusSpan.textContent = myError instanceof Response ? `${myError.status} - ${myError.statusText}` : myError instanceof ErrorEvent ? `${myError.message}` : myError instanceof Error ? `${myError.message}` : myError instanceof PromiseRejectionEvent ? `${myError.reason}` : Array.isArray(myError) ? myError[1] : myError instanceof string ? myError : myError.toString();
+  let errTimestamp = document.createElement('span');
+  Object.assign(errUrlSpan.style, spanStyles);
+  Object.assign(errStatusSpan.style, spanStyles);
+  Object.assign(errTimestamp.style, spanStyles);
+  Object.assign(errTimestamp.style, tsStyles);
+  errTimestamp.textContent = `${new Date().toLocaleString()}`;
+  statusButton.appendChild(errUrlSpan);
+  statusButton.appendChild(errStatusSpan);
+  statusButton.appendChild(errTimestamp);
+  statusButton.addEventListener('click', async function (e) {
+    const parsedError = {
+      url: myError.url,
+      filename: myError.filename,
+      colno: myError.colno,
+      lineno: myError.lineno,
+      name: myError.name,
+      status: myError.status,
+      statusText: myError.statusText,
+      message: myError.message,
+      reason: myError.reason,
+      timestamp: errTimestamp.textContent
+    }
+    navigator.clipboard.writeText(JSON.stringify(parsedError, null, 2));
+    statusButton.remove();
+  });
+  buttonizer(statusButton, pressedStyles, optionalStyles, false, false);
+  errHolder.appendChild(statusButton);
+  return statusButton;
+}
+
+export default setupErrorButtons;

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "errorbuttons",
+  "version": "1.0.0",
+  "license": "ISC",
+  "author": "Jack Montfort",
+  "type": "module",
+  "main": "index.js",
+  "dependencies": {
+    "buttonizer": "^1.0.47"
+  }
+}