diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml new file mode 100644 index 0000000000000..9e59c21af7b1c --- /dev/null +++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml @@ -0,0 +1,78 @@ +name: "DevTools bug report" +description: "Report a problem with React DevTools" +title: "[DevTools Bug]: " +labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"] +body: +- type: input + attributes: + label: Website or app + description: | + Which website or app were you using when the bug happened? + placeholder: | + e.g. website URL, public GitHub repo, or Code Sandbox app + validations: + required: true +- type: textarea + attributes: + label: Repro steps + description: | + What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs. + + Issues filed without repro steps may be closed. + placeholder: | + Example bug report: + 1. Log in with username/password + 2. Click "Messages" on the left menu + 3. Open any message in the list + validations: + required: true +- type: dropdown + attributes: + label: How often does this bug happen? + description: | + Following the repro steps above, how easily are you able to reproduce this bug? + options: + - Every time + - Often + - Sometimes + - Only once + validations: + required: true +- type: input + id: automated_package + attributes: + label: DevTools package (automated) + description: | + Please do not edit this field. +- type: input + id: automated_version + attributes: + label: DevTools version (automated) + description: | + Please do not edit this field. +- type: input + id: automated_error_message + attributes: + label: Error message (automated) + description: | + Please do not edit this field. +- type: textarea + id: automated_call_stack + attributes: + label: Error call stack (automated) + description: | + Please do not edit this field. + render: text +- type: textarea + id: automated_component_stack + attributes: + label: Error component stack (automated) + description: | + Please do not edit this field. + render: text +- type: input + id: automated_github_query_string + attributes: + label: GitHub query string (automated) + description: | + Please do not edit this field. \ No newline at end of file diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js index 79d97e6a84b35..e33e4b89c6dde 100644 --- a/packages/react-devtools-core/webpack.backend.js +++ b/packages/react-devtools-core/webpack.backend.js @@ -54,6 +54,7 @@ module.exports = { __EXTENSION__: false, __PROFILE__: false, __TEST__: NODE_ENV === 'test', + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, }), diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 64556ae65812c..8f5b4e6dcac93 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -54,6 +54,7 @@ module.exports = { __EXTENSION__: false, __PROFILE__: false, __TEST__: NODE_ENV === 'test', + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index 885d9aa03b50a..6f63b44e1bab6 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/packages/react-devtools-extensions/webpack.backend.js @@ -51,6 +51,7 @@ module.exports = { __DEV__: true, __PROFILE__: false, __EXPERIMENTAL__: true, + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, }), diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index f754a99b86a59..df813e82bcc90 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -58,6 +58,7 @@ module.exports = { __EXTENSION__: true, __PROFILE__: false, __TEST__: NODE_ENV === 'test', + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index 6be627a6262b2..30481673ad0c2 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/packages/react-devtools-inline/webpack.config.js @@ -52,6 +52,7 @@ module.exports = { __EXTENSION__: false, __PROFILE__: false, __TEST__: NODE_ENV === 'test', + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, 'process.env.NODE_ENV': `"${NODE_ENV}"`, diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js index 3546c94387111..7dd12be657282 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js @@ -12,9 +12,14 @@ import Icon from '../Icon'; import {searchGitHubIssuesURL} from './githubAPI'; import styles from './shared.css'; -function encodeURIWrapper(string: string): string { - return encodeURI(string).replace(/#/g, '%23'); -} +const LABELS = [ + 'Component: Developer Tools', + 'Type: Bug', + 'Status: Unconfirmed', +]; + +// This must match the filename in ".github/ISSUE_TEMPLATE/" +const TEMPLATE = 'devtools_bug_report.yml'; type Props = {| callStack: string | null, @@ -35,44 +40,21 @@ export default function ReportNewIssue({ const gitHubAPISearch = errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)'; - const title = `Error: "${errorMessage || ''}"`; - const labels = ['Component: Developer Tools', 'Status: Unconfirmed']; - - const body = ` - - -### Which website or app were you using when the bug happened? - -Please provide a link to the URL of the website (if it is public), a CodeSandbox (https://codesandbox.io/s/new) example that reproduces the bug, or a project on GitHub that we can checkout and run locally. - -### What were you doing on the website or app when the bug happened? - -If possible, please describe how to reproduce this bug on the website or app mentioned above: -1. -2. -3. - - - - - -### Generated information - -DevTools version: ${process.env.DEVTOOLS_VERSION || ''} - -Call stack: -${callStack || '(none)'} - -Component stack: -${componentStack || '(none)'} - -GitHub URL search query: -${gitHubAPISearch} - `; - - bugURL += `/issues/new?labels=${encodeURIWrapper( - labels.join(','), - )}&title=${encodeURIWrapper(title)}&body=${encodeURIWrapper(body.trim())}`; + const title = `[DevTools Error] ${errorMessage || ''}`; + + const parameters = [ + `template=${TEMPLATE}`, + `labels=${encodeURIComponent(LABELS.join(','))}`, + `title=${encodeURIComponent(title)}`, + `automated_package=${process.env.DEVTOOLS_PACKAGE || ''}`, + `automated_version=${process.env.DEVTOOLS_VERSION || ''}`, + `automated_error_message=${encodeURIComponent(errorMessage || '')}`, + `automated_call_stack=${encodeURIComponent(callStack || '')}`, + `automated_component_stack=${encodeURIComponent(componentStack || '')}`, + `automated_github_query_string=${gitHubAPISearch}`, + ]; + + bugURL += `/issues/new?${parameters.join('&')}`; return (
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js index c61e8850295c1..a64d2838dbcbd 100644 --- a/packages/react-devtools-shell/webpack.config.js +++ b/packages/react-devtools-shell/webpack.config.js @@ -52,6 +52,7 @@ const config = { __PROFILE__: false, __TEST__: NODE_ENV === 'test', 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, + 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`, 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, }), ],