Microsoft 365 Community Microsoft Graph, 29 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Test how your SPFx solutions respond to throttling with Graph Developer Proxy

Description

In this 10-minute developer focused demo, Waldek Mastykarz delivers a solution for simulating your app’s resilience under heavy load using SharePoint Workbench, in your tenant of 1, and keeping you’re app code as is. For example: Test specifically for 429 errors. See configuring Proxy for scenario and then see how Proxy simulates/identifies 429s on a Microsoft Graph API. Proxy works for other APIs as well. Once issue is identified, remediate - add a sleep function, use PnPjs that handles 429s for you, etc.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 10, 2023.

Demo Presenter
📺 Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Tool - Microsoft Graph Developer Proxy v0.3.0 | aka.ms/graph/proxy/download
• Demo - Introduction to Microsoft Graph Developer Proxy - Sébastien Levert (Microsoft) @sebastienlevert

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

Foreign can I have a quick raise of hands who has never had a single API error when calling graph, SharePoint API anything counts, throttling 500 errors, Fabian had no errors, AC, no errors, I believe you guys have never been building anything.

A

I see you there excellent cool, so basically, when you build apps right that connect to Microsoft graph or other other apis once in a while, you will run into errors like rattling 500 errors, and these things are really hard to deal with. Why? Because they are, they are ephemeral like they appear and then they're gone and it's impossible for you to reprogram right. At least it wasn't possible until now right, because now we have the Microsoft graph developer proxy.

A

That allows you to simulate these errors, both on Microsoft graph, but also on any other API that you might use, and in this example, I'm gonna actually show you both right. So right now, I'm going to walk you through a simple app will I write really a web art that you can see now on a screen that shows the title of the current site using uh purple and rest API and then uses graph knee endpoint to show info about the user.

A

That is currently authenticated right and how would that work and how would the web part behave like if it ran into uh throttling or other errors? Okay, so on the screen you see the web part that shows two things: the title of the site and info about me. The way it's built is really simple: it doesn't get any easier than that right. So in a SharePoint framework, 161 I can use the Microsoft graph, JavaScript SDK V3 and basically from there I get a client I. Don't need to do any off.

A

I get all of that already for free from spfx and I. Do a simple call to endpoint me to get info about me and I showed that on a page. So this is this block which you see here then on top I show the title of the site and I do that by calling the SharePoint rest endpoint in here, I call web and from that I get a title and I show this on a page like it all works.

A

It doesn't get any easier than that right, so it works right, like you can ship that that production right, what would be? How would the web part work like if it would run into roughly so let's test that, let me start the the Microsoft graph developer. Roxy and I want to only test the four two nines too many errors.

A

Every error is one too many too many requests, error right and I don't want to do any any marks and I want to be be quite certain that I will see errors right because, like that's what we are here for so let me do that.

A

Let me uh start it and then it's available now and then let me start new window of chrome to which I can attach a proxy right, because if I were to do that with Edge, I would need to enable it on my OS, which would mean you, wouldn't be able to see anything because teams also needs graph right, so they wouldn't make a great demo. uh Let me see, let me see, let me see where is my window? Here's my window. Let me grab the URL. Let me paste it in Chrome three, two one.

A

We should be seeing workbench. We actually see anything and we won't see anything. Why? Because we are already intercepting all all requests and if I refresh that, maybe you will see it again. Maybe not. Let me see that right. So here are already errors that we intercept and we simulate four two nines, so the workbench couldn't load well that doesn't really help us right.

A

So let me adjust the proxy a little so that it will only stimulate the error on the API that that we want to use and we'll we will get back to how we want to like what ideas do we have to make it more uh or easier for you to use? So let me uh stop it here. Let me get back to the config and in here we have the list of URLs that we Monitor- and here you can see, we monitor all SharePoint calls well. Some of them are needed for the workbench to work.

A

