[feature]: Debugging Reporter

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Report a bug you've found in our code!
-title: "[bug]: A short, simple sentence describing the bug"
+title: '[bug]: A short, simple sentence describing the bug'
 labels: bug
 assignees: ''
 ---
@@ -19,44 +19,54 @@ Feel free to remove this section before creating this issue.
 -->
 
 **Describe the bug**
+
 A clear and concise description of what the bug is.
 
 **To reproduce**
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 **Expected behavior**
+
 A clear and concise description of what you expected to happen.
 
 **Screenshots**
+
 If applicable, add screenshots to help explain your problem.
 
 **Additional context**
-Add any other context about the problem here.
+
+Paste the output of `yarn build:report`, and any other context about the problem, here.
 
 **Possible solutions**
+
 Add any ideas about possible solutions to the problem here.
 
 **Please complete the following device information:**
- - Device [e.g. iPhone6, PC, Mac, Pixel3]:
- - OS [e.g. iOS8.1, Windows 10]:
- - Browser [e.g. Chrome, Safari]:
- - Browser Version [e.g. 22]:
- - Magento Version:
- - PWA Studio Version:
- - NPM version `npm -v`:
- - Node Version `node -v`:
+
+-   Device [e.g. iPhone6, PC, Mac, Pixel3]:
+-   OS [e.g. iOS8.1, Windows 10]:
+-   Browser [e.g. Chrome, Safari]:
+-   Browser Version [e.g. 22]:
+-   Magento Version:
+-   PWA Studio Version:
+-   NPM version `npm -v`:
+-   Node Version `node -v`:
 
 <!-- Complete the following sections to help us apply appropriate labels! -->
+
 **Please let us know what packages this bug is in regards to:**
-- [ ] `venia-concept`
-- [ ] `venia-ui`
-- [ ] `pwa-buildpack`
-- [ ] `peregrine`
-- [ ] `pwa-devdocs`
-- [ ] `upward-js`
-- [ ] `upward-spec`
-- [ ] `create-pwa`
+
+-   [ ] `venia-concept`
+-   [ ] `venia-ui`
+-   [ ] `pwa-buildpack`
+-   [ ] `peregrine`
+-   [ ] `pwa-devdocs`
+-   [ ] `upward-js`
+-   [ ] `upward-spec`
+-   [ ] `create-pwa`

packages/pwa-buildpack/lib/cli/generate-build-report.js

