feat: improve opening a new issue flow (#34434)

Ref: [Slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1645003443213449) When opening a new issue, it is desired that the user has checked if the `canary` release not already have fixed their issue, since we do not backport fixes to previous Next.js versions. - added a CLI warning when `next info` runs that looks like this: ![image](https://user-images.githubusercontent.com/18369201/154309275-01ccc979-01e5-4ccb-8a22-5deab64765a0.png) This links to a message docs page with more information and some useful links. - refactored our bug report templates to be more clear and removed the fields that are now unnecessary (since running `next info` is expected to run on releases that already have it) - Made browser/deployment optional, as in most cases those fields are irrelevant. We still ask them, but mention that they are only needed if relevant. - Asking for the exact browser version now ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Feb 16, 2022 · d88793d · d88793d
1 parent 07fe541
commit d88793d
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 62 deletions.
diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml b/.github/ISSUE_TEMPLATE/1.bug_report.yml
@@ -7,49 +7,28 @@ body:
       value: Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.
   - type: markdown
     attributes:
-      value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
-  - type: markdown
-    attributes:
-      value: 'Please first verify if your issue exists in the Next.js canary release line: `npm install next@canary`.'
-  - type: markdown
-    attributes:
-      value: 'next@canary is the beta version of Next.js. It includes all features and fixes that are pending to land on the stable release line.'
+      value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions ["Help" section](https://github.com/vercel/next.js/discussions/categories/help).
+  - type: checkboxes
+    attributes:
+      label: Verify canary release
+      description: '`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
+      options:
+        - label: I verified that the issue exists in Next.js canary release
+          required: true
   - type: textarea
     attributes:
-      label: Run `next info` (available from version 12.0.8 and up)
+      label: Provide environment information
       description: Please run `next info` in the root directory of your project and paste the results. You might need to use `npx --no-install next info` if next is not in the current PATH.
     validations:
       required: false
   - type: input
     attributes:
-      label: What version of Next.js are you using?
-      description: 'For example: 10.0.1'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: What version of Node.js are you using?
-      description: 'For example: 12.0.0'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: What browser are you using?
-      description: 'For example: Chrome, Safari'
-    validations:
-      required: true
-  - type: input
-    attributes:
-      label: What operating system are you using?
-      description: 'For example: macOS, Windows'
-    validations:
-      required: true
+      label: What browser are you using? (if relevant)
+      description: 'Please specify the exact version. For example: Chrome 100.0.4878.0'
   - type: input
     attributes:
-      label: How are you deploying your application?
+      label: How are you deploying your application? (if relevant)
       description: 'For example: next start, next export, Vercel, Other platform'
-    validations:
-      required: true
   - type: textarea
     attributes:
       label: Describe the Bug

diff --git a/.github/ISSUE_TEMPLATE/2.example_bug_report.yml b/.github/ISSUE_TEMPLATE/2.example_bug_report.yml
@@ -1,49 +1,40 @@
 name: Example Bug Report
-description: Create a bug report for the examples
+description: Create a bug report for one of the Next.js examples
 labels: 'type: example,template: bug'
 body:
   - type: markdown
     attributes:
-      value: Thanks for taking the time to file a examples bug report! Please fill out this form as completely as possible.
+      value: Thanks for taking the time to file a bug report for [one of the examples](https://github.com/vercel/next.js/tree/canary/examples)! Please fill out this form as completely as possible.
   - type: markdown
     attributes:
-      value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
-  - type: input
-    attributes:
-      label: What example does this report relate to?
-      description: 'For example: with-styled-components'
-    validations:
-      required: true
-  - type: input
+      value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions ["Help" section](https://github.com/vercel/next.js/discussions/categories/help).
+  - type: checkboxes
     attributes:
-      label: What version of Next.js are you using?
-      description: 'For example: 10.0.1'
-    validations:
-      required: true
-  - type: input
+      label: Verify canary release
+      description: '`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
+      options:
+        - label: I verified that the issue exists in Next.js canary release
+          required: true
+  - type: textarea
     attributes:
-      label: What version of Node.js are you using?
-      description: 'For example: 12.0.0'
+      label: Provide environment information
+      description: Please run `next info` in the root directory of your project and paste the results. You might need to use `npx --no-install next info` if next is not in the current PATH.
     validations:
-      required: true
+      required: false
   - type: input
     attributes:
-      label: What browser are you using?
-      description: 'For example: Chrome, Safari'
+      label: "What example does this report relate to? See a complete list in the [examples folder](https://github.com/vercel/next.js/tree/canary/examples). Note: Examples not in the examples folder might be maintained by the example's library author. Check out their projects before opening the issue on Next.js"
+      description: 'For example: with-styled-components'
     validations:
       required: true
   - type: input
     attributes:
-      label: What operating system are you using?
-      description: 'For example: macOS, Windows'
-    validations:
-      required: true
+      label: What browser are you using? (if relevant)
+      description: 'Please specify the exact version. For example: Chrome 100.0.4878.0'
   - type: input
     attributes:
-      label: How are you deploying your application?
+      label: How are you deploying your application? (if relevant)
       description: 'For example: next start, next export, Vercel, Other platform'
-    validations:
-      required: true
   - type: textarea
     attributes:
       label: Describe the Bug

diff --git a/errors/manifest.json b/errors/manifest.json
@@ -619,6 +619,10 @@
         {
           "title": "ignored-compiler-options",
           "path": "/errors/ignored-compiler-options.md"
+        },
+        {
+          "title": "opening-an-issue",
+          "path": "/errors/opening-an-issue.md"
         }
       ]
     }

diff --git a/errors/opening-an-issue.md b/errors/opening-an-issue.md
@@ -0,0 +1,28 @@
+# Opening a new Issue
+
+#### Why This Message Occurred
+
+When `next info` was run, Next.js detected that it's was not on the latest canary release.
+
+`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta.
+
+Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.
+
+Run the following in the codebase:
+
+```sh
+npm install next@canary
+```
+
+or
+
+```sh
+yarn add next@canary
+```
+
+And go through the prepared reproduction steps once again, and check if the issue still exists.
+
+### Useful Links
+
+- [Video: How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?v=cuoNzXFLitc)
+- [Contributing to Next.js](https://github.com/vercel/next.js/blob/canary/contributing.md)
diff --git a/packages/next/cli/next-info.ts b/packages/next/cli/next-info.ts
@@ -4,6 +4,7 @@ import childProcess from 'child_process'
 
 import chalk from 'next/dist/compiled/chalk'
 import arg from 'next/dist/compiled/arg/index.js'
+import fetch from 'next/dist/compiled/node-fetch'
 import { printAndExit } from '../server/lib/utils'
 import { cliCommand } from '../bin/next'
 import isError from '../lib/is-error'
@@ -41,6 +42,8 @@ const nextInfo: cliCommand = async (argv) => {
     return
   }
 
+  const installedRelease = getPackageVersion('next')
+
   console.log(`
     Operating System:
       Platform: ${os.platform()}
@@ -52,9 +55,36 @@ const nextInfo: cliCommand = async (argv) => {
       Yarn: ${getBinaryVersion('yarn')}
       pnpm: ${getBinaryVersion('pnpm')}
     Relevant packages:
-      next: ${getPackageVersion('next')}
+      next: ${installedRelease}
       react: ${getPackageVersion('react')}
-      react-dom: ${getPackageVersion('react-dom')}`)
+      react-dom: ${getPackageVersion('react-dom')}
+`)
+
+  try {
+    const res = await fetch(
+      'https://api.github.com/repos/vercel/next.js/releases'
+    )
+    const releases = await res.json()
+    const newestRelease = releases[0].tag_name.replace(/^v/, '')
+
+    if (installedRelease !== newestRelease) {
+      console.warn(
+        `${chalk.yellow(
+          chalk.bold('warn')
+        )}  - Latest canary version not detected, detected: "${installedRelease}", newest: "${newestRelease}".
+        Please try the latest canary version (\`npm install next@canary\`) to confirm the issue still exists before creating a new issue.
+        Read more - https://nextjs.org/docs/messages/opening-an-issue`
+      )
+    }
+  } catch {
+    console.warn(
+      `${chalk.yellow(
+        chalk.bold('warn')
+      )}  - Failed to fetch latest canary version. Visit https://github.com/vercel/next.js/releases. Detected "${installedRelease}".
+      Make sure to try the latest canary version (\`npm install next@canary\`) to confirm the issue still exists before creating a new issue.
+      Read more - https://nextjs.org/docs/messages/opening-an-issue`
+    )
+  }
 }
 
 export { nextInfo }