How to handle custom http response codes in JSS?

Question

The OOTB JSS starter projects provide a route handler implementation that is configured to handle 404 responses by rendering the NotFound component. How can I customize what the end-user sees for other response codes, like 401 Unauthorized?

Answer 1

Handling other error codes is not configured OOTB, but it can be added in your project.

Assuming your JS project is based on one of the sample apps, the call to Layout Service for page data is handled by dataApi.fetchRouteData (from the sitecore-jss package), which takes an options object. These options can be used for points of customization.

One of the options that needs to be provided is a fetcher param, which is the function that handles the call to Layout Service and returns a promise. The sample apps provide a default implementation of fetcher (for example, this is the React version; which is passed to dataApi from RouteHandler).

The fetcher function returns a Promise, and the Promise handlers have access to the server response. You can update the default fetcher function to test for other status codes, either by chaining a Promise handler to fetcher (fetcher.then(response => {...})), or by passing a transformResponse function to the axios call, which allows modifying the response object before it's passed to Promise handlers.