PR Feedback: Added error handling

Author: JasonStoltz

src/app-search/AppSearchDriver.js

@@ -24,6 +24,7 @@ const DEFAULT_STATE = {
  // used to produce the current query results. It is always in sync
  // with the Results State
  current: 1,
+ error: "",
  filters: [],
  resultsPerPage: 0,
  searchTerm: "",
@@ -134,31 +135,39 @@ export default class AppSearchDriver {
  };
  }
 
- return this.client.search(searchTerm, searchOptions).then(resultList => {
- this._setState({
- current: resultList.info.meta.page.current,
- facets: resultList.info.facets,
- filters: filters,
- requestId: resultList.info.meta.request_id,
- results: resultList.results,
- resultsPerPage: resultsPerPage,
- searchTerm: searchTerm,
- sortDirection: sortDirection,
- sortField: sortField,
- totalResults: resultList.info.meta.page.total_results
- });
+ return this.client.search(searchTerm, searchOptions).then(
+ resultList => {
+ this._setState({
+ current: resultList.info.meta.page.current,
+ error: "",
+ facets: resultList.info.facets,
+ filters: filters,
+ requestId: resultList.info.meta.request_id,
+ results: resultList.results,
+ resultsPerPage: resultsPerPage,
+ searchTerm: searchTerm,
+ sortDirection: sortDirection,
+ sortField: sortField,
+ totalResults: resultList.info.meta.page.total_results
+ });
 
- if (!skipPushToUrl) {
- this.URLManager.pushStateToURL({
- current,
- filters,
- resultsPerPage,
- searchTerm,
- sortDirection,
- sortField
+ if (!skipPushToUrl) {
+ this.URLManager.pushStateToURL({
+ current,
+ filters,
+ resultsPerPage,
+ searchTerm,
+ sortDirection,
+ sortField
+ });
+ }
+ },
+ error => {
+ this._setState({
+ error: `An unexpected error occurred: ${error.message}`
  });
  }
- });
+ );
  };
 
  _setState(newState) {
@@ -177,11 +186,28 @@ export default class AppSearchDriver {
  this.subscriptions.push(onStateChange);
  }
 
+ /**
+ * Retrieves all available acitons
+ *
+ * @returns Object All actions
+ */
+ getActions() {
+ return {
+ addFilter: this.addFilter,
+ removeFilter: this.removeFilter,
+ setResultsPerPage: this.setResultsPerPage,
+ setSearchTerm: this.setSearchTerm,
+ setSort: this.setSort,
+ setCurrent: this.setCurrent,
+ trackClickThrough: this.trackClickThrough
+ };
+ }
+
  /**
  * Retrieve current state. Typically used on app initialization. Subsequent
  * state updates should come through subscription.
  *
- * @returns Current state
+ * @returns Object Current state
  */
  getState() {
  // We return a copy of state here, because we want to ensure the state

src/app-search/AppSearchProvider.js

@@ -30,40 +30,10 @@ class AppSearchProvider extends Component {
 
  render() {
  const { children, driver } = this.props;
- const {
- current,
- facets,
- filters,
- requestId,
- results,
- resultsPerPage,
- searchTerm,
- sortDirection,
- sortField,
- totalResults
- } = this.state;
 
  const providerValue = {
- // Search Parameters
- current,
- filters,
- resultsPerPage,
- searchTerm,
- sortDirection,
- sortField,
- // Result State
- facets,
- requestId,
- results,
- totalResults,
- // Actions
- addFilter: driver.addFilter,
- trackClickThrough: driver.trackClickThrough,
- removeFilter: driver.removeFilter,
- setCurrent: driver.setCurrent,
- setResultsPerPage: driver.setResultsPerPage,
- setSearchTerm: driver.setSearchTerm,
- setSort: driver.setSort
+ ...this.state,
+ ...driver.getActions()
  };
 
  return (

src/components/Body.js

@@ -2,6 +2,7 @@ import React from "react";
 
 import Facets from "../containers/Facets";
 import PagingInfo from "../containers/PagingInfo";
+import ErrorBoundary from "../containers/ErrorBoundary";
 import Paging from "../containers/Paging";
 import Results from "../containers/Results";
 import ResultsPerPage from "../containers/ResultsPerPage";
@@ -11,27 +12,31 @@ import { buildSortOptionsFromConfig } from "../config/config-helper";
 export default function Body() {
  return (
  <div className="reference-ui-body">
- <div className="initial-state-message">Type a search above to begin.</div>
- <div className="search-results">
- <div className="sidebar">
- <Sorting sortOptions={buildSortOptionsFromConfig()} />
- <Facets />
+ <ErrorBoundary>
+ <div className="initial-state-message">
+ Type a search above to begin.
  </div>
- <div className="results">
- <div className="results__header">
- <div className="meta">
- <PagingInfo />
- <ResultsPerPage />
- </div>
- </div>
- <div className="results__body">
- <Results />
+ <div className="search-results">
+ <div className="sidebar">
+ <Sorting sortOptions={buildSortOptionsFromConfig()} />
+ <Facets />
  </div>
- <div className="results__footer">
- <Paging />
+ <div className="results">
+ <div className="results__header">
+ <div className="meta">
+ <PagingInfo />
+ <ResultsPerPage />
+ </div>
+ </div>
+ <div className="results__body">
+ <Results />
+ </div>
+ <div className="results__footer">
+ <Paging />
+ </div>
  </div>
  </div>
- </div>
+ </ErrorBoundary>
  </div>
  );
 }

src/components/ErrorBoundary.js

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+function ErrorBoundary({ children, error }) {
+ if (error) {
+ return <div className="search-error">{error}</div>;
+ }
+
+ return children;
+}
+
+ErrorBoundary.propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.element),
+ PropTypes.element
+ ]).isRequired,
+ error: PropTypes.string.isRequired
+};
+
+export default ErrorBoundary;

src/components/index.js

@@ -1,4 +1,5 @@
 export { default as Body } from "./Body";
+export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as Facet } from "./Facet";
 export { default as Facets } from "./Facets";
 export { default as Header } from "./Header";

src/containers/ErrorBoundary.js

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+
+import withAppSearch from "../app-search/withAppSearch";
+import { ErrorBoundary } from "../components";
+
+class ErrorBoundaryContainer extends Component {
+ static propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.element),
+ PropTypes.element
+ ]).isRequired,
+ error: PropTypes.string.isRequired
+ };
+
+ render() {
+ return <ErrorBoundary {...this.props} />;
+ }
+}
+
+export default withAppSearch(ErrorBoundaryContainer);

