the changes

Author: RedMan13

src/components/crash-message/crash-message.jsx

@@ -5,6 +5,7 @@ import {FormattedMessage} from 'react-intl';
 
 import styles from './crash-message.css';
 import reloadIcon from './reload.svg';
+import { downloadLogs } from '../../lib/pm-log-capture.js';
 
 const CrashMessage = props => (
     <div className={styles.crashWrapper}>
@@ -25,7 +26,7 @@ const CrashMessage = props => (
                     defaultMessage={'We are so sorry, but it looks like the page has crashed.' +
                         ' Please refresh your page to try' +
                         ' again.' +
-                        ' If the problem persists, please report this error to our Discord.'}
+                        ' If the problem persists, please report the downloadable error below to our Discord.'}
                     description="Message to inform the user that page has crashed."
                     id="tw.gui.crashMessage.description"
                 />
@@ -57,6 +58,12 @@ const CrashMessage = props => (
                     id="gui.crashMessage.reload"
                 />
             </button>
+            <button
+                className={styles.reloadButton}
+                onClick={downloadLogs}
+            >
+                {'Download Error'}
+            </button>
         </Box>
     </div>
 );

src/components/menu-bar/menu-bar.jsx

@@ -85,7 +85,7 @@ import sharedMessages from '../../lib/shared-messages';
 import SeeInsideButton from './tw-see-inside.jsx';
 import { notScratchDesktop } from '../../lib/isScratchDesktop.js';
 
-//import { consoleLogs } from '../../lib/pm-log-capture.js';
+import { downloadLogs } from '../../lib/pm-log-capture.js';
 
 const ariaMessages = defineMessages({
     language: {
@@ -207,6 +207,7 @@ class MenuBar extends React.Component {
             'handleClickPackager',
             'handleClickRestorePoints',
             'handleClickSeeCommunity',
+            'handleClickDownloadLogs',
             'handleClickShare',
             'handleKeyPress',
             'handleLanguageMouseUp',
@@ -422,21 +423,7 @@ class MenuBar extends React.Component {
             this.props.onRequestCloseAbout();
         };
     }
-    /*
-      - hidden until this is actually helpful for developers
-      - unhide when a solution is found for not blocking error tracking/using 3rd parties
-    handleClickDownloadLogs() {
-        const str = JSON.stringify(consoleLogs);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        document.body.append(a);
-        const url = window.URL.createObjectURL(new Blob([str]));
-        a.href = url;
-        a.download = 'pm-log-trace.json';
-        a.click();
-        window.URL.revokeObjectURL(url);
-        a.remove();
-    }*/
+    handleClickDownloadLogs() { downloadLogs(); }
     render() {
         const saveNowMessage = (
             <FormattedMessage
@@ -860,6 +847,9 @@ class MenuBar extends React.Component {
                                             id="pm.menuBar.moreSettings"
                                         />
                                     </MenuItem>
+                                    <MenuItem onClick={this.handleClickDownloadLogs}>
+                                        Download Logs
+                                    </MenuItem>
                                 </MenuSection>
                             </MenuBarMenu>
                         </div>

src/lib/pm-log-capture.js

@@ -142,18 +142,63 @@ const parseStack = (stack, url, line, column) => {
     if (stack.split('\n', 2)[0].includes('@')) return _parseFirefoxStack(stack);
     return _parseChromeStack(stack);
 };
+const downloadLogs = async () => {
+    const str = JSON.stringify(consoleLogs);
+    let blob = new Blob([str]);
+    let filename = 'pm-error-download.json';
+    // if we can, include the project
+    if (vm) {
+        filename = 'pm-error-download.pmp';
+        const archive = vm._saveProjectZip();
+        archive.file('logs.json', blob);
+        blob = await archive.generateAsync({
+            type: 'blob',
+            mimeType: 'application/x.scratch.sb3',
+            compression: 'DEFLATE'
+        });
+    }
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    document.body.append(a);
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = filename;
+    a.click();
+    window.URL.revokeObjectURL(url);
+    a.remove();
+};
+window.downloadLogs = downloadLogs;
 
 window.addEventListener('error', e =>
     push('error', e.message, parseStack(e.error.stack, e.filename, e.lineno, e.colno)));
 window.addEventListener('unhandledrejection', e => push('promiseError', e.reason, []));
-for (const name of ['log', 'warn', 'error', 'debug', 'info']) {
-    const item = window.console[name];
-    window.console[name] = (...args) => {
-        let stack = [];
-        if (browserHasStack) stack = parseStack(new Error().stack);
-        push(name, args, stack);
-        item(...args);
-    };
+class StackTrace extends Error {
+    constructor() {
+        super('');
+        if (this.stack.split('\n', 2)[0].includes('@'))
+            this.stack = this.stack
+                .split('\n')
+                .slice(2, 3)
+                .join('\n');
+        else {
+            // chrome is weird ngl
+            const lines = this.stack
+                .split('\n')
+                .slice(0, 3);
+            lines.splice(1, 2);
+            this.stack = lines.join('\n');
+        }
+    }
 }
-
-export { consoleLogs, parseStack, push };
+if (!String(window.location.href).startsWith(`http://localhost:`)) {
+    for (const name of ['log', 'warn', 'error', 'debug', 'info']) {
+        const item = window.console[name];
+        window.console[name] = (...args) => {
+            let stack = [];
+            if (browserHasStack) stack = parseStack(new Error().stack);
+            push(name, args, stack);
+            item.call(console, ...args, new StackTrace());
+        };
+    }
+}
+export { consoleLogs, parseStack, push, downloadLogs };