[main][snippet] prepare new snippet release, add support for more con…

…fig (#2365)
microsoft · Jun 21, 2024 · 977fcd5 · 977fcd5
1 parent 8d3e3e2
commit 977fcd5
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 155 deletions.
diff --git a/README.md b/README.md
@@ -76,7 +76,7 @@ appInsights.trackPageView(); // Manually call trackPageView to establish the cur
 
 If your app does not use NPM, you can directly instrument your webpages with Application Insights by pasting this snippet at the top of each your pages. Preferably, it should be the first script in your `<head>` section so that it can monitor any potential issues with all of your dependencies.
 
-The current version of the snippet is version 7, the version is identified by the "sv:" in the script.
+The current version of the snippet is version 8, the version is identified by the "sv:" in the script.
 
 ```html
 <script type="text/javascript">

diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
diff --git a/examples/shared-worker/package.json b/examples/shared-worker/package.json
@@ -64,7 +64,7 @@
         "@microsoft/applicationinsights-shims": "3.0.1",
         "@microsoft/dynamicproto-js": "^2.0.3",
         "@microsoft/applicationinsights-web": "3.2.2",
-        "@microsoft/applicationinsights-web-snippet": "1.2.2",
+        "@microsoft/applicationinsights-web-snippet": "1.2.0",
         "@microsoft/applicationinsights-core-js": "3.2.2",
         "@nevware21/ts-utils": ">= 0.11.1 < 2.x"
     }

diff --git a/gruntfile.js b/gruntfile.js
@@ -27,7 +27,7 @@ module.exports = function (grunt) {
 
     }
 
-    function generateNewSnippet(connString) {
+    function generateNewSnippet(prefix) {
         var srcPath = "./tools/applicationinsights-web-snippet/dist-es5";
         return {
             files: [{
@@ -38,21 +38,16 @@ module.exports = function (grunt) {
             }],
             options: {
                 replacements: function() {
-                    var prefix = "IKey";
                     var snippetBuffer = grunt.file.read("./tools/applicationinsights-web-snippet/build/output/snippet.min.js");
-                    if (connString) {
+                    if (prefix === "ConnString") {
                         snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"YOUR_CONNECTION_STRING\"");
-                        snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"YOUR_CONNECTION_STRING\"");
-                        prefix = "ConnString";
-                    } else {
-                        snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\"");
+                    } else if (prefix === "IKey") {
                         snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\"");
-                        let snippetBuffer2 = "cfg:{connectionString:\"YOUR_CONNECTION_STRING\"";
-                        console.log("what is it doing", snippetBuffer2.replace(/^\s*connectionString:\s*\".*\"/gm, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\""));
+                    } else if (prefix === "Origin") {
+                        snippetBuffer = grunt.file.read("./tools/applicationinsights-web-snippet/build/output/originSnippet.min.js");
                     }
                     var snippetStr = _encodeStr(snippetBuffer.toString());
                     var expectedStr = `##replace${prefix}Snippet##`;
-                    console.log("change expectedStr to " + expectedStr);
                     return [{
                         pattern: expectedStr,
                         replacement: snippetStr
@@ -779,10 +774,16 @@ module.exports = function (grunt) {
             'string-replace': {
                 'generate-expanded-JS': expandJS(),
                 'generate-expanded-min': expandMin(),
-                'generate-snippet-ikey': generateNewSnippet(false),
-                'generate-snippet-connString': generateNewSnippet(true)
+                'generate-snippet-ikey': generateNewSnippet("IKey"),
+                'generate-snippet-connString': generateNewSnippet("ConnString"),
+                'generate-snippet-origin': generateNewSnippet("Origin")
             },
             copy: {
+                "originSnippet": {
+                    files: [
+                        { src: "./tools/applicationinsights-web-snippet/build/output/snippet.min.js", dest: `./tools/applicationinsights-web-snippet/build/output/originSnippet.min.js` }
+                       ]
+                },
                 "snippet": {
                     files: [
                         { src: "./tools/applicationinsights-web-snippet/build/output/snippet.js", dest: `./tools/applicationinsights-web-snippet/dist-es5/snippet.js` },
@@ -917,7 +918,8 @@ module.exports = function (grunt) {
 
         grunt.registerTask("websnippet", tsBuildActions("applicationinsights-web-snippet"));
         grunt.registerTask("snippetCopy", ["copy:snippet"]);
-        grunt.registerTask("websnippetReplace", ["string-replace:generate-expanded-JS", "copy:web-snippet", "string-replace:generate-expanded-min", "string-replace:generate-snippet-ikey", "string-replace:generate-snippet-connString"]);
+        grunt.registerTask("originSnippetCopy", ["copy:originSnippet"]);
+        grunt.registerTask("websnippetReplace", ["string-replace:generate-expanded-JS", "copy:web-snippet", "string-replace:generate-expanded-min", "string-replace:generate-snippet-ikey", "string-replace:generate-snippet-connString", "string-replace:generate-snippet-origin"]);
 
         grunt.registerTask("snippet-restore", restoreTasks("applicationinsights-web-snippet"));
         grunt.registerTask("websnippettests", tsTestActions("applicationinsights-web-snippet"));

diff --git a/tools/applicationinsights-web-snippet/README.md b/tools/applicationinsights-web-snippet/README.md
@@ -21,14 +21,27 @@ Import the helper function from the package to easily get the snippet
 import { getSdkLoaderScript } from "@microsoft/applicationinsights-web-snippet";
 ```
 
-Configure the snippet with your connectionString.
+Configure the snippet with your connectionString or other customerized field:
 ```
-let config = {connectionString: "InstrumentationKey=xxx"}; 
-// or let config = {instrumentationKey: key};
+let config = {connectionString: "InstrumentationKey=xxx", name: "myAppInsights"}; 
+// or let config = {instrumentationKey: key, sri: true};
 let theSnippet = getSdkLoaderScript(config);
 ```
 
+### Multiple Snippet Run Simutinously (available since v1.2.0)
+Configure two snippets with different name.
+```
+let firstConfig = {connectionString: "InstrumentationKey=xxx", name: "firstAppInsights"}; 
+let firstSnippet = getSdkLoaderScript(firstConfig);
+let secondConfig = {connectionString: "InstrumentationKey=xxx", name: "secondAppInsights"}; 
+let secondSnippet = getSdkLoaderScript(secondConfig);
+```
 
+### Snippet Run With Integrity Check and Minified Loading Time (available since v1.2.0)
+Configure the snippet with sri enabled.
+```
+let config = {connectionString: "InstrumentationKey=xxx", sri: true};
+```
 
 More details on web snippet, see [Web Snippet](https://github.com/microsoft/ApplicationInsights-JS#snippet-setup-ignore-if-using-npm-setup).
 

diff --git a/tools/applicationinsights-web-snippet/package.json b/tools/applicationinsights-web-snippet/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/applicationinsights-web-snippet",
-    "version": "1.2.2",
+    "version": "1.2.0",
     "description": "Microsoft Application Insights Web Snippet",
     "main": "dist/es5/node/applicationinsights-web-snippet.js",
     "module": "dist-es5/applicationinsights-web-snippet.js",
@@ -15,8 +15,9 @@
         "build": "npm run build:esm && npm run snippet-generate && npm run build:browser && npm run dtsgen",
         "build:esm": "grunt websnippet ",
         "dtsgen": "api-extractor run --local && node ../../scripts/dtsgen.js \"Microsoft Application Insights Web Snippet\"",
-        "snippet-generate": "npm run build:snippet && npm run replace && npm run snippetCopy",
+        "snippet-generate": "npm run build:snippet && npm run originSnippetCopy && npm run replace && npm run snippetCopy",
         "snippetCopy": "grunt snippetCopy",
+        "originSnippetCopy": "grunt originSnippetCopy",
         "build:snippet": "rollup -c rollupSnippet.config.js --bundleConfigAsCjs",
         "replace": "grunt websnippetReplace",
         "build:browser": "rollup -c rollup.config.js --bundleConfigAsCjs",

diff --git a/tools/applicationinsights-web-snippet/src/applicationinsights-web-snippet.ts b/tools/applicationinsights-web-snippet/src/applicationinsights-web-snippet.ts
@@ -1,5 +1,6 @@
-import { SdkLoaderConfig } from "./type";
+import { ISnippetConfig, SdkLoaderConfig } from "./type";
 
+const originSnippet = "##replaceOriginSnippet##";
 const webSnippet = "##replaceIKeySnippet##";
 const webSnippetCs = "##replaceConnStringSnippet##";
 
@@ -13,13 +14,27 @@ function webSnippetVersion() {
 }
 
 function getSdkLoaderScript(config: SdkLoaderConfig) {
-    let snippet: string = webSnippetCs;
-    if (config && config.connectionString) {
-        snippet = webSnippetCs.replace("YOUR_CONNECTION_STRING", config.connectionString);
-    } else if (config && config.instrumentationKey) {
-        snippet = webSnippet.replace("InstrumentationKey=INSTRUMENTATION_KEY", config.instrumentationKey);
+    let snippetConfig: ISnippetConfig = {
+        src: config.src? config.src : "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
+        crossOrigin: config.crossOrigin ? config.crossOrigin : "anonymous",
+        cfg: {},
+        name: config.name ? config.name : "appInsights",
+        ld: config.ld,
+        useXhr: config.useXhr,
+        cr: config.cr,
+        dle: config.dle,
+        sri: config.sri
+    };
+
+    if (config.instrumentationKey) {
+        snippetConfig.cfg.instrumentationKey = config.instrumentationKey;
+    } else if (config.connectionString) {
+        snippetConfig.cfg.connectionString = config.connectionString;
     }
-    return snippet;
+
+    let configString = JSON.stringify(snippetConfig);
+    let userSnippet = `!(function (cfg){${originSnippet}})(\n${configString}\n);`;
+    return userSnippet;
 }
 
 

diff --git a/tools/applicationinsights-web-snippet/src/type.ts b/tools/applicationinsights-web-snippet/src/type.ts
@@ -1,9 +1,17 @@
 import { IConfiguration } from "@microsoft/applicationinsights-web";
 
-// in the future, we can add more fields here
 export interface SdkLoaderConfig {
     instrumentationKey?: string;
     connectionString?: string;
+    src?: string;
+    name?: string;
+    ld?: number;
+    useXhr?: boolean;
+    crossOrigin?: string;
+    cfg?: IConfiguration;
+    cr?: boolean;
+    dle?: boolean;
+    sri?: boolean;
 }
 
 export interface ISnippetConfig {

diff --git a/version.json b/version.json
@@ -102,7 +102,7 @@
         },
         "@microsoft/applicationinsights-web-snippet": {
             "package": "tools/applicationinsights-web-snippet/package.json",
-            "release": "1.2.2"
+            "release": "1.2.0"
         }
     }
 }