src/containers/Results.js

@@ -27,6 +27,7 @@ function formatResultFields(result) {
 }
 class ResultsContainer extends Component {
  static propTypes = {
+ error: PropTypes.string.isRequired,
  results: PropTypes.arrayOf(PropTypes.object).isRequired,
  trackClickThrough: PropTypes.func.isRequired
  };
@@ -37,7 +38,10 @@ class ResultsContainer extends Component {
  };
 
  render() {
- const { results } = this.props;
+ const { error, results } = this.props;
+ if (error) {
+ return <div>{error}</div>;
+ }
 
  return (
  <Results>

src/styles/styles.css

@@ -345,15 +345,20 @@ a {
  font-weight: 400;
  text-align: center; }
 
-.initial-state-message {
+.initial-state-message,
+.search-error {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 180px);
  color: #888888; }
- .active-search .initial-state-message {
- display: none; }
+
+.active-search .initial-state-message {
+ display: none; }
+
+.search-error {
+ color: red; }
 
 .searchbox {
  max-width: 1300px;

src/styles/styles.scss

@@ -119,19 +119,26 @@ a {
  }
 }
 
-.initial-state-message {
+.initial-state-message,
+.search-error {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 180px);
  color: $helpTextGrayColor;
+}
 
+.initial-state-message {
  .active-search & {
  display: none;
  }
 }
 
+.search-error {
+ color: red;
+}
+
 .searchbox {
  @include limitWidth;
  display: flex;