forked from microsoft/ApplicationInsights-JS
-
Notifications
You must be signed in to change notification settings - Fork 0
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 microso…
…ft#1996 - Also add a Shared Worker example
- Loading branch information
Showing
18 changed files
with
888 additions
and
119 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
Large diffs are not rendered by default.
Oops, something went wrong.
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 | ||
|
||
![GitHub Workflow Status (main)](https://img.shields.io/github/actions/workflow/status/microsoft/ApplicationInsights-JS/ci.yml?branch=master) | ||
|
||
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,67 @@ | ||
<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: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/> | ||
<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> | ||
<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> | ||
<hr/> | ||
<h2>Worker 2 - Not Instrumented</h2> | ||
<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> | ||
</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": "grunt example-shared-worker-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" | ||
} | ||
} |
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,102 @@ | ||
import nodeResolve from "@rollup/plugin-node-resolve"; | ||
import { uglify } from "@microsoft/applicationinsights-rollup-plugin-uglify3-js"; | ||
import replace from "@rollup/plugin-replace"; | ||
import cleanup from "rollup-plugin-cleanup"; | ||
import dynamicRemove from "@microsoft/dynamicproto-js/tools/rollup/node/removedynamic"; | ||
import { es5Poly, es5Check, importCheck } from "@microsoft/applicationinsights-rollup-es5"; | ||
import { updateDistEsmFiles } from "../../tools/updateDistEsm/updateDistEsm"; | ||
|
||
const version = require("./package.json").version; | ||
const workerName = "example-shared-worker"; | ||
const workerModule = "worker"; | ||
const worker2Module = "worker2"; | ||
const banner = [ | ||
"/*!", | ||
` * Application Insights JavaScript SDK Example - Shared Worker, ${version}`, | ||
" * Copyright (c) Microsoft and contributors. All rights reserved.", | ||
" */" | ||
].join("\n"); | ||
|
||
const replaceValues = { | ||
"// Copyright (c) Microsoft Corporation. All rights reserved.": "", | ||
"// Licensed under the MIT License.": "" | ||
}; | ||
|
||
function doCleanup() { | ||
return cleanup({ | ||
comments: [ | ||
'some', | ||
/^.\s*@DynamicProtoStub/i, | ||
/^\*\*\s*@class\s*$/ | ||
] | ||
}) | ||
} | ||
|
||
const browserRollupConfigFactory = (name, isProduction, format = "umd", extension = "") => { | ||
const browserRollupConfig = { | ||
input: `dist-esm/${name}.js`, | ||
output: { | ||
file: `browser/${name}${extension ? "." +extension : ""}.js`, | ||
banner: banner, | ||
format: format, | ||
name: "Microsoft.ApplicationInsights.Example", | ||
extend: true, | ||
freeze: false, | ||
sourcemap: true | ||
}, | ||
treeshake: { | ||
propertyReadSideEffects: false, | ||
moduleSideEffects: false, | ||
tryCatchDeoptimization: false, | ||
correctVarValueBeforeDeclaration: false | ||
}, | ||
plugins: [ | ||
dynamicRemove(), | ||
replace({ | ||
preventAssignment: true, | ||
delimiters: ["", ""], | ||
values: replaceValues | ||
}), | ||
// This just makes sure we are importing the example dependencies correctly | ||
importCheck({ exclude: [ "applicationinsights-example-shared-worker" ] }), | ||
nodeResolve({ | ||
module: true, | ||
browser: true, | ||
preferBuiltins: false | ||
}), | ||
doCleanup(), | ||
es5Poly(), | ||
es5Check() | ||
] | ||
}; | ||
|
||
if (isProduction) { | ||
browserRollupConfig.output.file = `browser/${name}${extension ? "." +extension : ""}.min.js`; | ||
browserRollupConfig.plugins.push( | ||
uglify({ | ||
ie8: false, | ||
ie: true, | ||
compress: { | ||
ie: true, | ||
passes:3, | ||
unsafe: true, | ||
}, | ||
output: { | ||
ie: true, | ||
preamble: banner, | ||
webkit:true | ||
} | ||
}) | ||
); | ||
} | ||
|
||
return browserRollupConfig; | ||
}; | ||
|
||
updateDistEsmFiles(replaceValues, banner); | ||
|
||
export default [ | ||
browserRollupConfigFactory(workerName, false, "iife", "gbl"), | ||
browserRollupConfigFactory(workerModule, false, "esm"), | ||
browserRollupConfigFactory(worker2Module, false, "esm") | ||
]; |
Oops, something went wrong.