How to handle item not found in jss headless

Question

Our requirement is to show site specific error page if the requested page is not found.

We have handled item not found using HttpRequestBegin pipeline Item resolver. If the context item is null we are setting the context item as page not found item.

But in headless mode always getting context item as sitecore hence not able to set the page not found item to context item.

Please let me know how to implement the 404 errors in headless mode.

Thanks

Answer 1

There are two types of Item resolver in JSS:

First and which you already implemented:

public class ResolveItem : HttpRequestProcessor
    {
        public override void Process(HttpRequestArgs args)
        {
            var item = ANY YOUR LOGIC TO GET 404 item.
            Context.Item = item;
        }
    }

<configuration
    xmlns:patch="http://www.sitecore.net/xmlconfig/"
    xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <pipelines>
      <httpRequestBegin>
        <processor type="{your-namespace}.ResolveItem, {your-assembly-name}"
                   patch:after="*[@type='Sitecore.Pipelines.HttpRequest.ItemResolver, Sitecore.Kernel']">
        </processor>
      </httpRequestBegin>
    </pipelines>
  </sitecore>
</configuration>

And Second one Item resolver is for Layout Service:

public class LayoutServiceItemResolver
    {
            
        public void Process(RequestBeginArgs args)
        {
                var item = ANY YOUR LOGIC TO GET 404 item.
                Context.Item = item;           
        }
    }



<configuration
    xmlns:patch="http://www.sitecore.net/xmlconfig/"
    xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <pipelines>
      <mvc.requestBegin>
        <processor type="{your-namespace}.LayoutServiceItemResolver, {your-assembly-name}" resolve="true">
        </processor>
      </mvc.requestBegin>
    </pipelines>
  </sitecore>
</configuration>

Both of them are required. First one is used when you request the page by URL, second one - when you navigate on you browser (which means utilizes a jss routing)