@@ -0,0 +1,212 @@
+const { existsSync } = require('fs');
+const os = require('os');
+const path = require('path');
+const { spawnSync } = require('child_process');
+const https = require('https');
+const fetch = require('node-fetch');
+const agent = new https.Agent({
+    rejectUnauthorized: false
+});
+
+const fetchWithAgent = async url => {
+    return await fetch(url, { agent });
+};
+
+const prettyLogger = require('../util/pretty-logger');
+const { loadEnvironment } = require('../Utilities');
+
+const { uniqBy } = require('lodash');
+const { sampleBackends: defaultSampleBackends } = require('./create-project');
+
+const removeDuplicateBackends = backendEnvironments =>
+    uniqBy(backendEnvironments, 'url');
+
+const fetchSampleBackendUrls = async () => {
+    try {
+        const res = await fetch(
+            'https://fvp0esmt8f.execute-api.us-east-1.amazonaws.com/default/getSampleBackends'
+        );
+        const { sampleBackends } = await res.json();
+
+        return removeDuplicateBackends([
+            ...sampleBackends.environments,
+            ...defaultSampleBackends.environments
+        ]).map(({ url }) => url);
+    } catch {
+        return defaultSampleBackends.environments.map(({ url }) => url);
+    }
+};
+
+const cwd = process.cwd();
+
+function inspectDependencies(package) {
+    prettyLogger.info('Inspecting Dependencies');
+
+    // Inspect all '@magento/...' dependencies.
+    const magentoDependencies = [
+        ...Object.keys(package.dependencies),
+        ...Object.keys(package.devDependencies)
+    ].filter(dependency => dependency.startsWith('@magento/'));
+
+    let dependencies;
+    if (existsSync(path.resolve(cwd, 'yarn.lock'))) {
+        // using yarn
+        dependencies = getYarnDependencies(magentoDependencies);
+        prettyLogger.log(
+            `Found ${dependencies.size} @magento dependencies in yarn.lock`
+        );
+    } else if (existsSync(path.resolve(cwd, 'package-lock.json'))) {
+        // using npm
+        dependencies = getNpmDependencies(magentoDependencies);
+        prettyLogger.log(
+            `Found ${
+                dependencies.size
+            } @magento dependencies in package-lock.json`
+        );
+    } else {
+        throw new Error(
+            'Dependencies have not been installed, please run `yarn install` or npm install` then generate the build report again.'
+        );
+    }
+
+    function logMapElements(value, key) {
+        prettyLogger.log(`${key} @ ${value}`);
+    }
+
+    dependencies.forEach(logMapElements);
+}
+
+function getYarnDependencies(dependencies) {
+    const dependencyMap = new Map();
+
+    dependencies.map(packageName => {
+        const whyBuffer = spawnSync('yarn', ['why', packageName]);
+        const grepBuffer = spawnSync('grep', ['Found'], {
+            input: whyBuffer.stdout
+        });
+
+        // [ 'info \r=> Found "@magento/pwa-buildpack@7.0.0"', '' ]
+        const outputArray = grepBuffer.stdout.toString().split('\n');
+
+        // [ '7.0.0' ]
+        const parsedOutputArray = outputArray
+            .filter(output => output.length > 0)
+            .map(output => output.split('@')[2].replace('"', ''));
+
+        dependencyMap.set(packageName, parsedOutputArray.toString());
+    });
+
+    return dependencyMap;
+}
+
+function getNpmDependencies(dependencies) {
+    const dependencyMap = new Map();
+
+    dependencies.map(packageName => {
+        const listbuffer = spawnSync('npm', ['list', packageName]);
+        const grepBuffer = spawnSync('grep', ['└──'], {
+            input: listbuffer.stdout
+        });
+
+        // TODO: handle multiple versions installed when not dupe. ie "npm ls core-js"
+        const [, , version] = grepBuffer.stdout
+            .toString()
+            .split('\n') // ["│ └── @magento/upward-js@5.0.0  deduped", "└── @magento/upward-js@5.0.0"]
+            .filter(text => !text.includes('deduped'))[0] // ["└── @magento/upward-js@5.0.0"]
+            .split('@'); // [ '└── ', 'magento/upward-js', '5.0.0' ]
+
+        dependencyMap.set(packageName, version);
+    });
+
+    return dependencyMap;
+}
+
+async function inspectBackend() {
+    prettyLogger.info('Inspecting Magento Backend');
+    const [projectConfig, sampleBackends] = await Promise.all([
+        loadEnvironment(
+            // Load .env from root
+            path.resolve(cwd)
+        ),
+        fetchSampleBackendUrls()
+    ]);
+
+    if (projectConfig.error) {
+        throw projectConfig.error;
+    }
+
+    const {
+        env: { MAGENTO_BACKEND_URL }
+    } = projectConfig;
+
+    if (sampleBackends.includes(MAGENTO_BACKEND_URL)) {
+        prettyLogger.log('Using sample backend: ', MAGENTO_BACKEND_URL);
+    } else {
+        prettyLogger.log('Not using sample backend.');
+    }
+
+    // Upcheck
+    try {
+        await fetchWithAgent(MAGENTO_BACKEND_URL);
+        prettyLogger.log('Backend is UP!');
+    } catch (e) {
+        prettyLogger.log('Backend is DOWN!');
+        prettyLogger.error('Reason:', e);
+    }
+
+    // Backend Version
+    try {
+        const res = await fetchWithAgent(
+            `${MAGENTO_BACKEND_URL}/magento_version`
+        );
+        prettyLogger.log('Magento Version:', await res.text());
+    } catch (e) {
+        prettyLogger.warn(
+            'Unable to determine Magento version - ensure that the Magento_Version route is enabled when generating this report.'
+        );
+        prettyLogger.error('Reason:', e);
+    }
+}
+
+function inspectBuildEnv() {
+    const osVersion = os.version();
+    const nodeVersion = process.version();
+    const versionBuffer = spawnSync('npm', ['-v']);
+    const npmVersion = versionBuffer.stdout.toString();
+
+    prettyLogger.info('Inspecting System');
+    prettyLogger.log('OS:', osVersion);
+    prettyLogger.log('Node Version:', nodeVersion);
+    prettyLogger.log('NPM Version:', npmVersion);
+}
+/**
+ * main
+ */
+async function buildpackCli() {
+    const package = require(path.resolve(cwd, 'package.json'));
+    prettyLogger.info(
+        `Generating build report for ${package.name}@${
+            package.version
+        }. This may take a moment.`
+    );
+    prettyLogger.log('\n');
+
+    inspectDependencies(package);
+
+    prettyLogger.log('\n');
+
+    await inspectBackend();
+
+    prettyLogger.log('\n');
+
+    inspectBuildEnv();
+
+    prettyLogger.log('\n');
+}
+
+module.exports.command = 'generate-build-report';
+
+module.exports.describe =
+    'Generates a report of general build information that can be used when debugging an issue.';
+
+module.exports.handler = buildpackCli;

packages/venia-concept/_buildpack/create.js

@@ -42,6 +42,7 @@ async function createProjectFromVenia({ fs, tasks, options }) {
         'build:analyze',
         'build:dev',
         'build:prod',
+        'build:report',
         'clean',
         'download-schema',
         'lint',

packages/venia-concept/package.json

@@ -15,6 +15,7 @@
     "build:debug": "node --inspect-brk ./node_modules/.bin/webpack --no-progress --env.mode",
     "build:dev": "yarn run clean && yarn run validate-queries && webpack --no-progress --env.mode development",
     "build:prod": "yarn run clean && webpack --no-progress --env.mode production",
+    "build:report": "buildpack generate-build-report",
     "buildpack": "buildpack",
     "clean": "rimraf dist",
     "download-schema": "graphql get-schema --project venia --insecure",

packages/venia-ui/upward.yml

@@ -12,7 +12,7 @@ veniaResponse:
         # handled by the top-level 'veniaProxy' object, which is a ProxyResolver
         # that passes the request through to the backing Magento server.
         - matches: request.url.pathname
-          pattern: '^/(graphql|rest|media)(/|$)'
+          pattern: '^/(magento_version|graphql|rest|media)(/|$)'
           use: veniaProxy
         - matches: request.url.pathname
           pattern: '^/(robots\.txt|favicon\.ico|manifest\.json)'