So in this case, let me just trim that down to web select right so that that would be. That is basically the call that we do in our um uh code right and with that, let me restart the epoxy. I mean I run a version on which I Dev, which is why the config does not reload. But if you grab the version that we already shipped, uh you will have a hot reload. So if you change anything about it, you will need to restart or stop and restart. Okay, all right. So we're back.

A

Let me reload the workbench, the get client the components comes through. That's perfectly fine. We have another four to nine, but that is irrelevant for now and now, let's add the web part to our page okay. So this is the web part that we have three two one. Are we getting four two nines perfect, so we're getting a four to nine on me and perfectly fine right. So this came through eventually- and here we can see in the Microsoft graph developer proxy- that there was uh a request right.

A

We failed it with a 429, but the Microsoft graph, JavaScript SDK handles four two nines for you, so in other words, in our code, if we get back to here, this is the only thing like we need to do anything more. This just works because that SDK handles four to Nines for us, so we need to do anything else. What about disco right? So what about the SP HTTP client that we use to get the title of the site from uh the rest, API right that came through and I really want to see this fell.

A

So let me reload again, and we will stay here until it will fall there. You go it failed. It failed. We can see here so we've got our 429 on retrieving the title of the site, undefined the code fail and we will not recover. Why? Because SP HTTP I end doesn't handle 49s on or any other errors right. It wraps Fetch with auth, so that you don't need to authenticate but other than that you're on your own.

A

So what would be a reasonable way for you to go about it? Well, you basically have two ways. One way is for you to kind of build something by yourself and basically like. Imagine. That like here, is a call that is uh built with fetch. Sp HTTP client rep stack, so it's almost the same so to add: support for four or two nines to this.

A

Well, your fetch call would need to become something like this right, where you add a sleep so that you can uh back off for the period of time communicated by the retry after a header, and then you need to like try again until the call will come through right. So suddenly, your call now becomes a bigger call and you need to kind of centralize it think around it and so forth, and so on, right or there's another way.

A

You can also use PNP JS, which is an SDK that calls an API and it can call graph, it can call Spurs, see some and so forth and so on, and it handles four two nines for you, so you don't need to do anything. So let me quickly uncomment what I need and comment what I don't need. I've got this call using a PNP jstd, exactly the same call right. So here is web Select Title. So let me do that. Let me save it three two one three two one is going to rebuild recompile Reserve.

A

Meanwhile, let me already move to Chrome it's this one. We are on tsc321, webpack, okay, we're there. Okay refresh will the request come through? Well, it does come through, but there's one thing that is odd right. So here we've got not a dollar sign, but a dollar is Escape right. So it's a percent, 24 meaning proxy were always pass it through right because we've adjusted that. So let me quickly get back, adjust proxies config and also make it okay. I want to do two things.

A

I want to do this and I want to do percent 24 save it. Let me quickly stop restart three two one we are in back in Chrome. Let me see, and now we want to see the call to the title of the site fail. Okay, so it failed here there there you go, it failed, but there you go. So we have it initially because again, as I said, PNP JS handles four two nines for you, so that and you don't need to do anything with that right. So in your code, all you do.

A

Is you get a title of a site and there is no handling errors like, like? All of that is already available to you for free right, and here you can see the first call failed right. We get a four to nine and that's coming from a proxy right like we modeled this error, but then there's an article and that comes through and, as you can see here, we get the title of the site. So the cool thing is right with that.

A

You have now the ability to test all of that, something that you couldn't do in the past. Unless, like you, would spin up your own mock service with your own dummy data and all of that change your code to call one endpoint versus the other. Now you don't need to change anything about your code. You can keep your code as is and simulate how it will work in production when it's under heavy load. When it's used by thousands of folks in production, you can.

A

You can check that already on your tenant of one, that everything will be fine when you ship your uh code production. So with that I think I am right on time to pass it to the uh to AC and vessel yep.

B

Thank you. Thank you, walek on that one really really cool stuff and a great demo as well walking through the brillo and doing always even commenting on live demos is, is risky so, but it all turned out fine, so really really cool.

A

Implementation.

B