Add grafana session metadata

.editorconfig

@@ -6,4 +6,4 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
-indent_size = 2
+indent_size = 4

packages/client/src/faro.ts

@@ -0,0 +1,14 @@
+/**
+ * This adds information about decorator parameters to the Grafana faro. To aid with debugging.
+ * */
+export function addFaroMetaData() {
+    if (!window.faro) return;
+
+    window.faro.api.setSession({
+        attributes: {
+            ...window.__DECORATOR_DATA__.env,
+        },
+    });
+
+    console.log('Faro: Adding metadata');
+}

packages/client/src/main.ts

@@ -25,14 +25,13 @@ import './views/screensharing-modal';
 import './views/search-input';
 import './views/search-menu';
 import { Auth } from './api';
-import { c } from 'vitest/dist/reporters-5f784f42';
+import { addFaroMetaData } from './faro';
 
 import.meta.glob('./styles/*.css', { eager: true });
 
 // Just for testing
 const CONTEXTS = ['privatperson', 'arbeidsgiver', 'samarbeidspartner'] as const;
 
-
 const updateDecoratorParams = (params: Partial<Params>) => {
     window.__DECORATOR_DATA__.params = {
         ...window.__DECORATOR_DATA__.params,
@@ -61,7 +60,6 @@ if (window.__DECORATOR_DATA__.params.logoutWarning) {
 window.addEventListener('message', (e) => {
     if (e.data.source === 'decoratorClient' && e.data.event === 'ready') {
         window.postMessage({ source: 'decorator', event: 'ready' });
-
     }
     if (e.data.source === 'decoratorClient' && e.data.event == 'params') {
         ['breadcrumbs', 'availableLanguages', 'utilsBackground'].forEach((key) => {
@@ -165,11 +163,5 @@ window.addEventListener('load', () => {
     useLoadIfActiveSession({
         userState: Cookies.get('psCurrentState'),
     });
-if (window.faro) {
-  console.log('Faro is available');
-  console.log(window.faro)
-} else {
-  console.log('Faro is not available');
-}
+    addFaroMetaData();
 });
-

packages/server/src/views/index.ts

@@ -41,10 +41,18 @@ type AssetFormatter = (src: string) => string;
 const script: AssetFormatter = (src) =>
   `<script type="module" src="${src}"></script>`;
 
+const asyncScript: AssetFormatter = (src) =>
+  `<script fetchpriotiy='low' async type="module" src="${src}"></script>`;
+
+const asyncScriptInline: AssetFormatter = (src) =>
+  `<script fetchpriotiy='low' async type="module">${src}</script>`;
+
 const partytownScript: AssetFormatter = (src) =>
   `<script type="text/partytown" src="${src}"></script>`;
+
 const partytownInlineScript: AssetFormatter = (code) =>
   `<script type="text/partytown">${code}</script>`;
+
 const cssLink: AssetFormatter = (src) =>
   `<link type="text/css" rel="stylesheet" href="${src}"></link>`;
 
@@ -66,11 +74,11 @@ const getEnvAssets = async () => {
   const scripts: EnvAssets = {
     production: [
       script(cdnUrl(manifest[entryPointPath].file)),
-      partytownScript(
+      asyncScript(
         hostUrl(`/public/${manifest[entryPointPathAnalytics].file}`),
       ),
-      partytownScript(vendorScripts.taskAnalytics),
-      [inlineVendorScripts.hotjar].map(partytownInlineScript).join(''),
+      asyncScript(vendorScripts.taskAnalytics),
+      [inlineVendorScripts.hotjar].map(asyncScriptInline).join(''),
     ].join(''),
     development: [
       [
@@ -83,7 +91,7 @@ const getEnvAssets = async () => {
         vendorScripts.taskAnalytics,
         hostUrl(`/public/${manifest[entryPointPathAnalytics].file}`),
       ]
-        .map(partytownScript)
+        .map(asyncScript)
         .join(''),
       [inlineVendorScripts.hotjar].map(partytownInlineScript).join(''),
     ].join(''),
@@ -201,7 +209,6 @@ export function Index({
         <div id="footer-withmenu">${footer}</div>
         ${lens}
         <div id="scripts" style="display:none">
-          ${Partytown()}
           ${unsafeHtml(scripts)}${decoratorData}
           <script>
             window.__DECORATOR_DATA__ = JSON.parse(