Add GitHub API query to bug report template (facebook#21421)

This may help debug why sometimes the GitHub API search seems to not find a match when it should.
koto · Jun 15, 2021 · 17b2988 · 17b2988
1 parent 8b83403
commit 17b2988
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -9,6 +9,7 @@
 
 import * as React from 'react';
 import Icon from '../Icon';
+import {searchGitHubIssuesURL} from './githubAPI';
 import styles from './shared.css';
 
 function encodeURIWrapper(string: string): string {
@@ -31,6 +32,9 @@ export default function ReportNewIssue({
  return null;
  }
 
+ const gitHubAPISearch =
+ errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
+
  const title = `Error: "${errorMessage || ''}"`;
  const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
 
@@ -57,10 +61,13 @@ If possible, please describe how to reproduce this bug on the website or app men
 DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
 
 Call stack:
-${callStack || '(not available)'}
+${callStack || '(none)'}
 
 Component stack:
-${componentStack || '(not available)'}
+${componentStack || '(none)'}
+
+GitHub URL search query:
+${gitHubAPISearch}
  `;
 
  bugURL += `/issues/new?labels=${encodeURIWrapper(

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -14,9 +14,7 @@ export type GitHubIssue = {|
 
 const GITHUB_ISSUES_API = 'https://api.github.com/search/issues';
 
-export async function searchGitHubIssues(
- message: string,
-): Promise<GitHubIssue | null> {
+export function searchGitHubIssuesURL(message: string): string {
  // Remove Fiber IDs from error message (as those will be unique).
  message = message.replace(/"[0-9]+"/g, '');
 
@@ -29,13 +27,19 @@ export async function searchGitHubIssues(
  'repo:facebook/react',
  ];
 
- const response = await fetch(
+ return (
  GITHUB_ISSUES_API +
-  '?q=' +
-  encodeURIComponent(message) +
-  '%20' +
-  filters.map(encodeURIComponent).join('%20'),
+ '?q=' +
+ encodeURIComponent(message) +
+ '%20' +
+ filters.map(encodeURIComponent).join('%20')
  );
+}
+
+export async function searchGitHubIssues(
+ message: string,
+): Promise<GitHubIssue | null> {
+ const response = await fetch(searchGitHubIssuesURL(message));
  const data = await response.json();
  if (data.items.length > 0) {
  const item = data.items[0];