-
Notifications
You must be signed in to change notification settings - Fork 237
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Beta] [BUG] SharedWorker does not Instrument fetch correctly #1996
- Also add a Shared Worker example
- Loading branch information
Showing
16 changed files
with
985 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # Microsoft Application Insights JavaScript SDK Examples | ||
|
|
||
| A collection of examples using the ApplicationInsights SDK, these examples are compiled as part of every build (unless otherwise stated), | ||
| but may not be executed as part of any automated test pass -- this may change/vary. | ||
|
|
||
| ## Examples | ||
|
|
||
| [Shared Worker](./shared-worker/README.md) | ||
|
|
||
| ## Contributing | ||
|
|
||
| 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 repositories using our CLA. | ||
|
|
||
| This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). | ||
| For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) | ||
| or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. | ||
|
|
||
| ## Trademarks | ||
|
|
||
| This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft’s Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies. | ||
|
|
||
| ## License | ||
|
|
||
| [MIT](LICENSE) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # Microsoft Application Insights JavaScript SDK Example - Shared Worker | ||
|
|
||
|  | ||
|
|
||
| Example to instrument a Shared-Worker | ||
|
|
||
| ## Simple Instrumented Shared Worker Example | ||
|
|
||
| This is a simple example that uses 2 Shared Workers as defined by | ||
| - [worker.ts](./src/worker.ts) | ||
| - [worker2.ts](./src/worker2.ts) | ||
|
|
||
| You WILL NEED to have compiled the repository before running this example as it loads the compiled scripts, and you will also NEED to start the | ||
| local web server via `npm run serve` from the root of repository. | ||
|
|
||
| You can load the Shared Worker example via the [SharedWorker.html](SharedWorker.html). | ||
|
|
||
| This implements a VERY simple Shared Worker example that passes messages between the | ||
| current page and the workers using the type in the [IExampleMessage](./src/interfaces/IExampleMessage.ts), | ||
| And the support functions for the Web page are located in [example-shared-worker.ts](./src/example-shared-worker.ts) | ||
|
|
||
| ## Contributing | ||
|
|
||
| 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 repositories using our CLA. | ||
|
|
||
| This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). | ||
| For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) | ||
| or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. | ||
|
|
||
| ## Data Collection | ||
|
|
||
| As this SDK is designed to enable applications to perform data collection which is sent to the Microsoft collection endpoints the following is required to identify our privacy statement. | ||
|
|
||
| The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices. | ||
|
|
||
| ## Trademarks | ||
|
|
||
| This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft’s Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies. | ||
|
|
||
| ## License | ||
|
|
||
| [MIT](LICENSE) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| <html> | ||
| <head> | ||
| <script src="./browser/example-shared-worker.gbl.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Simple Instrumented Shared Worker Example</h1> | ||
| <p>Please make sure that you have compiled the repository before running this example as it loads the compiled scripts.</p> | ||
| <p>This script also needs to be run from the hosted `localhost` instance which can be started by running<br/> > <code>npm run serve</code><br/> | ||
| from the root folder of the repository. | ||
| </p> | ||
| <p> | ||
| And then re-laoding this page from <a href="http://localhost:9001/examples/shared-worker/SharedWorker.html">http://localhost:9001/examples/shared-worker/SharedWorker.html</a> | ||
| </p> | ||
| <p> | ||
| Work is sent to the worker(s) and any responses are returned and displayed on the main console, if you want to inspect | ||
| the console of the workers you can access and debug the worker code via these links. You will need to manually open as accessing | ||
| local resources is generally prohibited. | ||
| <ul> | ||
| <li>Chrome: <code>chrome://inspect/#workers</code></li> | ||
| <li>MS Edge: <code>edge://inspect/#workers</code></li> | ||
| </ul> | ||
| </p> | ||
| <hr /> | ||
| <h2>Worker 1 - Instrumented</h2> | ||
| <p>You must use the <code>Initialize SDK</code> button at least once to initialize Application Insights within the worker. | ||
| The <code>Unload SDK</code> will cause the SDK instance in the worker to unload and this will disable the reporting of fetch calls.<br/> | ||
| Once the SDK in initialized it will report back when events are sent from the Workers SDK instance. | ||
| </p> | ||
| <div> | ||
| <div style="display:inline-block; width:50%; vertical-align: top;"> | ||
| <div> | ||
| <div style="display:inline-block; width:10%"> | ||
| <label for="connectionString">Connection String</label> | ||
| </div> | ||
| <input id="connectionString" style="width:50%" value="YourConnectionString" /> | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.loadSdk('connectionString')">Initialize SDK</button> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.unloadSdk()">Unload SDK</button> | ||
| </div> | ||
| <hr style="margin-top:10px"/> | ||
| <div> | ||
| <div style="display:inline-block; width:10%"> | ||
| <label for="fetchUrl">Fetch URL</label> | ||
| </div> | ||
| <input id="fetchUrl" style="width:50%" value="https://js.monitor.azure.com/scripts/b/ai.2.integrity.json" /> | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <div style="display:inline-block"> | ||
| <div> | ||
| This will cause the worker (if the SDK is initialized) to send a RemoteDependency event. | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.fetchUrl('fetchUrl')">Fetch the URL</button> (Contents will be sent to the main page console via a post) | ||
| </div> | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <div style="display:inline-block"> | ||
| <div style="margin-bottom:2px"> | ||
| This will cause the worker (if the SDK is initialized) to send a new PageView event. | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.trackPageView()">Track Page View</button> | ||
| </div> | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <div style="display:inline-block"> | ||
| <div style="margin-bottom:2px"> | ||
| Send an invalid request to the worker | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.sendInvalidRequest()">Send Invalid Request</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div style="display:inline-table; width:45%; margin-left: 10px"> | ||
| <p>This is the information returned by the worker, when the SDK is initialized you will see an "Events Sent" | ||
| message when the SDK has sent the events to Azure Monitor, if the connection string is valid you will | ||
| see the generated events in the Azure Monitor Portal. | ||
| </p> | ||
| <textarea id="_logContainer-log" style="width:100%; min-height: 200px;"></textarea> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.clearLog('log')">Clear Log</button> | ||
| </div> | ||
| </div> | ||
| <hr/> | ||
| <h2>Worker 2 - Not Instrumented</h2> | ||
| <div> | ||
| <div style="display:inline-block; width:50%; vertical-align: top;"> | ||
| <div> | ||
| <div style="display:inline-block; width:10%"> | ||
| <label for="fetch2Url">Fetch URL</label> | ||
| </div> | ||
| <input id="fetch2Url" style="width:50%" value="https://js.monitor.azure.com/scripts/b/ai.2.integrity.json" /> | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.fetch2Url('fetch2Url')">Fetch the URL</button> (Contents will be sent to the main page console via a post) | ||
| </div> | ||
| <div style="margin-top:10px"> | ||
| <div style="display:inline-block; width:10%"> | ||
| </div> | ||
| <div style="display:inline-block"> | ||
| <div style="margin-bottom:2px"> | ||
| Send an invalid request to the worker | ||
| </div> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.sendInvalidRequest2()">Send Invalid Request</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div style="display:inline-block; width:45%; margin-left: 10px"> | ||
| <p>This is the information returned by the worker 2. | ||
| </p> | ||
| <textarea id="_logContainer-log2" style="width:100%; min-height: 200px;"></textarea> | ||
| <button onclick="javascript:Microsoft.ApplicationInsights.Example.clearLog('log2')">Clear Log</button> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| { | ||
| "name": "@microsoft/applicationinsights-example-shared-worker", | ||
| "author": "Microsoft Application Insights Team", | ||
| "version": "2.8.10", | ||
| "description": "Microsoft Application Insights Shared Worker Example", | ||
| "homepage": "https://github.com/microsoft/ApplicationInsights-JS#readme", | ||
| "keywords": [ | ||
| "azure", | ||
| "cloud", | ||
| "script errors", | ||
| "microsoft", | ||
| "application insights", | ||
| "browser performance monitoring", | ||
| "web analytics", | ||
| "example" | ||
| ], | ||
| "main": "dist/applicationinsights-example-shared-worker.js", | ||
| "module": "dist-esm/applicationinsights-example-shared-worker.js", | ||
| "types": "types/applicationinsights-example-shared-worker.d.ts", | ||
| "scripts": { | ||
| "clean": "grunt clean", | ||
| "build": "npm run build:esm && npm run build:browser", | ||
| "build:esm": "grunt example-shared-worker", | ||
| "build:browser": "rollup -c rollup.config.js", | ||
| "rebuild": "npm run build", | ||
| "test": "", | ||
| "mintest": "", | ||
| "perftest": "", | ||
| "lint": "tslint -p tsconfig.json", | ||
| "ai-min": "grunt example-shared-worker-min", | ||
| "ai-restore": "grunt example-shared-worker-restore" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/microsoft/ApplicationInsights-JS/tree/master/shared/AppInsightsCore" | ||
| }, | ||
| "license": "MIT", | ||
| "sideEffects": false, | ||
| "devDependencies": { | ||
| "@microsoft/ai-test-framework": "0.0.1", | ||
| "@microsoft/applicationinsights-rollup-plugin-uglify3-js": "1.0.0", | ||
| "@microsoft/applicationinsights-rollup-es5": "1.0.0", | ||
| "grunt": "^1.5.3", | ||
| "grunt-cli": "^1.4.3", | ||
| "grunt-contrib-qunit": "^6.2.1", | ||
| "@nevware21/grunt-ts-plugin": "^0.4.3", | ||
| "@nevware21/grunt-eslint-ts": "^0.2.2", | ||
| "globby": "^11.0.0", | ||
| "magic-string": "^0.25.7", | ||
| "pako": "^2.0.3", | ||
| "@rollup/plugin-commonjs": "^18.0.0", | ||
| "@rollup/plugin-node-resolve": "^11.2.1", | ||
| "@rollup/plugin-replace": "^2.3.3", | ||
| "rollup-plugin-cleanup": "^3.2.1", | ||
| "rollup": "^2.32.0", | ||
| "typescript": "^4.9.3", | ||
| "tslib": "^2.0.0", | ||
| "qunit": "^2.11.2", | ||
| "sinon": "^7.3.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "tslib": "*" | ||
| }, | ||
| "dependencies": { | ||
| "@microsoft/applicationinsights-shims": "2.0.2", | ||
| "@microsoft/dynamicproto-js": "^1.1.7", | ||
| "@microsoft/applicationinsights-web": "2.8.10", | ||
| "@microsoft/applicationinsights-web-snippet": "1.0.1", | ||
| "@nevware21/ts-utils": ">= 0.7 < 2.x" | ||
| } | ||
| } |
Oops, something went wrong.