This README is broken down into several parts:
- Who should use this plugin
- What this plugin does
- When to use this plugin
- Where to get more information
- Why this plugin exists
- Getting Started
- Supported Browsers
- Breaking Changes
these parts go together to explain the reasoning for this plugin's existance and provides an explaination as to how everything works. Each of these sections will finish with a bullet-point list that summarizes the section
Who Should Use This Plugin
This plugin should not be included in a finalized website. This is not for the end-user.
- Customer Support services
- not the end-user
What This Plugin Does
This plugin dynamically injects dynamic components into the webpage to provice a rich debugging experience for Application Insights JS. Upon initialization, there will be a semi-transparent bubble with a number in the bottom-right corner of the screen:
this will reach full opacity upon hover, at which point it will also append "AppInsights" to before the number:
This number is here to indicate the total number of calls to tracked functions, such as
trackPageView. By default, every useful function is tracked.
When there's an error (
(!) will be appended to the number within the
bubble like so:
When this bubble is clicked, it will expand to a more detailed view, showing the frequency of each tracked function call. It will also get rid of the error indicator:
This bubble can be clicked once more to minimize it.
The Detailed View
When the bubble is open, clicking the "toggle detailed view" button will bring down a view that shows a list of event objects. By clicking on one of these objects, you can open it up in tree-view fasion:
This is modeled after the developer tools of Chrome/Edge to keep things familiar.
Each node that can be opened further has a
[+] before it, whereas ones that can be minimized will
[-] before it. Nodes like this also have their type, that being object or array, denoted
next to them with
 respectively. Between these braces/brackets will be a number.
This number shows the number of entries within that object or array.
There a button above these entries that says "copy current node." This button will, if a node is selected, copy the node and its children up to a certain depth to the clipboard as a JSON string. This will also handle circular references.
When Should This Plugin Be Used
This plugin is used when:
- data isn't reaching azure
- things don't appear to be tracked
- something is crashing and developers are unsure if the plugin is causing it
Where to get More Information
Why This Plugin Exists
ApplicationInsights-js has lacked a solid way to debug issues for awhile now. Often, developers had to dig through code and go to a multitude of different areas to even begin diagnosing an issue.
The impact of all of these will bring about a much better development experience for those using ApplicationInsights-js. Just the fact that they are able to see when a function is fired will dramatically cut-down on time spent diagnosing and eliminating bugs. The tree view will foster communication between developers and testers, allowing them to copy and send important pieces of data elsewhere.
Instead of needing to come to the ApplicationInsights-js team with every bug encountered, in many cases developers will be able to use these tools to diagnose things that are going wrong on their own thanks to this new layer of transparency.
run the following console command to install appInsights and the debug plugin:
npm install --save @microsoft/applicationinsights-debugplugin @microsoft/applicationinsights-web
NPM Setup (ignore if using Snippet Setup)
;;const toTrack ='trackEvent''trackPageView''trackPageViewPerformance''trackException''trackTrace''trackMetric''trackDependencyData''throwInternal' // called when a message is logged internally'logInternalMessage' // called when a message is logged internally'triggerSend' // called when data is queued to be sent to the server'_sender' // called when data is sent to the server;const debugPluginInstance = ;const appInsights =config:instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'extensions: debugPluginInstanceextensionConfig:DebugPluginidentifier:trackers: toTrack;appInsights;appInsights; // Manually call trackPageView to establish the current user/session/pageview
Consuming via the CDN using the Snippet Setup (Ignore if using NPM Setup)
As such, supporting Internet Explorer 7 and other browsers running ES3 is no-longer a priority for this plugin.
This can be expected to work in:
- Edge (new and old)
- Internet Explorer 11 (under construction)
Known Potential Breaking Changes
- Configuration options
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.