manjeetjagtap
commented
4 years ago I agree this might be a timing issue. When I tested it on the page where no other web part exists other than my custom SPFx, it worked well. However, if I add other web parts document library or any other web part which also tries to obtain a token, it fails.
I start seeing this issue on my tenant from the last three weeks when we were approaching a go-live date soon. So I had to find out some solution/workaround on this.
A) Very first thing, getToken() method promise hangs and it hangs all its successive promises. So I thought instead of Promise let’s try with $.Deferred, but that was not adequate and there was no way to check if Promises being hanged. So I thought let’s add some waiting time for few seconds until getToken() promise completed. E.g. if we have not received resolved/failed from a promise for 5 seconds which is I believe sufficient time to find out if promise hangs (You may try by varying it depending upon your requirement) and that we considered as promise ‘timeout’ or hanged. So we can try one more time again to obtain a token, and if this ‘timeout’ as well. Then we can conclude page is loading first time and getToken() promise being hanged. So this is sufficient to take next action B)
For the above mention workaround, I made a few changes in my TOKEN class as below. This may be helpful to you to try it out.
class TOKEN {
public static getMyToken = (ctx:WebPartContext, useCached: boolean = true): Promise<any> => {
return ctx.aadTokenProviderFactory.getTokenProvider()
.then( (tP: AadTokenProvider): Promise<string> => {
return tP.getToken( "api://blablablablablablablabla" ); // For SPFx 1.9 -> return tP.getToken( “api://blablablablablablablabla”, useCached );
})
.then((token:string):string => {
return token;
})
.catch((error:any) => {
console.log("Token cannot obtained, Error details-"+error);
return null;
});
}
public static getT = ( ctx: WebPartContext, cachedToken: boolean = true ) => {
var dfd = $.Deferred();
console.log('after deferred');
// Wait for 5 seconds to check if promise hanged
TOKEN.promiseTimeout(5000 , TOKEN.getMyToken ( ctx, cachedToken ) )
.then( res => { console.log('deferred resolved'); dfd.resolve( res); })
.catch( err => { console.log('deferred rejected'); dfd.reject( err ); });
return dfd.promise();
}
public static delay( ms: number) { return new Promise( resolve => setTimeout(resolve, ms)); }
public static getAADToken = async ( ctx: WebPartContext, cachedToken: boolean = true ): Promise<any> => {
var dfd = $.Deferred();
console.log('Trying-1st');
TOKEN.getT( ctx, cachedToken ).done( tkn => { dfd.resolve( tkn ); })
.fail( async error1 => {
console.log('error1-'+error1);
await TOKEN.delay(500);
console.log('Trying-2nd');
TOKEN.getT( ctx, cachedToken ).done( tkn => { dfd.resolve( tkn ); })
.fail( async error2 => {
console.log('error2-'+error2);
dfd.reject(error2);
});
});
return dfd.promise();
}
public static promiseTimeout = (ms: number, prm: Promise<any>): Promise<any> => {
let timeout = new Promise((resolve, reject) => {
let id = setTimeout(() => {
clearTimeout(id);
reject('timeout');
}, ms);
});
return Promise.race([
prm, timeout
]);
}
}
Here is code to call the getAADToken method from the front end.
TOKEN.getAADToken ( ctx, true )
.then( function ( token ) {
console.log('Captured Token'); // Get toke without issue onwards from 2nd time refresh
callCustomApi( token );
console.log('Call check access function');
})
.catch( err => {
console.log('token error-'+err); // timeout error as getToken hangs (First time page load)
if( err == 'timeout') {
console.log('session'+sessionStorage.getItem("adal.access.token.key"+window.location.protocol+"//"+window.location.hostname));
if(sessionStorage.getItem("adal.access.token.key"+window.location.protocol+"//"+window.location.hostname))
{
console.log('Read value form session storage');
var token = sessionStorage.getItem("adal.access.token.key"+window.location.protocol+"//"+window.location.hostname);
callCustomApi( token );
}
}
});B) Above option just check if your promise is being failed. But we have to take the next action to get the token and pass it to a custom API, but this wasn’t working as our first promise hangs it hangs all successive promises until you refresh the page. Unexpectedly, I saw in session it returns another token which may be being requested from either doc library or any other web part. So I thought to use this token to call my API.
Fortunately, I have custom code that validates token in code behind when a custom API being called. So, I made the enhancement in my token validation code which validates this generated token as well (so it accepts and validates both types of tokens) and returns a response and getting data back on first-time page load. Following are the console log I get when the page loads first time.
This is just a workaround I am using until we get a concrete solution.
inconscienceAdmin
adrichema
swearhouse
deharf
Tanddant
Renevdo
TazzyMan
Ryan365Apps
gobigfoot
ghost
jkondakindi
jimmywim
reiniersmit
TheIronCheek
andrewconnell
asim-bashir-confiz
umarok
OmAlim
saadsal
dev-a11y
devanshuGit
ssandu
mbratukha
AJIXuMuK
nflourens-dev
Category
Expected or Desired Behavior
The promise returned by AadTokenProvider.getToken() should always resolve or reject. In other words, when a token can't be retrieved for whatever reason, I should get something back that I can catch.
Observed Behavior
getToken()is occasionally hanging - never resolving or rejecting so I can't catch an error or figure out what's happening. The .then() undergetToken()just never runs and my web part stalls.Steps to Reproduce
I'm trying to access a .NET Core Web API secured with AAD from my custom web part. I initially used the instructions found here but
AadHttpClient.get()was occasionally stalling so I decided to get the token usingAadTokenProvider.getToken()and manually add it to aHttpClient.get()but my issue didn't go away. I was however able to confirm thatgetToken()is where it hangs rather than an issue with the API. Here's my code:I noticed that it seems to hang after a period of inactivity like maybe it's failing to refresh a stale token or something. I'd expect the rejection code to execute but nothing beyond
getToken()runs. But if I refesh the page a couple times, it starts working again.This seems to be related to issue #914 reported on pnp/pnpjs.
Edit: I discovered that this is a lot easier to reproduce in Chrome. (I haven't seen it occur in IE and I've only seen it once or twice in Firefox although I can't seem to reproduce in FF at the moment. Edge gets the token but fails the API request for reasons I can't explain). In Chrome, it struggles every time it needs to grab a token. So, for example, it hangs the first time you load the page. If you refresh a few times, it starts working. Then if you leave the page open for a period of time (long enough for the token to expire) and refresh the page, it hangs again.
Edit 2: Per the conversation below, we can reproduce the issue when the custom web part is on the same page as a document library and a planner or events web part and it works fine when on a page by itself. There may be some sort of conflict with token retrieval/sharing between web parts.