pageContext undefined during navigation events in SPFx

[bcameron1231]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

All Browsers, Most versions of SPFx (Currently using 1.21)

Describe the bug / error

Summary

During non-refresh (client-side) navigation in SPFx, the pageContext appears to be disposed while components and their associated code are still active in memory. This can lead to runtime errors when existing references to pageContext are accessed.

Background

I am a co-maintainer of https://github.com/pnp/pnpjs with @juliemturner and @patrick-rodgers. While investigating reported issues, we observed errors such as:
Cannot read properties of undefined (reading 'web')

This error is coming internally in PnPjs where we reference a Page Context Object. We use a closure and it seems the code is actively running and still holding a reference to a page object that is disposed. This has come up on many occasions an in many customer tenants.

Related discussion:
pnp/pnpjs#3334

Observed Behavior

• During client-side navigation:
  • The SPFx pageContext object is marked as disposed (disposed = true) and becomes undefined.
  • At the same time, web parts and their JavaScript execution context are still present and executing.
• Any existing references to pageContext (e.g., held via closures or long-lived objects) can become invalid.
• Accessing properties such as pageContext.web results in runtime exceptions.

Debug Findings

• The pageContext from the internal SharePoint sp-page assembly:
  • Is marked as disposed
  • Has _isDisposed = true
• Meanwhile:
  • The associated components are not yet torn down
  • Code paths that rely on previously captured references are still invoked

See below where I caught breakpoints in live running code in the internals of the page assembly,

I would love to know if this is an issue with how we're using the pageContext internally or if this is a larger bug in the SharePoint page lifecycle

Steps to reproduce

Copied from our repo

1. Setup a HelloWorld web part as described below.
2. Add this to the home page of a communication site
3. Setup another page in the comms site, with a link in the navigation
4. Load home page, allow web part to render (works this time)
5. Use navigation to go to other page
6. Use navigation to return to the home page
7. Observe error

Create a HelloWorld web part that initializes a common SPFi object via a centralized helper.

Web part init:

protected onInit(): Promise<void> {
  getSP(this.context);

  return this._getEnvironmentMessage().then(message => {
    this._environmentMessage = message;
  });
}

Centralized SPFi init:

/* eslint-disable no-var */
import { WebPartContext } from "@microsoft/sp-webpart-base";

// import pnp and pnp logging system
import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/batching";

var _sp: SPFI;

export const getSP = (context?: WebPartContext): SPFI => {
  if (_sp === undefined || _sp === null) {
    //You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
    // The LogLevel set's at what level a message will be written to the console
    _sp = spfi().using(spSPFx(context as ISPFXContext));
  }
  return _sp;
};

Rendered component:
(error occurs on line 14)

import * as React from 'react';
import type { IPnPjsWebPartProps } from './IPnPjsWebPartProps';
import { useEffect, useState } from 'react';
import { getSP } from '../../../helpers/pnpjs-config';

const PnPjsWebPart: React.FunctionComponent<IPnPjsWebPartProps> = (props: IPnPjsWebPartProps) => {
    const [message, setMessage] = useState<string>('Initial value, stil loading...');

    useEffect(()=>{
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      (async ()=>{
        try {
          const sp = getSP();
          const web = await sp.web(); // errors here on partial page reload
          console.log(web);
          setMessage('Got the web without an error! Hurrah!')
        } catch (e) {
          console.error('Error getting web :\'(', e);
          setMessage((e as Error).message);
        }
      })();
    },[])

    return (
      <section>
        <div>{message}</div>
      </section>
    );
}

export default PnPjsWebPart;

Expected behavior

• pageContext should remain valid as long as dependent components are still active
  or
• Components should be disposed before pageContext is invalidated

[VesaJuvonen]

Thank you @bcameron1231 on the details with this one. We’ll definitely need to have a look on the model and get on top of this. Appreciate the amount of details in the issue submission 👍

[Ashlesha-MSFT]

@bcameron1231,
Thank you for the detailed report and repro steps. We were able to successfully reproduce this issue.
We have raised this as a bug with the engineering team. We will update this thread once we have more information.

Thanks again for reporting this with such thorough details and repro steps.

[jerrith]

I have a similar issue in this WebPart we have created. It was originally created using SPFx v1.17.1 and we did an upgrade to 1.21.1 and after the upgrade we get issues that the webpart doesn't load if you navigate between SharePoint pages.
It took some troubleshooting, but I managed to boil down the issue to a missing context when setting up the pnpjs services in the OnInit event of the webpart that we need to get information to preload information in some displayed dropdowns on the screen.

The error which was displayed in the console:

name-of-web-part_xxxx.js:493 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'web')

When I simply reloaded the page with F5, the error is not displayed.
If however I navigate again to the start page of the site collection and from there back to the application page using a button on the start page, it almost consistently fails to load the webpart every time.

I did a small update in the application to confirm a suspicion, which is that for some reason the SharePoint context is not available and it confirmed it.
I added code in the initialization of the PNP service that communicates with SharePoint and this confirmed it I think, as I could see the error in console as I expected. After reload the SharePoint context is available and no error is displayed.

This is the code in PnPConfig.ts:

export function getSP(context?: any): SPFI {
if (!_sp && context) {
_sp = spfi().using(SPFx(context));
}
if (!Validate.NotNullOrUndefined(context)) {
Logger.Error("Context is null or undefined");
}

return _sp;

}

The Context is null or undefined error is displayed when the webpart fails to load.

I hope this can help in the investigation of the issue by the development team.

[bcameron1231]

@jerrith Appreciate you adding on. If you still need help mitigating this in the meantime, check out the issue I posted in this ticket to our repo. I provided a way that will solve the problem until we hear back from Microsoft on if there's anything that can be done on their side.

[jerrith]

Yes we are still experiencing this issue and the support engineer from Microsoft assigned to the Microsoft support ticket I opened, directed me towards gitHub to log an issue to get the attention of the SPFx team. That's how I got to this issue. Thought I'd first search and see if anyone had the same issue already. (Couldn't imagine I was the first to encounter this)

Thank you for the workaround, I will try to implement that first thing tomorrow.