However, it’s still a good practice to use a global error boundary to catch any errors outside the scope of an error boundary at a lower level.Figure 8 — Searching for prohibited words in Search.jsWhen a prohibited word is detected not only will an error be thrown, but the SearchErrorBoundary component will also create a customized message displaying the specific word that triggered the error (see Figure 9).Figure 9 — Trapping errors in the Search ComponentAutomating Issue Ticket CreationPhoto by Franck V..on UnsplashThe examples in the previous section were created to demonstrate the basic functionality of a React error boundary..They are, however, not very practical since they trap a particular condition and generate a custom error message..If this is all that is required, it can be better accomplished using more straightforward techniques.Intercepting errors, gathering information defining the state of the application at the time it occurred, and automatically opening a support ticket is a feature valuable to both users and developers..For users, it removes the burden of manually creating a new ticket, and for developers, it improves the type and quality of information needed to resolve the problem.To show how this might be accomplished using React Error Boundaries the componentDidCatch function inSearchErrorBoundary.js has been updated to create a new issue ticket from the data available at the time the error was detected..This includes props containing the current search term that triggered the error..A new GitHub issue is created by the call to createIssue(), and a JSON string representing the issue is returned and added to SearchErrorBoundary's state.The render function generates a customized error message including the link to the new issue in the Meteorite Explorer repo on GitHub.Figure 10 — SearchErrorBoundary.js with Issue GenerationThe createIssue utility function relies on the GitHub Create Issue package to create new issues..This package uses the GitHub REST API V3 and was selected because although GitHub’s GraphQL API V4 supports the creation of issues, it is currently in preview mode and subject to change at any time.The formatGHIssue function creates a Markdown formatted issue body and uses the GitHub Create Issue package to create a new issue..Upon completion, the JSON representation of the new issue is returned to the caller.Figure 11 — createIssue.jsThe formatGHIssue function creates an issue body containing information helpful to the developer such as the identity of the user who experienced the error, environmental data such as the client platform, the error message, and the stack trace..Also, it also adds a label identifying the issue as being a bug.Figure 12 — formatGHIssue.jsWith these changes in place, when an error is intercepted an issue reporting the error is created in GitHub (see Figure 13) and a customized error message is displayed (see Figure 14).Figure 13 — Custom Error Message including a link to autogenerated IssueFigure 14 — Body of Automate Generated IssueMaking it Production-ReadyAs useful as this may seem it’s not production-ready..It’s merely a demonstration of how React Error Boundaries can be used to create a useful application feature..A few additional items to consider to make it production-ready are,Limiting the number of issues automatically generated in a predefined time frame to prevent duplicates and flooding the ticketing system.Searching for existing issues before creating a new one.Ensuring that errors in the issue creation logic don’t result in a recursive loop.Adding user profile data to the ticket as long as it doesn’t contain personal identifying or confidential information.Allowing the user to provide supplemental information as part of an automatically created ticket.. More details