Having JSS+SXA headless solution and 404 default error handling causing trouble for marketing team ?

Recently I cam across a use case where client wants to show 404 status code in network tab when there is page not found request.

As current project is using headless solution based on JSS + SXA so for page not found default SXA error handling is enabled .Due to default feature of SXA error handling in network tab status code 302 is shown , which is causing issue to marketing team while doing SEO

Expectation — 404 status code should show in network tab when there is request of page not found .

After all struggle and research going to share the solution which worked for me may be it will save someone's time .

As the solution is using JSS + SXA we need to customized two pipelines one is HttpRequestProcessor and other is mvc.requestBegin.

Step 1 — Create a patch file where need to patch before ‘Sitecore.XA.Feature.ErrorHandling.Pipelines.HttpRequestBegin.ItemNotFoundResolver

<?xml version=”1.0" encoding=”utf-8" ?>
<configuration xmlns:patch=”http://www.sitecore.net/xmlconfig/">
<sitecore>
<pipelines>
<httpRequestBegin>
<processor type=”Demo.Foundation.Pipelines.Resolvers.ItemNotFoundResolver, Demo.Foundation.Pipelines”
patch:before=”processor[@type=’Sitecore.XA.Feature.ErrorHandling.Pipelines.HttpRequestBegin.ItemNotFoundResolver, Sitecore.XA.Feature.ErrorHandling’]” />
</httpRequestBegin>
</pipelines>
</sitecore>
</configuration>

Step 2 : Create a class file with the name ItemNotFoundResolver as below

namespace Demo.Foundation.Pipelines.Resolvers
{
public class ItemNotFoundResolver : HttpRequestProcessor
{

protected IErrorPageLinkProvider ErrorPageLinkProvider { get; } = ServiceLocator.ServiceProvider.GetService<IErrorPageLinkProvider>();
public override void Process(HttpRequestArgs args)
{

if (Context.Item == null
&& Context.Site != null
&& Context.Database != null
&& !args.LocalPath.StartsWith(“/identity/”)
&& string.IsNullOrEmpty(Context.Page.FilePath)
&& RouteTable.Routes.GetRouteData(args.HttpContext) == null
&& !args.PermissionDenied)
{
Item pageItem404 = this.ErrorPageLinkProvider.Get404ErrorPageItem();
Context.Item = pageItem404;
HttpContext.Current.Response.TrySkipIisCustomErrors = true;
HttpContext.Current.Response.StatusCode = (int)HttpStatusCode.NotFound;
}

}
}
}

Step 3 : Create another patch file for mvc.requestBegin which will work instead Sitecore.LayoutService.Mvc.Pipelines.RequestBegin.ContextItemResolver, Sitecore.LayoutService.Mvc

<?xml version=”1.0" encoding=”utf-8" ?>
<configuration xmlns:patch=”http://www.sitecore.net/xmlconfig/">
<sitecore>
<pipelines>
<mvc.requestBegin>
<processor type=”Demo.Foundation.Pipelines.Resolvers.Handle404, Demo.Foundation.Pipelines”
patch:instead=”processor[@type=’Sitecore.LayoutService.Mvc.Pipelines.RequestBegin.ContextItemResolver, Sitecore.LayoutService.Mvc’]” resolve=”true”/>
</mvc.requestBegin>
</pipelines>
</sitecore>
</configuration>

Step 4 : Create a class file with the name Handle404 as below

namespace Demo.Foundation.Pipelines.Resolvers
{
public class Handle404 : ContextItemResolver
{
protected IErrorPageLinkProvider ErrorPageLinkProvider { get; } = ServiceLocator.ServiceProvider.GetService<IErrorPageLinkProvider>();
public Handle404(IItemResolver itemResolver, IRouteMapper routeMapper) : base(itemResolver, routeMapper)
{

}
public override void Process(RequestBeginArgs args)
{
base.Process(args);

if (args.Aborted)
{
return;
}
Assert.ArgumentNotNull(args, “args”);

if (Sitecore.Context.Item == null)
{
Item pageItem404 = this.ErrorPageLinkProvider.Get404ErrorPageItem();
Sitecore.Context.Item = pageItem404;
Sitecore.Context.SetLanguage(Sitecore.Context.Item.Language, true);
}
}
}
}

After this network tab started showing 404 status code and from front -end correct 404 component started rendering.

Happy Learning..