Application Insights beyond console.log()
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 96 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51697 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Error messageFunction (mathematics)Cartesian coordinate systemInformation technology consultingFunction (mathematics)Moment (mathematics)Error messageLogicSoftware developerCASE <Informatik>Computer-assisted translationQuadrilateralPoint cloudFreewareSoftwareVideo game consoleTouchscreenLoginException handlingComputer animation
02:21
InformationError messageoutputPlanningBasis <Mathematik>Cartesian coordinate systemSound effectPhysical systemPoint (geometry)Different (Kate Ryan album)Revision controlWeb browserWater vaporExecution unitPoint cloudWeb applicationVirtual machineCASE <Informatik>Physical lawTouchscreenVideo projectorServer (computing)Software testingPrototypeRight angleMetropolitan area networkSoftware developerTopological vector spaceState of matterSoftwareLoginCodeMultiplication signPresentation of a groupFluid powerAngleUnit testingMachine learningScripting languageSet (mathematics)Projective planeProcess (computing)Scaling (geometry)Reading (process)Computer architectureBuildingSource codeLocal ringView (database)PlanningComputer animation
05:51
Demo (music)Maxima and minimaIndian Remote SensingDialectNormed vector spaceDefault (computer science)Server (computing)Dependent and independent variablesRule of inferenceLarge eddy simulationGamma functionSystem callEmulationPersonal area networkScalable Coherent InterfaceCAN busPattern languageGraph (mathematics)Line (geometry)Cartesian coordinate systemRange (statistics)Key (cryptography)Front and back endsSystem callView (database)Dependent and independent variablesFrequencyState of matter1 (number)Sign (mathematics)Real numberTrailWebsiteSoftware testingMereologyWeb browserBitMultiplication signZoom lensResponse time (technology)CASE <Informatik>DatabaseAnalytic setPoint (geometry)CountingWeb 2.0Physical systemData storage deviceQuery languageElectronic mailing listServer (computing)Default (computer science)Client (computing)IP addressWindowSpeech synthesisWeb pageStructural loadSequelAverageCross-correlationVideo gameScripting languageRevision controlConnected spaceShift operatorField (computer science)Latent heatGroup actionComa BerenicesUniform resource locatorCircleDemosceneGame theoryProcess (computing)Single-precision floating-point formatComputer animation
12:13
Normed vector spaceException handlingWeb browserDependent and independent variablesWeb pageView (database)Structural loadTotal S.A.Multiplication signConnectivity (graph theory)Cartesian coordinate systemStatisticsSpacetimeView (database)Connected spaceWeb pageProcess (computing)Speech synthesisInternetworkingLevel (video gaming)Server (computing)Very-high-bit-rate digital subscriber lineChemical equationPlanningNeuroinformatikPoint (geometry)Real numberSoftwarePoint cloudDemo (music)Field (computer science)Client (computing)Source code1 (number)CASE <Informatik>Electronic visual displayStructural loadGoodness of fitResponse time (technology)LastteilungComputer animation
14:42
Dihedral groupCartesian coordinate systemCategory of beingView (database)Analytic setWeb pageTotal S.A.Electronic mailing listElectronic visual displayTable (information)Data centerScaling (geometry)LoginBlogComputer animation
16:21
AuthenticationUniqueness quantificationHydraulic jumpMenu (computing)MultiplicationCountingVolumenvisualisierungCartesian coordinate systemNumberQuicksortRow (database)LoginQuery languageEvent horizonGroup actionTimestampScaling (geometry)Data centerBlogFormal languagePoint (geometry)Cursor (computers)CASE <Informatik>CountingComputer animation
18:05
InternetworkingView (database)CASE <Informatik>Internet forumCartesian coordinate systemApplication service providerFront and back endsMultiplication signProjective planeTwitterError messageWeb browserCodeException handlingSource codePoint (geometry)Touch typingState of matterTrailForm (programming).NET FrameworkLine (geometry)Different (Kate Ryan album)Computer fileWeb 2.0Limit (category theory)Formal languageSoftware development kitDrag (physics)Process (computing)Scripting languageDescriptive statisticsWeb pageOrder (biology)Single-precision floating-point formatGoogolMoment (mathematics)Computer animation
21:38
Event horizonCorrelation and dependenceWeb pageClient (computing)LogicFunction (mathematics)Software development kitAlpha (investment)LogicCartesian coordinate systemEvent horizonClient (computing)Server (computing)Level (video gaming)Function (mathematics)Multiplication signMetric systemProcess (computing)Design by contractSequelWeb pageDatabaseError messageCuboidException handlingCASE <Informatik>View (database)Ultraviolet photoelectron spectroscopyInternetworkingMereologyNumberTracing (software)Product (business)Point (geometry)DataflowLine (geometry)System callTrailHookingDefault (computer science)JSONComputer animation
24:09
Demo (music)Latent class modelVolumenvisualisierungScripting languageContent (media)Meta elementClique-widthHyperlinkGamma functionBit rateGastropod shellComputer clusterCartesian coordinate systemMultiplication signVideo game consoleResultantInstallation artCodeCalculationApplication service providerClient (computing)Goodness of fitProduct (business)Computer animation
25:48
WindowScripting languageMeta elementClique-widthContent (media)Inverse elementHyperlinkVolumenvisualisierungSign (mathematics)Menu (computing)Maxima and minimaOnline helpVenn diagramConvex hullNormed vector spaceExecution unitWechselseitige InformationDigital filterData typeServer (computing)Computer iconPrice indexPulse (signal processing)WikiDemo (music)Electric currentRepository (publishing)Computer fileWeb 2.0Configuration spaceCartesian coordinate systemServer (computing)AuthenticationCuboidRight angleWeb serviceProduct (business)HTTP cookieInformation securityPoint (geometry)Visualization (computer graphics)CASE <Informatik>Pay televisionData centerMathematicsProjective planeData storage deviceWeb browserMedical imagingRevision controlBeta function2 (number)Workstation <Musikinstrument>Video gameDialectLaptopView (database)WebsiteSound effectBlogArithmetic meanMachine visionSummierbarkeitContent (media)Process (computing)Dependent and independent variablesExtension (kinesiology)MultiplicationBitComputer animation
30:04
Hydraulic jumpMaxima and minimaScripting languageMeta elementClique-widthContent (media)Link (knot theory)Inverse elementFunction (mathematics)CodeParameter (computer programming)TrailCartesian coordinate systemCodeView (database)Web pageComputer fileContent delivery networkRevision controlPoint cloudCASE <Informatik>Client (computing)Boilerplate (text)Open setTemplate (C++)Student's t-testOpen sourceWebsiteComputer animation
31:31
OvalDemo (music)Convex hullExecution unitLemma (mathematics)Inclusion mapTrigonometryNewton's law of universal gravitationRange (statistics)Fatou-MengeTwin primeCodeScripting languageConfiguration spaceFunction (mathematics)Event horizonMobile appStreaming mediaDrill commandsVideo game consoleNumberWeb browserLine (geometry)Multiplication signInformationSystem callCartesian coordinate systemError messageView (database)WindowBooting2 (number)BefehlsprozessorGraphical user interfaceDatabaseFile formatRange (statistics)Total S.A.Exception handlingCASE <Informatik>Different (Kate Ryan album)Computer fileCalculationServer (computing)Group actionElectronic mailing listState of matterReal numberForm (programming)Extension (kinesiology)String (computer science)Special unitary groupClient (computing)Point (geometry)Network topologyUniform resource locatorBitObservational studyRoboticsFunction (mathematics)Hydraulic jumpComputer animation
37:16
Convex hullExecution unitFingerprintFunction (mathematics)Default (computer science)EmailEvent horizonSynchronizationEmulationForm (programming)CalculationMaxima and minimaPropositional calculusServer (computing)Line (geometry)TwitterMereologyLibrary (computing)DataflowPoint (geometry)Operator (mathematics)Real numberCASE <Informatik>Client (computing)2 (number)InformationCalculationFront and back endsMultiplication signServer (computing)View (database)HookingTotal S.A.Exception handlingCartesian coordinate systemResponse time (technology)Web pageDependent and independent variablesEvent horizonTrailPhysical systemSource codeCategory of beingCodeHydraulic jumpMobile appWeb 2.0Analytic setObject (grammar)Uniform resource locator1 (number)Figurate numberQuicksortWebsiteSuite (music)Value-added networkVariable (mathematics)System callMusical ensembleSoftware bugComputer animation
43:01
Total S.A.Exception handlingServer (computing)AverageGraph (mathematics)Rule of inferenceInterior (topology)Dependent and independent variablesCountingState diagramRevision controlCartesian coordinate systemReal numberCASE <Informatik>Physical system2 (number)Server (computing)Graph (mathematics)Dependent and independent variablesNumberVisualization (computer graphics)Loop (music)Analytic continuationResponse time (technology)Extension (kinesiology)Representational state transferGraph (mathematics)Product (business)FrequencyMultiplication signDemo (music)Exception handlingCommitment schemeScripting languageJava appletInfinityAddress spaceGroup actionPoint (geometry)Different (Kate Ryan album)Computer animation
47:43
Formal verificationSystem identificationMetric systemService (economics)Product (business)Exception handlingPlanningCASE <Informatik>Internet service providerDifferent (Kate Ryan album)Cartesian coordinate systemLoginView (database)Multiplication signDatabasePoint (geometry)Local ringServer (computing)Electronic mailing listError messageCombinatory logicGoogolDataflowScalability1 (number)Analytic setTrailFrequencyIdentity managementLimit (category theory)Web 2.0Projective planeScaling (geometry)Hydraulic jumpSystem callThomas BayesFigurate numberGoodness of fitWebsiteAlgebraComputer animation
53:08
Demo (music)PermianMenu (computing)Pointer (computer programming)Demo (music)Set (mathematics)MereologyPhysical systemKey (cryptography)CASE <Informatik>Virtual machineDefault (computer science)Exception handlingRule of inferenceThresholding (image processing)Web browserServer (computing)Cartesian coordinate systemOffice suiteEwe languageTrailGraph coloringComputer animationSource codeXML
55:17
Demo (music)Scripting languageTrailWeb pageFunction (mathematics)Menu (computing)Law of large numbersGamma functionFluxQuarkLink (knot theory)FeedbackEvent horizonHill differential equationProcess (computing)Data storage deviceProduct (business)Front and back endsKey (cryptography)Boss CorporationPlanningSource codeBuffer overflowPhysical systemIntegrated development environmentLibrary (computing)CloningMoment (mathematics)Multiplication signGoogolMessage passingMobile appAnalytic setPay televisionServer (computing)Cartesian coordinate systemCodeFilter <Stochastik>Overhead (computing)Semiconductor memoryCASE <Informatik>System callImplementationSoftware bugDomain namePublic-key cryptographyTransport Layer SecurityInsertion lossWebsite1 (number)Sound effectClient (computing)Local ringState of matter2 (number)Elementary arithmeticQuicksortConfiguration spaceData managementComputer animation
01:01:09
Software developerWebsiteCartesian coordinate systemMultiplication signComputer animation
Transcript: English(auto-generated)
00:04
Yeah, let's get started. Welcome to this session on Application Insights Beyond Console Log. My name is Peter Ornholm, and I'm a software developer, but besides doing software development,
00:23
I like doing things like... Do you see the thing on the screen? Maybe? Do you get any output? I get it on this screen. Yeah. And there we go. Yeah. So my name is Peter
00:49
Ornholm. I'm a software developer, but I don't always do software development. I like to do things like scuba diving, skydiving, free climbing, and stuff like that. That gives me energy, and I really enjoy that. But to make my money, to make a living,
01:04
I work as an IT consultant in Stockholm. I do software development, and we focus specifically on Azure. We're a specialist in Azure, and we build a lot of stuff in Azure. We love the cloud. But we don't always do the cloud. We also do JavaScript stuff.
01:25
And, as you can see here, this is kind of the way I did error handling in JavaScript a couple of years ago. You know, JavaScript was only... We didn't do that much business logic in JavaScript, and in case JavaScript failed, maybe it wasn't that
01:42
important. So I did basically try-caps, and in case there was an issue, I just alerted it to the user, saying something like, it's a problem, please call the support, or please contact the support. But honestly, at least for me, when someone says this, I really don't contact the support. I actually think that they
02:04
should fix this. I shouldn't have to call them or email them in some way and make them fix it. But you know, after what I did, instead of alerting this, I moved on to the console log of error, you know, because alerting stuff is not good. So instead, you just hide it, and that's really not good. So that's what
02:26
it's turned into. Okay, do we have issues again? And let's see if I can fix this. Oh, the thing is, it doesn't matter how well-prepared you are. In
02:40
case you have prepared your PowerPoint a couple of times, or maybe you're writing code and do a lot, a lot of user testing and unit tests, or maybe there will always be edge cases. For example, the PowerPoint might fail. There's even a law stating that anything that can go wrong will go wrong. So you might have a blue screen during your presentation, or you
03:00
might have issues connecting your thing to the projector or to TVs. And it's the same thing in our applications, especially in JavaScript, I would say. There are so many flavors of browsers, so many different versions of browsers out there, so we can't really predict all things that could go wrong. Maybe we're writing a system that kind of does
03:26
the job, but has some side effects that we really don't want to have. Maybe we're writing a system that, technically, from a technical point of view, it actually delivers the water in this case.
03:43
But maybe we have so bad user experience, so bad UI, that the user really doesn't understand how to use it. And that's also an issue. Or maybe you have a system that works, like, it may be a prototype that works, but it doesn't really scale. Maybe we need to rearchitecture it or something like that. These three issues
04:03
are all issues that we need to handle in some way. And, you know, in an agile world, maybe you shouldn't take into considerations everything that can go wrong, but how should we prepare for the unexpected? A wise man once said, if you fail to
04:22
plan, you are planning to fail. And that was Brendan McFranklin. And Microsoft, and maybe they read this quote, or maybe they used to realize that developers need to understand how their Web applications are working, and need to understand the health and the state of their applications they are building.
04:42
So what Microsoft did was essentially saying that we will build logging and health monitoring as a service. So a couple of years ago they started building the software as a service application, Application Insights, that is hosted in Microsoft Azure. Application Insights is basically a way that
05:01
you can send a lot of telemetry, a lot of log data from your Web application into the cloud. Microsoft uses the best people in the industry to analyze that data, to gather that data at scale, to take that data and turn it into really useful dashboards. And it is not only dashboards that you can create with Excel and stuff like that, they
05:22
are actually doing machine learning, because they have so much data, they can predict, they have services that can say, we think your application will fail in about an hour or so. Because if you are looking at the state of your health right now, we know that because of the previous states, and because of other applications, your
05:43
application will probably not be that good in one hour or so. And that is really the value you get from using one of these services. And I would like to show you what Application Insights can do. Let's just switch here. So,
06:02
let's dive into one of my applications. This is an application that we have written for one of the hostels in Stockholm. It is kind of a basic application where you can sign in people. You sign them in, you can swap
06:23
beds, and you can do a different sign. So it kind of keeps track of what beds are available, and where do people stay for the night, and when do they check in, and stuff like that. So this application we are running Application Insights on. And to access Application Insights,
06:44
that is available in the Azure portal, and in the new Azure portal, which is the default nowadays. You go to portal.azure.com, and I will later show you how to create this yourself, but I will begin to show you some existing data. You open your resource, and then you can
07:02
dive into the Graphs view. By default, you would get this kind of summarization of the health of your application, showing you the server response times, page view load times, how many server requests you have, and also how many fail requests you have. And as you can see here, this is not only JavaScript stuff. This is a
07:22
single-page application, more or less, but it also has some backend. And that is one of the key features of Application Insights, that it is not limited to the frontend or to the backend. You can actually gather all of the data and start correlating them, and see the whole state of the whole application, not just one of the parts. So let's start diving into some of the
07:45
server response times. And as you can see, this chart differs a bit from this one, and that's because I've applied a filter here, let's zoom in a bit, saying that I only want real user traffic, because you might
08:02
have traffic to your website that comes from bots, or it might come from, in my case, we are running a lot of availability tests. So every five minutes, there are a lot of predefined tests that verifies that application is up and running. And they are not that interesting from an analytics point of view, because
08:21
they are automatic. So here we can see, let's change the time, let's go back and change the default time range here, so that we look at the last seven days of data. Once that
08:43
loads, we shall open this one. So Application Insights, depending on how much you pay, there is a free version, which I use, that saves data for seven days. The more you pay, the longer they will retain your data. But you can also store everything in blob storage. You can store all the raw data
09:01
if you'd like to go back for the last year or so. And as you can see here, there is an interesting pattern in how it's used. And that's because it is a system for hostels. Like hotels and hostels, people check in and check out at specific times. So here we can see that pattern. So it's used by the personal, like, once or twice a day. That's why we have this
09:25
pattern. And let's dive into, yeah, so the blue one is for this week, and the dotted lines are for the previous week. So, and for the previous, like, period that you select. So you can always compare your data
09:43
to a previous period. So you can see, is this normal, or is this, have you raised the response times, or are we lower now? We can also dive into one of the specific ones. So let's say that we'd like to dive into the check-in, the check-in request. So here we have kind of the top charts, what
10:01
requests does take the longest time to execute. So we can see here that, on average, it takes about half a second to do the check-in. And we have 67 counts of them. We dive into that one. Now we have a filter view that only shows those specific calls. And let's take one of those that
10:21
took a little bit longer. Let's take this one. And one of the cool things with Application Insights is that, as I said, it's not only JavaScript. It actually takes the full stack into consideration.
10:40
And in a full stack web application, there is probably somewhere you store your data. And Application Insights knows about SQL connections, for example, it knows about what it calls dependencies. So in case you have a SQL database as back-end, for example, it will know about that. And it will display this quite cool. So that you can have, like
11:03
this is the whole request time. And some of that time was spent executing SQL queries. So let's view it as a list instead. We can see that this one took some time. We can dive into that one and actually see the executed query. So in
11:23
case you are seeing that we have some really long running queries, you can correlate that and see that, let's say that something starts on the client, the user calls in, or you can see that the user has some really bad experience on the client, then you can backtrack that back to what SQL query was executed and start finding what is the actual problem.
11:45
But you can also see stuff like some metadata for like what IP address was called, what is the full URL to this call, and there is a lot of data available. So for example, we can see the specific browser that was used, and it was running Windows
12:03
7 in this case, running Firefox 47 and stuff like that. So that might affect it, probably not the SQL query, but it might affect stuff on the client side. So let's move on. And speaking of client side, I will go back, we have this page view
12:21
load time, because there are more stuff into how long it takes to display a page than the server rendering time. You might have really, really fast server rendering time, but the user might be in a slow connection, or you might have like issues with your load balancer or so, and that
12:40
might affect the load time. For example, when I flew here from Stockholm, I flew Norwegian, and Norwegian actually provides quite good internet connection on the plane, but it is not the same thing as being on a like high speed network. So when I actually went through this demo on the plane in the middle of the air, so it
13:01
was kind of doing the cloud in the cloud or something, but then like the server response times were still really, really fast, because once you try to check in somebody, once the server gets that request, the server will execute it like immediately, but it takes some time to get back to my computer and stuff like that, and this chart shows that kind of
13:22
statistics. So if it dives into this one, you can see that Application Insights will show you like what are the total page load time, what different components takes time in my application. So if we zoom in on this one, you can see that it will show you some client
13:42
processing time, how long does it take to kind of process the data and display it and update the DOM and stuff like that, how long did it take to send it, how long did it take to receive it, and the receiving is, that is kind of from the first byte arrived on the client until the last byte is finished, and you can
14:00
get that kind of insight. Is it this due to slow internet connections or stuff like that? We have actually used this in real world example where we identify that the users with most like the baddest experience, so to say, was the ones out on the field doing it from their mobile phones in kind of strange places.
14:22
So we were able to optimize for their use case and find maybe we can pre-cache stuff so that when they are out on the field, they don't need to download a lot of stuff and things like that. And this is kind of the technical stuff that more relates to how it's
14:43
executed and stuff like that or the requests. But you can also do business monitoring. So let's dive into what is called usage. And usage will show you like how many
15:05
users do you have, how many sessions have they been running, how many page views are there in total for these users, and more specifically, you can also show if you are doing custom logging for custom events,
15:20
you can see them here. So for example, what is actually like a check in when you check in the second night, we call it save person status, but you can drill down into different things and you can see what is the most used. So let's look at the check-ins. And this chart isn't that hot.
15:42
You will get a list of when the check-ins occur and when like it will display a table of check-ins. You can't really do that much to this. You can drill down into one of the check-ins and you can see we have been logging some custom properties. So you can see from what country did this person come from and
16:02
how many nights will he or she stay and stuff like that. But this data, you can actually send like JSON blobs and it will display all the properties here. But application insights also released a new tool quite recently called analytics. And you can find it from here. If you jump into application
16:22
insights analytics, that is actually what Microsoft uses internally. There is a really great blog post about this, how Microsoft monitors Azure with this technology. So it scales like really, really, really well. Because all the logs from all the Azure data centers goes into this so they can like analyze
16:41
stuff with that. So I predefined some queries here. For example, and this is the query language. I'm not sure. Can you see this from behind? The actual let's try to zoom in. I tried to split it up as well. So we can actually say
17:06
that take our custom events where the time stamp is larger than two weeks ago. So 14 days. And like select only those events called checking, summarize
17:20
them by count or summarize them and count them and group them by their home country and render it as a bar chart. And that will give us kind of a quick overview of what countries are the most people from. And then we also have another one saying it's kind of the same thing but I'll show the
17:41
beds instead. So what is the most like used bed in this case? And it's bed the number eight. And you can do all sort of crazy stuff here. And this is really, really fast. And it can digest like millions of rows really, really fast. So that was kind of the quick
18:03
overview in general what applications Insights can do. But let's bring this up. But my specific case was not
18:23
about generic ones. Because, you know, maybe how many of you remember the view state that you had in ASP.net web forms? Yeah. I read some like there was a background image that I used somebody created that friends don't let friends do post back or something. Maybe you remember the huge view
18:42
state that was in the beginning. It was like, yeah, Microsoft handled this form in crazy. It's really, really huge stuff. So I don't need to care. And that became like an issue over time. And from my point of view, I didn't touch like front-end applications. I didn't touch the JavaScript. I used this what was it called something like Ajax toolkit
19:00
or something. You install that MSI file and you just drag and drop some updates and Microsoft did the front-end code for you. But then, you know, there were limitations to this. And I realized I need to know about front-end. And like the first step to that was .NET MVC or ASP.NET MVC. Then you actually had to start touching
19:22
the razor views and do stuff there. But I also realized I really needed to learn some front-end stuff. And the thing that got me into that was a tweet. There was a guy tweeting, make sure to learn front-end so that you don't get stuck in the back-end. And it wasn't the text
19:42
that caught my attention. It was the picture he attached. And then I realized I don't want to be that guy that gets stuck in the back-end. So I better learn front-end. And learning front-end involved learning single-page applications at that time. And
20:01
what was actually making me look into single-page applications was that we were about to build a really large application where the customer demanded a lot of interactive features. And we realized we can't accomplish this with just jQuery and razor views. So we started looking into
20:21
AngularJS. Or before that, actually, I built a smaller project using KnockoutJS. But the attention to single-page applications, and this is a Google trend chart showing that single-page applications have just exploded for the last couple of years. And in our project that we started building, we built this single-page application using
20:42
AngularJS. And from time to time, we looked at our source code and how many lines of code in different languages are there. So we have this back-end using devapi and .net, and we have the front-end built in AngularJS and JavaScript. So we started looking at how many percentage of the
21:00
code are written in back-end and how many are in the front-end. And it was about 50-50. And we realized JavaScript is not a perfect language. So even at its best, we will probably have about 50% of the issues and 50% of the errors and exceptions happening in the browser. And how should we handle that? How should we take
21:22
care of those? Because that can be really annoying for the user. If the front-end, if the buttons doesn't work, it doesn't care. The user doesn't care how good our back-end are and how good we are keeping track on our back-end if the front-end doesn't work. So we realized there are not a lot of new challenges. We have a
21:41
lot of logic on the client. And we needed to find some kind of tool that could give us the insight of what was happening on the client and in the front-end. But we also realized we would like to correlate this with server-side events. Because maybe the issues on the client-side depends on
22:01
or are related to some back-end stuff. And that was when we found out about Application Insights. At that time it was really, really early stages. It didn't have that much functionality. It wasn't that great. But it has evolved over time. And it is now a really, really good service to
22:21
use. And from the JavaScript point of view, they are providing you with some easy-to-use functions. So you can track AJAX calls as of the dependencies. Because from the client-side, you can't access a SQL database straight away. But you can go to an AJAX or you can go to
22:41
a back-end and do an AJAX call. So you can track them and see how fast are they and stuff like that. You can track custom events like R checking, for example. You can track JavaScript exceptions. Metrics. So if you're tracking metrics, you're tracking numbers so that you can correlate them and you can display them as charts and compare them to
23:00
previous values and stuff like that. You can track page views to see the flow of the user throughout the page. You can see how long are they visiting specific pages. And you can also track traces, which is more like, which I use to like usually disable when you go into production. Because you don't want to send that much data over the wire. But
23:22
they're also providing their out-of-the-box experience. I'm not sure, is this also called AJAX in Norway? Yeah, it is. Yeah, so they are tracking AJAX by default. So once you install their SDK, they will track all of your AJAX calls automatically. You can opt out of that. But they will hook
23:40
into all of the AJAX events in the browser and on the page so that they can see how long does an AJAX call take? Is it successful? And stuff like that. And they will also hook into all the error handling in your application. So instead of showing these kind of, I think it was like Internet Explorer 6 or so that displayed all JavaScript
24:01
errors as popups. That was really annoying. But they will handle all of that for you and send those exceptions to the server. So enough with PowerPoint. Let's dig into how to actually implement this. By the way, if you have any questions or like can you do that or can you twist that
24:20
data or so, just raise your hand or shout the question out and I will try to answer that question as we go along. Any questions so far, by the way? Let's dive into the code. So here is my application. I've written a, this is not the hostel
24:41
application, but it is a small application calculating your age. So let's launch that one. And right now, this application is, I have not installed Application Insights on it. So it's a simple ASP.MVC application with
25:01
some JavaScript on the client. It's probably doing some weird stuff here. Yeah. We launch our calculator. This is simple. Just take some age here. Say May. And it will
25:22
start calculating. You are probably doing some more like advanced stuff than this, but let's look for an answer. Okay. So it didn't work. There is something wrong. And let's say that I'm an end user. And I didn't expect, I didn't expect to get some kind of result here. So
25:42
we could cheat and look in the console. There was an issue there. But let's install Application Insights to be able to monitor this in production. So what we do is we open our Visual Studio project. You right-click. I think you need to have Visual Studio
26:00
2015 or so. And then they have added this button called Add Application Insights Telemetry. If you have an existing web project. If you create a new web project, it will actually be a check box on the right. You can say I want Application Insights from the beginning. But I have an existing one. I'll add Application Insights. And
26:21
Application Insights sends data to Azure. You need to have an Azure account. I thought somebody could answer that question. In my case, I
26:40
think it might be because I use multi-factor authentication. And I think, like technically, I think this is kind of an in-private browser thing so that whenever I close this one, all the cookies will be cleared and it won't remember me. I think, from a security point of view, that's something like it. But I need, I've
27:02
also enabled, because, you know, when you're at the same conference as Troy Hunt, you should always have multi-factor authentication enabled on your services. Hopefully, this will log me in. And I'll need to select the, in this case, I use my MSDN
27:21
account. So in case you have an MSDN account, you all have like, I think it's about a thousand Norwegian and Swedish kroner a month to spend in Azure. I really, I like, I spend, I have a lot of web service there. I run, I like store terabytes of data. I put all of my images and stuff like that there, and I
27:40
still only spend like 500 of them. So Azure is like, for what you get, and for, from my point of view, like, I can have multi-regional data centers on my laptop, so to say, that's really cool. And here, they've done it like, really easy for you to get started. So you can
28:00
create a new resource. And then we'll like, they will create application insights in the cloud for you. That probably takes like 30 seconds or so, so I've already created one called POAI. So you can also select an existing one if you don't want to create a new one. You can do some customization here, but I'll just add it. And this is
28:20
actually not doing that much magic. What this tutorial does for you is to install some NuGet packages and it will like get the actual subscript or the actual ID for the resource and put that into the configuration file for you. But there is if you don't want to use this extension and do it yourself.
28:41
There is a tutorial and I missed the end how to do it manually as well. But we can now if we look at the Git changes. We have it it added some JavaScript files for us. added the change to web config a bit. Added some application insights config
29:00
and stuff like that. But and also added some packages. The thing is there are I think there are newer packages available. So let's see because to get kind of the latest and greatest stuff you need to go in and update your packages as well. So let's do that. Sorry.
29:21
Manage and get packages. I usually filter. I don't want to update all. So I filter by insights because there is a new feature I will show you that it's only available in the latest beta. So we select all of them and update
29:40
them. Accept while we're doing that what what wasn't installed or it was installed as like JavaScript files in your solution. I usually use the CDN version
30:00
because that gets updated automatically. And to get that you dive into the portal. Open up your in my case PO AI that resource and you go to the quick start cloud button and say that I want to monitor my client
30:20
side application. That one will give you a text that is used copy paste this one. You go into your template file in an MVC application that would be views shared the layout and you paste it there.
30:43
Didn't seem to take let's do that again. like that. There we go. So what that did was to to add a kind of a it added the CDN version and it's kind of just boilerplate code and
31:00
saying that whenever you visit this page track the page view and stuff like that. But you just need to paste that code there. And let's see if the update is ready. Yeah. So now everything is updated and ready. And that's actually what you need to do. Now Application Ins is installed and configured.
31:21
We can launch the application. Again. While we're let's go back here. So one of these let's open it up again.
31:41
One of the cool new features is what they are calling live stream. So let's see if this boots up. live stream is a feature that when whatever data and whatever telemetry that is sent from your application with a latency of about two seconds it will show up in the portal as a live streaming chart.
32:04
So we have one live stream occurring. Let's dive into that one. And I do some refreshing here. Let's see if the data turns up.
32:22
And we get some CPU. The requests aren't actually showing up yet. Maybe I'm too quick. So what you can actually get because it will also collect performance monitoring stuff. So you can see like what are the CPU of my server. Up there we have it. So you can see the total number of requests happening right now in your application.
32:40
You can see how long does it take. many of them are failing. How many of them like how many dependency calls are you making to your databases and stuff like that. And that's really, really useful during deployment for example. Maybe you want to monitor your deployment and like you want seconds only like two or three seconds after
33:00
the the issues are occurring. would you need to know whether or not you should roll back or you should continue with your deployment. And maybe also maybe the the requests are steady like steady but maybe the CPU is like hitting the roof and then you need to to roll back maybe. So this is a really really new cool feature and
33:21
you get that by just installing those Nu get the each here. Still doesn't seem to work. Let's try to change some stuff. Let's do 2010.
33:44
No, there seems to be an issue. So in our case to explore the the data from the browser in an aggregated view. We go to settings and drill down to browser. So you can find this data on different places but they also made a blade that collects
34:00
all of the data for the browser. So maybe we can we can start by drilling down the time range to only the last hour because we know the errors within that range. And we can see that we have the data is starting to appear here. So if we drill down
34:22
to refresh because sometimes this data does have some longer latency. So I'll take some some older data. Let's select that time range. Let's jump back for the last 24 hours.
34:40
So here we have the issue. So one cool thing is also instead of just displaying a long list of all your exceptions or all your issues in JavaScript it will kind of group them and aggregate them depending on what the issue there is. So in this case we can see that we have these two applications is not a function.
35:01
Let's drill into that one. So this specific issue has happened for two users and eleven times at these times. So let's take the latest one and this is 10 53. This is probably the one that we are experiencing. And now we get so we are getting exceptions
35:20
from JavaScript from the browser from our users showing up. We can have some like basic information as I'm running Windows 10. This is the URL that was requested. The failed method name is format days. I'm running Chrome 51 and stuff like that. Let's drill down.
35:40
So this is like the error message that would show up in the console. And you get a full call stack as well. So we're used to have this on the server. Maybe you're running some else some like tool like N log or so and you can track the deep dive into what happened. But now we're getting call stack with what file that
36:00
had the issue and at what line. So it started with some callback from XML HTTP request. So that's AJAX. And if we drill down to the latest one we have the calculator app dot JS at line five. So it's not that hard to calculator app
36:21
line five. So hands up. What do you think the issue is? Or just shout it out. Yeah. So it's not a string. So it's probably that we're getting the days as a number in JavaScript. And a number can't be uppercase because it doesn't
36:40
have uppercase or lowercase. So let's try to delete that. And run our example again. Yeah. That seemed to work better. So now we're we've got rid of that. But doesn't
37:00
it take really long time to calculate the age? Yeah. So let's try to find out why that is happening. If you go back here to the browser blade. Let me just close the other one. If you go back to the browser blade, we see that from the client's point of view, we have a dependency on
37:20
our backend. In this case it's my web API that are on the client. But here's an example. So let's dive into this. So we see that we have a dependency on this URL. And it seems like
37:40
we're accessing the API age and it takes a lot of time. About five seconds. So let's take one of those. The five second thing. We have a dependency, an Ajax dependency on the server. This was the specific URL that was requested. So we can see that we tried to calculate for this date.
38:01
And this doesn't really give us that much information because we don't know what happens in the backend. So let's try. To begin with we can start looking at data happening for this operation. So we can see if an operation in this case is from the client's point view that
38:20
the client were doing an operation trying to get the get the age. And we see that we had some exceptions around that. And you see all of the telemetry and all of the data happening at that time. But we can also look into all telemetry for this user session. And here it becomes really interesting.
38:42
Because when you look at the user session you can see like what is happening for this user in total in whatever system the user is using. So we can see here that we are if you look into I think
39:00
it's this one get age. So this is the request from the server's point of view. And we can see that the response callback was 200. It took about 5.1 seconds. For some reason it didn't connect these ones. Let's let's drill back.
39:22
we can go back at least and see that what dependencies does the server have. So if we go back here and we do server response times. We can see that the server has another dependency also on something
39:40
called an API app. And that dependency seems to be taking about 4.36 seconds. So we can try to figure out here that in our case the issue is that we're using a third party service in this case an API in Azure that calculates the age for us. And that seems to be the issue. That
40:00
API takes quite a long time. And that might be in our case we have had like dependencies on Twitter right by for example and the user maybe the user is searching for tweets on our page. And then say it's really slow and then we're trying to figure out are we the slow part or are the third party library the slow part. In this case it might be the age calculator.
40:21
And it's just a silly I think I have the source code up here for the for that API. And it's actually doing depending on how old you are it's doing some kind of just sleeping. And that's just by for example in the real world it probably be some kind of third party API or something that
40:46
might have a dependency on another server or another API and you can have that flow. And also there are like point like hook points in application insights so you can define what is an operation see if you are having multiple systems you
41:00
can synchronize them so that one operation is synchronized between them so that you can have the whole flow as one as one view so to say so and but
41:20
let's go back to the calculator you can do custom tracking as well so let's say for example that we would like to have some kind of business analytics on what what are the ages we're calculating for application insights will create a global variable called app insights that will have
41:41
track event you can track event by saying calculate h and just track the event the event as is so that you want to know that this happened at this time but you can also supply a json object with properties so for example we can say day of birth is our day of birth
42:07
and is there something else maybe the name i think we have the name somewhere as well right maybe we don't yeah so just go with the day of birth and now if we do that launch application again it will track that as an event each time somebody tries to to do this
42:28
and that can be really helpful in debugging but also from a business point of view like what what different things are used and you can filter by those properties and see how many people whose name is peter are doing this and what's their age and stuff like that
42:46
so um i'll jump back to or any questions on the code so far does it look simple enough to get started with yeah and some real use use cases or some real
43:09
scenarios that we have experienced because one thing you can do is to attach the the specific version of your application that's running to each log row and that you can do it there is
43:20
like if you're using uh visual studio team services to deploy you can like it's only a checkbox i think to enable this but we did it manually and in that case you can have your charts grouping all your data depending on what version you're using so you can see like did we get more exceptions after deploying this one or did our if you go to this one did
43:42
our response times did we get lower response times with our new version and stuff like that so that can be really interesting data to look at and also you can see like what during the past weeks what version did work the best and stuff like that especially if you're
44:01
doing continuous deployment and continuous delivery another thing that maybe you noticed it during the demo is that application insights correlates uh things like exceptions and stuff like that to how many users are affected by this one and this is a a real case where we noticed that we had like thousands of exceptions during a short period of time
44:23
3,000 exceptions in this case and normally if you have that this system wasn't that big so like 3,000 exceptions was a huge number of exceptions for this system and we realized we need to have our team look at this immediately probably the system is broken and stuff like that
44:42
but then we went in and looked at the chart we noticed it only affected one user that user probably had a really really bad experience but realized like it's not worth having our whole team dedicated to solving this issue right now and it turned out that when when we started digging into what the issue was it was that the user used a really old
45:03
version of safari that didn't support some kind of javascript stuff and it was caught in an infinite loop or so and it's like through a lot of exceptions at us so this is a really really good way of prioritizing what should you look at and should you do it now or should you do it later
45:20
and we also have this a new thing called release annotations if you're doing continuous delivery and continuous deployment you probably want to know like not only what version is the what was it running while this happened you might also want to know like what deployment was it what commit what commit was the latest one included in this race and stuff like that
45:43
so there is an api if you're running whistle to the team services you can also like it's only installing one extension and specifying your application insights account and it will automatically annotate all of these graphs so that you can show like what version is it running
46:00
who was deploying that version and stuff like that there is also on the rest api so if you are running in our case we were running octopus deploy so we were able to to annotate our graphs with even though we're running a non-microsoft product so to say and you can also see the yeah
46:22
i think it's only you need to search for release annotations i think um that i think i think it's called release annotations it's it's done by microsoft so if you just filter all extensions from microsoft you should find it there um and so that's really because you can also to each annotation you can like apply or you can supply a json blob with
46:45
whatever data you want to so it's up to you to specify like what what do what do i want to to know if i find an issue what do i want to know about that release that happened before that issue and stuff like that you can also show graphs of like the response times grouped in
47:03
performance packets as they call it so you can see for example maybe you need to prioritize some really slow and some really slow responses or some really slow endpoints and then you can start by looking yeah we we should get away with all of those that takes longer than 30 seconds maybe so in this case we can see that we have like the most of them in this case
47:26
17 000 takes less than three seconds two and a half thousand takes about three to seven seconds but we have 29 of them taking longer than 30 seconds and that is not acceptable because that is a really really long response time and also this is a real case and the graph is a
47:48
little bit different because this was in the beginning when application insights was young and we had an issue where the customer of the application that we had built called in and said our end users can't log in to the system please fix this immediately we are losing money as
48:04
we speak so this kind of was the overview chart and we were quite easy we could easily identify and and see that this is this is actually an issue the green chart shows how many http requests there were and they like dived into zero and the yellow chart showed the exceptions
48:24
have like happening on the server and they just like we had a lot of them during a short period of time so at first we could like just make sure that this is actually an issue then we were able to dig down and realize okay we have a dependency on our login provider and they went down
48:42
so this is the issue we realized so we we swapped one setting going into a fallback identity provider and once that like took place in production we were able to verify that all of the exceptions went out to zero again and then we could start letting the users in
49:01
again so that's like that's how you can use application insights for all of those three things and we've learned some lessons one is to identify your users but you need to be like do you have any end agreements with your users what kind of data can you store with them and like how personal can
49:21
you get but i would really like to recommend you to to in some way be able to to identify what users did experience this exception in our case we use it the opposite way so if a user calls in and says i like two days ago i tried to create an account for you like or tried to create this product or do this thing it didn't really work out then we can take their username search in
49:45
the logs and kind of get the view in application insights for what did this user experience what we usually do is not to store their specific username we create some kind of grid or something so that it's it's like from the data point of view you can't really
50:01
you can't really figure out you need some kind of local user database or so to translate that but in some way try to figure out who the user is also combine it with other services i'll show you a list of them later but application insights isn't the silver bullet for all scenarios and maybe you're we are using it for example in combination with google analytics because that
50:24
business people really likes that and google analytics has been around for a lot more years doing specifically like usage flow and stuff like that there's also there are scalability limits in application insights so in some cases we use Splunk or so Splunk is really really scalable
50:43
and we also you have used some other stuff but also log successful requests not only errors because sometimes the error is not an exception the error might be that you are doing a lot a lot of successful requests but while you should only do one so one of the cases we had was that
51:03
one of our internal like services called one of our apis like millions of times an hour while it was only supposed to call it once an hour so you know in that case our service handled that one and we scaled and we didn't really handle it but we realized okay so and no
51:22
exceptions occurred so therefore we weren't alerted but when you started looking into all the successful requests we realized okay we have a for for the amount of users we have right now this is not this is not the thing that it should be much less and last but not least use a paid
51:41
plan the paid plan there's a free plan that you can get started with and all small products are used that but once you go into production with a business case try to to pay for it it's only like a couple of hundred kronor a month and that will give you longer retention of data you can store much more data better searchability and scalability and stuff like that
52:04
and as i mentioned here are some of the services that i've used there are different ones for different scenarios and we use pingdom in some cases to track our availability we use blank in some cases for like when we we need to monitor more than only the web servers
52:22
there is a company down here called track js i i've used got to know them they seem to be really good at javascript monitoring as well and new relic is good in some cases so like in the beginning at least like add some of them and try to figure out what what solves the case best
52:41
for us but i'd say that it's never bad to add application insights because like it's only a nougat package you can get quickly up and running and that's much better than like you shouldn't in the beginning of a project you should have it from the beginning and instead of like investigating a lot of different service use one of them
53:01
but as you go add multiple ones and see what solves the case for you and yeah i'll also show a quick demo of alerts so there is one thing in the portal called alerts let's go back so maybe you don't want to sit here and like look at these charts all
53:23
the day then you can drill down into settings i actually have a thing there called alerts so you can set up quite cool alerts saying that in case let's say that in case browser exceptions
53:42
during is greater than four over the last 10 minutes send an email or call this webhook or like post to slack or whatever you want to do and here you get like a historical chart saying that we actually exceeded for about an hour ago or so so then you can see say that you
54:08
can add alert rules so that you get an email or like that you get notified whenever your system goes down and you can set up quite advanced alert rules to to post them to other systems and do stuff like that and that's one of the key features but they've also added one really
54:24
really cool thing called proactive diagnostics let's see if i can open that one proactive diagnosis diagnostics and is the machine learning part so there i think it's actually enabled by
54:40
default it seems so so that will analyze your data and say that like usually you only have about 10 exceptions an hour or so but now you seem to have 100 of them so that's probably not a good thing where like your exceptions are accelerating going from 10 to 15 and stuff like that so you should probably start looking into this now while it's not that big issue before
55:03
it gets a big issue and so that's one of the really cool things because in the beginning you probably don't know your application that well so you know where to put the threshold but this machine learning service will figure that out for you so so any final questions or like
55:26
any questions or feedback how to use this yeah
55:47
yeah so the question is if we go back to let's see like this if you go back to javascript
56:01
um the instrumentation key which is my kind of secret key is in plain text so if we go to the browser though and we do view source on this one everybody can forget this out and that is it's totally correct and that might be an issue so but this is also an issue for
56:24
kind of all of the client-side javascript libraries for google analytics and all of them are doing the same thing what you can do is to add filters in case somebody would steal your key you can regenerate the key i think and you can also add filters in the portal saying i only
56:42
want to show this for this specific domain so in case somebody would like try to but but it might be an issue that they are like they know that you have a paid plan and you paid for all data that goes in there so somebody else sends a lot of data to to overflow your system and i haven't seen that yet but but it might be an issue so it is a public key so to say
57:06
that everybody so somebody else could see that if you go to my by the way all code is available on github including this one so if you like clone that one you will send data to my account actually i got a yeah another question
57:21
could send your messages application insights ever affects the running of your application so if app insights ever went down or had a problem yeah could it stop your app from running and no good the question is um if application insights goes down which i've seen that one one one time actually during the past couple of years it probably been more but i've only noticed
57:42
once if application insight goes down will that affect my application and make that stop working and the answer is no like in case there isn't a bug but they're actually doing some quite advanced stuff like if it can't reach the backend server it will store the data in the local storage and then when you launch the like once it gets up it will try to push the data
58:04
at that time on the server side it will store it in memory i think and it will also it will run as a separate thread and do its work whenever like the server isn't doing anything else and stuff like that so it tries to be really smart in the implementation when to send data
58:21
and not to disturb the system so to say yeah exactly so you can't like there is no guarantee how fast the data will reach uh the backend i think question there yeah yeah yeah good question
58:58
the question is i added application insights in this case to my msdn account
59:03
and what happens once you go into production will that how can you move that and stuff like that is that correct uh msdn account should be used for like trying out stuff developing and like see telling your boss this is the business this is what we should invest in and we usually do that like to to convince the business or convince someone the team or so that this is what
59:25
we need and then we create a new account on our production azure environment so to say at the moment i don't think you can move ash like application insights resources so created we create recreated it in in our production subscription instead
59:41
was it a last question can you say so yep so the question is does the telemetry and the monitoring impact the performance of the application
01:00:00
it does, because all overhead or everything you add adds some kind of overhead. But I haven't seen it affecting it more than a couple of milliseconds, maybe. What we have seen, at least, is that the data we're getting from it is so good,
01:00:21
so that we can, it doesn't matter if it adds 10 milliseconds or so in overhead to our calls, because if you realize that our calls takes 50 seconds, and it takes 10 milliseconds to figure that out, we can start drilling down into those issues and stuff like that. But it's always an overhead. So what we usually do is that we
01:00:41
add some kind of configuration, so that in our release management, it's kind of a kill switch. So if we think that it would be an issue with our logging, we can always redeploy the application with Application Insights disabled, so to say. Used to verify that this is not the issue.
01:01:01
But I guess it's from case to case. I think we have reached final time. And sorry, if nothing else, I'd just like to finish with if Benjamin Franklin would have
01:01:23
lived today and been a developer, he probably said, if you don't use Application Insights, you're planning to fail. Thank you for your listening, and I hope you're having a good time.