Added new GitHub issue form for React DevTools bug reports (#21450)
Added a new bug report template built with GitHub issue forms: https://gh-community.github.io/issue-template-feedback/structured/ And updated DevTools bug report link to send information formatted for this new template.
Brian Vaughn committed
May 7, 2021 at 08:46 UTC
85b543c6b477def6366e3442d2eb432f6510cdfa
8 files changed
+107
-41
.github/ISSUE_TEMPLATE/devtools_bug_report.yml
new
+78
@@ -0,0 +1,78 @@
1
+name: "DevTools bug report"
2
+description: "Report a problem with React DevTools"
3
+title: "[DevTools Bug]: "
4
+labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]
5
+body:
6
+- type: input
7
+ attributes:
8
+ label: Website or app
9
+ description: |
10
+ Which website or app were you using when the bug happened?
11
+ placeholder: |
12
+ e.g. website URL, public GitHub repo, or Code Sandbox app
13
+ validations:
14
+ required: true
15
+- type: textarea
16
+ attributes:
17
+ label: Repro steps
18
+ description: |
19
+ What were you doing on the website or app when the bug happened? Detailed information helps maintainers reproduce and fix bugs.
20
+
21
+ Issues filed without repro steps may be closed.
22
+ placeholder: |
23
+ Example bug report:
24
+ 1. Log in with username/password
25
+ 2. Click "Messages" on the left menu
26
+ 3. Open any message in the list
27
+ validations:
28
+ required: true
29
+- type: dropdown
30
+ attributes:
31
+ label: How often does this bug happen?
32
+ description: |
33
+ Following the repro steps above, how easily are you able to reproduce this bug?
34
+ options:
35
+ - Every time
36
+ - Often
37
+ - Sometimes
38
+ - Only once
39
+ validations:
40
+ required: true
41
+- type: input
42
+ id: automated_package
43
+ attributes:
44
+ label: DevTools package (automated)
45
+ description: |
46
+ Please do not edit this field.
47
+- type: input
48
+ id: automated_version
49
+ attributes:
50
+ label: DevTools version (automated)
51
+ description: |
52
+ Please do not edit this field.
53
+- type: input
54
+ id: automated_error_message
55
+ attributes:
56
+ label: Error message (automated)
57
+ description: |
58
+ Please do not edit this field.
59
+- type: textarea
60
+ id: automated_call_stack
61
+ attributes:
62
+ label: Error call stack (automated)
63
+ description: |
64
+ Please do not edit this field.
65
+ render: text
66
+- type: textarea
67
+ id: automated_component_stack
68
+ attributes:
69
+ label: Error component stack (automated)
70
+ description: |
71
+ Please do not edit this field.
72
+ render: text
73
+- type: input
74
+ id: automated_github_query_string
75
+ attributes:
76
+ label: GitHub query string (automated)
77
+ description: |
78
+ Please do not edit this field.
\ No newline at end of file
packages/react-devtools-core/webpack.backend.js
+1
@@ -54,6 +54,7 @@ module.exports = {
54
__EXTENSION__: false,
55
__PROFILE__: false,
56
__TEST__: NODE_ENV === 'test',
57
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
58
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
59
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
60
}),
packages/react-devtools-core/webpack.standalone.js
+1
@@ -54,6 +54,7 @@ module.exports = {
54
__EXTENSION__: false,
55
__PROFILE__: false,
56
__TEST__: NODE_ENV === 'test',
57
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
58
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
59
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
60
'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-extensions/webpack.backend.js
+1
@@ -51,6 +51,7 @@ module.exports = {
51
__DEV__: true,
52
__PROFILE__: false,
53
__EXPERIMENTAL__: true,
54
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
55
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
56
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
57
}),
packages/react-devtools-extensions/webpack.config.js
+1
@@ -58,6 +58,7 @@ module.exports = {
58
__EXTENSION__: true,
59
__PROFILE__: false,
60
__TEST__: NODE_ENV === 'test',
61
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
62
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
63
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
64
'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-inline/webpack.config.js
+1
@@ -52,6 +52,7 @@ module.exports = {
52
__EXTENSION__: false,
53
__PROFILE__: false,
54
__TEST__: NODE_ENV === 'test',
55
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
56
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
57
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
58
'process.env.NODE_ENV': `"${NODE_ENV}"`,
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+23
-41
@@ -12,9 +12,14 @@ import Icon from '../Icon';
12
import {searchGitHubIssuesURL} from './githubAPI';
13
import styles from './shared.css';
14
15
-function encodeURIWrapper(string: string): string {
16
- return encodeURI(string).replace(/#/g, '%23');
17
-}
15
+const LABELS = [
16
+ 'Component: Developer Tools',
17
+ 'Type: Bug',
18
+ 'Status: Unconfirmed',
19
+];
20
+
21
+// This must match the filename in ".github/ISSUE_TEMPLATE/"
22
+const TEMPLATE = 'devtools_bug_report.yml';
23
24
type Props = {|
25
callStack: string | null,
@@ -35,44 +40,21 @@ export default function ReportNewIssue({
40
const gitHubAPISearch =
41
errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
42
38
- const title = `Error: "${errorMessage || ''}"`;
39
- const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
40
-
41
- const body = `
42
-<!-- Please answer both questions below before submitting this issue. -->
43
-
44
-### Which website or app were you using when the bug happened?
45
-
46
-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.
47
-
48
-### What were you doing on the website or app when the bug happened?
49
-
50
-If possible, please describe how to reproduce this bug on the website or app mentioned above:
51
-1. <!-- FILL THIS IN -->
52
-2. <!-- FILL THIS IN -->
53
-3. <!-- FILL THIS IN -->
54
-
55
-<!--------------------------------------------------->
56
-<!-- Please do not remove the text below this line -->
57
-<!--------------------------------------------------->
58
-
59
-### Generated information
60
-
61
-DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
62
-
63
-Call stack:
64
-${callStack || '(none)'}
65
-
66
-Component stack:
67
-${componentStack || '(none)'}
68
-
69
-GitHub URL search query:
70
-${gitHubAPISearch}
71
- `;
72
-
73
- bugURL += `/issues/new?labels=${encodeURIWrapper(
74
- labels.join(','),
75
- )}&title=${encodeURIWrapper(title)}&body=${encodeURIWrapper(body.trim())}`;
43
+ const title = `[DevTools Error] ${errorMessage || ''}`;
44
+
45
+ const parameters = [
46
+ `template=${TEMPLATE}`,
47
+ `labels=${encodeURIComponent(LABELS.join(','))}`,
48
+ `title=${encodeURIComponent(title)}`,
49
+ `automated_package=${process.env.DEVTOOLS_PACKAGE || ''}`,
50
+ `automated_version=${process.env.DEVTOOLS_VERSION || ''}`,
51
+ `automated_error_message=${encodeURIComponent(errorMessage || '')}`,
52
+ `automated_call_stack=${encodeURIComponent(callStack || '')}`,
53
+ `automated_component_stack=${encodeURIComponent(componentStack || '')}`,
54
+ `automated_github_query_string=${gitHubAPISearch}`,
55
+ ];
56
+
57
+ bugURL += `/issues/new?${parameters.join('&')}`;
58
59
return (
60
<div className={styles.GitHubLinkRow}>
packages/react-devtools-shell/webpack.config.js
+1
@@ -52,6 +52,7 @@ const config = {
52
__PROFILE__: false,
53
__TEST__: NODE_ENV === 'test',
54
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
55
+ 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
56
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
57
}),
58
],