How to debug and resolve sp pnp js Error making HttpClient request in queryable [404]

If you are using SP PNP JS in your SharePoint framework project, you might run into the issue you might getting the following error.

"Error making HttpClient request in queryable [404]"

If the site your are refer to is "https://mycompany.sharepoint.com/yoursite", you could inspect the page and the detailed error should look like one of the two possible situation.

https://mycompany.sharepoint.com/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName 404

https://mycompany.sharepoint.com/yoursite/SitePages/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName 404

This is very clear the PnP JS did not get the correct site URL. The first went to the root and the second is from the "SitePages". The root cause is the SP PnP JS does not get the correct context if the request is coming from site page or many be redirected.

There are at least two best practices to resolve this issue.
The first solution is to initialize context in onInit method like below.

protected onInit(): Promise<void> {

sp.setup({

spfxContext: this.context

});

return super.onInit();

}

The other way you can ensure you are calling to the correct web is to instantiate the web object directly and pass in the url as shown below. This method is slightly more flexible as you are not setting the base url for all calls, but you must do it each time.

public render(): void {

let web = new Web(this.context.pageContext.web.absoluteUrl);

web.select("Title").getAs<{ Title: string }>().then(w => {

this.domElement.innerHTML = `Web Title: ${w.Title}`;

});

}

If you need to set the web when context is not available, you could always call like this below by passing the URL.

private web: Web = new Web('https://mycompany.sharepoint.com/spfxsite/');

This should resolve the issue that SP OnP JS not be able to find the correct context issue.