@snokam/application-insights 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.2](https://github.com/snokam/components/compare/%40snokam%2Fapplication-insights%401.3.1...%40snokam%2Fapplication-insights%401.3.2) (2026-11-10)
+
+### Bug Fixes
+
+- error pipeline noise filters, burst alerts, telemetry roles and per-activity fan-out logs ([#3496](https://github.com/snokam/components/issues/3496)) ([e41e941](https://github.com/snokam/components/commit/e41e9415a899f075585923989c87b2ea4f27f273))
+
+## [1.3.1](https://github.com/snokam/components/compare/%40snokam%2Fapplication-insights%401.3.0...%40snokam%2Fapplication-insights%401.3.1) (2026-11-09)
+
+### Bug Fixes
+
+- **deps:** close all open npm Dependabot alerts and bump deps within major ([#3364](https://github.com/snokam/components/issues/3364)) ([1372dbb](https://github.com/snokam/components/commit/1372dbbed19d6d6c93c357f3543f4c8db01bfb43))
+- **observability:** always record 5xx and exceptions, report web server errors to App Insights ([#3298](https://github.com/snokam/components/issues/3298)) ([246229d](https://github.com/snokam/components/commit/246229d4774378c591155a145e4b9b5f64e0e708))
+- **web:** never send the server token to an unknown host; dates in Europe/Oslo everywhere ([#3334](https://github.com/snokam/components/issues/3334)) ([a17581a](https://github.com/snokam/components/commit/a17581a457f91de68e646958509b490e39763b32)), closes [#3318](https://github.com/snokam/components/issues/3318) [#418](https://github.com/snokam/components/issues/418) [#3322](https://github.com/snokam/components/issues/3322) [#3328](https://github.com/snokam/components/issues/3328)
+
+### Performance Improvements
+
+- **web:** cache public pages per host and speed up every app (Lighthouse round 2) ([#3279](https://github.com/snokam/components/issues/3279)) ([4ab508b](https://github.com/snokam/components/commit/4ab508ba90289a5d1bd28e7b843f9069dae5cc44))
+- **web:** faster and more accessible public pages (Lighthouse) ([#3273](https://github.com/snokam/components/issues/3273)) ([0501fea](https://github.com/snokam/components/commit/0501feaeb803dec1c0a2993726a65f10a986f803)), closes [#1976d2](https://github.com/snokam/components/issues/1976d2) [#1565c0](https://github.com/snokam/components/issues/1565c0)
+- **web:** halve the JavaScript on the signed-in apps ([#3281](https://github.com/snokam/components/issues/3281)) ([c248da6](https://github.com/snokam/components/commit/c248da646f6a9b457278042890b92976b07a8d16))
+
 # 1.3.0 (2026-08-18)
 
 ### Bug Fixes

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@snokam/application-insights",
   "description": "Snøkam core components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "src/index.tsx",
+  "sideEffects": false,
   "types": "src/index.tsx",
   "files": [
     "src",
@@ -18,18 +19,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@microsoft/applicationinsights-react-js": "^19.4.1",
-    "@microsoft/applicationinsights-web": "^3.4.3",
+    "@microsoft/applicationinsights-react-js": "^19.4.2",
+    "@microsoft/applicationinsights-web": "^3.4.6",
     "history": "^5.3.0"
   },
   "peerDependencies": {
-    "next": "16.2.11",
-    "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "next": "16.4.5",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
   },
   "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
   },
   "exports": {
     ".": "./src/index.tsx",
@@ -38,6 +39,7 @@
     "./server": "./src/server.ts"
   },
   "scripts": {
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "node --test \"src/**/*.test.ts\""
   }
 }

package/src/Provider.tsx

@@ -11,10 +11,11 @@ import {
   IConfiguration,
   ITelemetryPlugin,
 } from "@microsoft/applicationinsights-web";
+import { withCloudRole } from "./telemetry/cloudRole";
 
 export interface ProviderProps {
   children: ReactNode;
-  config: IConfiguration & IConfig;
+  config: IConfiguration & IConfig & { cloudRole?: string };
 }
 
 export const Provider = ({ children, config }: ProviderProps) => {
@@ -28,6 +29,7 @@ export const Provider = ({ children, config }: ProviderProps) => {
 
   useEffect(() => {
     if (!appInsightsRef.current) {
+      const { cloudRole, ...sdkConfig } = config;
       appInsightsRef.current = new ApplicationInsights({
         config: {
           maxBatchSizeInBytes: 10000,
@@ -37,11 +39,12 @@ export const Provider = ({ children, config }: ProviderProps) => {
           extensionConfig: {
             [reactPluginRef.current.identifier]: { history: browserHistory },
           },
-          ...config,
+          ...sdkConfig,
         },
       });
 
       appInsightsRef.current.loadAppInsights();
+      appInsightsRef.current.addTelemetryInitializer(withCloudRole(cloudRole));
 
       appInsightsRef.current.addTelemetryInitializer((envelope) => {
         const baseType = envelope.baseType || "";

package/src/app-router.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useSearchParams } from "next/navigation";
-import { ReactNode, Suspense, useEffect, useRef } from "react";
+import { ReactNode, Suspense, useEffect, useRef, useState } from "react";
 import { createBrowserHistory } from "history";
 import {
   AppInsightsContext,
@@ -13,75 +13,79 @@ import {
   IConfiguration,
   ITelemetryPlugin,
 } from "@microsoft/applicationinsights-web";
+import { withCloudRole } from "./telemetry/cloudRole";
 
 export interface ProviderProps {
   children: ReactNode;
-  config: IConfiguration & IConfig;
+  config: IConfiguration & IConfig & { cloudRole?: string };
 }
 
-function AppRouterProvider({ children, config }: ProviderProps) {
-  return (
-    <Suspense fallback={<>{children}</>}>
-      <AppRouterProviderInner config={config}>
-        {children}
-      </AppRouterProviderInner>
-    </Suspense>
-  );
-}
-
-function AppRouterProviderInner({ children, config }: ProviderProps) {
+function PageViewTracker({
+  instance,
+}: {
+  instance: ApplicationInsights | null;
+}) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const reactPluginRef = useRef<ReactPlugin>(new ReactPlugin());
-  const appInsightsRef = useRef<ApplicationInsights | null>(null);
 
-  const isBrowser = typeof window !== "undefined";
-  const browserHistory = isBrowser ? createBrowserHistory() : undefined;
+  useEffect(() => {
+    if (!instance) return;
+    const url = pathname + (searchParams?.toString() ? `?${searchParams}` : "");
+    instance.trackPageView({ name: url });
+  }, [instance, pathname, searchParams]);
+
+  return null;
+}
+
+function AppRouterProvider({ children, config }: ProviderProps) {
+  const reactPluginRef = useRef<ReactPlugin>(new ReactPlugin());
+  const [instance, setInstance] = useState<ApplicationInsights | null>(null);
+  const started = useRef(false);
 
   useEffect(() => {
-    if (!appInsightsRef.current) {
-      appInsightsRef.current = new ApplicationInsights({
-        config: {
-          maxBatchSizeInBytes: 10000,
-          maxBatchInterval: 15000,
-          enableAutoRouteTracking: true,
-          extensions: [reactPluginRef.current as unknown as ITelemetryPlugin],
-          extensionConfig: {
-            [reactPluginRef.current.identifier]: { history: browserHistory },
-          },
-          ...config,
+    if (started.current) return;
+    started.current = true;
+    const browserHistory = createBrowserHistory();
+    const { cloudRole, ...sdkConfig } = config;
+    const appInsights = new ApplicationInsights({
+      config: {
+        maxBatchSizeInBytes: 10000,
+        maxBatchInterval: 15000,
+        enableAutoRouteTracking: true,
+        disablePageUnloadEvents: ["unload"],
+        extensions: [reactPluginRef.current as unknown as ITelemetryPlugin],
+        extensionConfig: {
+          [reactPluginRef.current.identifier]: { history: browserHistory },
         },
-      });
+        ...sdkConfig,
+      },
+    });
 
-      appInsightsRef.current.loadAppInsights();
+    appInsights.loadAppInsights();
+    appInsights.addTelemetryInitializer(withCloudRole(cloudRole));
 
-      appInsightsRef.current.addTelemetryInitializer((envelope) => {
-        const baseType = envelope.baseType || "";
-        const telemetryItem = envelope.baseData || {};
-        const target = telemetryItem.target || "";
-        const isDependencyData = baseType === "RemoteDependencyData";
+    appInsights.addTelemetryInitializer((envelope) => {
+      const baseType = envelope.baseType || "";
+      const telemetryItem = envelope.baseData || {};
+      const target = telemetryItem.target || "";
+      const isDependencyData = baseType === "RemoteDependencyData";
 
-        const isVideo =
-          target.includes("mux.com") || target.includes("litix.io");
+      const isVideo = target.includes("mux.com") || target.includes("litix.io");
 
-        if (isDependencyData && isVideo) {
-          return false;
-        }
-      });
-    }
-  }, [config, browserHistory]);
+      if (isDependencyData && isVideo) {
+        return false;
+      }
+    });
 
-  useEffect(() => {
-    if (appInsightsRef.current) {
-      const url =
-        pathname + (searchParams?.toString() ? `?${searchParams}` : "");
-      appInsightsRef.current.trackPageView({ name: url });
-    }
-  }, [pathname, searchParams]);
+    setInstance(appInsights);
+  }, [config]);
 
   return (
     <AppInsightsContext.Provider value={reactPluginRef.current}>
       {children}
+      <Suspense fallback={null}>
+        <PageViewTracker instance={instance} />
+      </Suspense>
     </AppInsightsContext.Provider>
   );
 }

package/src/server.ts

@@ -1,3 +1,11 @@
+import { parseConnectionString } from "./telemetry/connectionString";
+import {
+  exceptionEnvelope,
+  type RequestLocation,
+  type ServerError,
+} from "./telemetry/exceptionEnvelope";
+import { operationIdFrom } from "./telemetry/operationId";
+
 type ErrorRequest = {
   path?: string;
   method?: string;
@@ -12,22 +20,55 @@ type ErrorContext = {
   revalidateReason?: string;
 };
 
-export function onRequestError(
+async function trackException(serverError: ServerError) {
+  const ingestion = parseConnectionString(
+    process.env.APPLICATIONINSIGHTS_CONNECTION_STRING
+  );
+  const site = process.env.WEBSITE_SITE_NAME;
+  if (!ingestion || !site) return;
+
+  const envelope = exceptionEnvelope(
+    ingestion.instrumentationKey,
+    serverError,
+    { name: site, instance: process.env.HOSTNAME },
+    new Date()
+  );
+  try {
+    const response = await fetch(ingestion.trackUrl, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify([envelope]),
+    });
+    if (!response.ok)
+      console.error("[server-error] telemetry rejected", response.status);
+  } catch (failure) {
+    console.error("[server-error] telemetry unreachable", failure);
+  }
+}
+
+export async function onRequestError(
   error: unknown,
   request: ErrorRequest,
   context: ErrorContext
 ) {
-  const host =
-    request.headers?.["x-forwarded-host"] ?? request.headers?.["host"];
-  const detail = {
-    host,
+  const location: RequestLocation = {
+    host: request.headers?.["x-forwarded-host"] ?? request.headers?.["host"],
     method: request.method,
     path: request.path,
     routePath: context.routePath,
     routeType: context.routeType,
     renderSource: context.renderSource,
-    message: error instanceof Error ? error.message : String(error),
-    stack: error instanceof Error ? error.stack : undefined,
+    operationId: operationIdFrom(request.headers?.["traceparent"], () =>
+      crypto.randomUUID().replaceAll("-", "")
+    ),
   };
-  console.error("[server-error]", JSON.stringify(detail));
+  console.error(
+    "[server-error]",
+    JSON.stringify({
+      ...location,
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+    })
+  );
+  await trackException({ error, location });
 }

package/src/telemetry/cloudRole.ts

@@ -0,0 +1,8 @@
+import type { ITelemetryItem } from "@microsoft/applicationinsights-web";
+
+export function withCloudRole(cloudRole: string | undefined) {
+  return (envelope: ITelemetryItem) => {
+    if (!cloudRole) return;
+    envelope.tags = { ...envelope.tags, "ai.cloud.role": cloudRole };
+  };
+}

package/src/telemetry/connectionString.ts

@@ -0,0 +1,33 @@
+export type Ingestion = {
+  instrumentationKey: string;
+  trackUrl: string;
+};
+
+const TRACK_PATH = "v2.1/track";
+
+function settings(connectionString: string) {
+  const entries = connectionString.split(";").map((part): [string, string] => {
+    const separator = part.indexOf("=");
+    return [
+      part.slice(0, separator).trim().toLowerCase(),
+      part.slice(separator + 1).trim(),
+    ];
+  });
+  return new Map(entries.filter(([key]) => key.length > 0));
+}
+
+export function parseConnectionString(
+  connectionString: string | undefined
+): Ingestion | undefined {
+  if (!connectionString) return undefined;
+
+  const values = settings(connectionString);
+  const instrumentationKey = values.get("instrumentationkey");
+  const endpoint = values.get("ingestionendpoint");
+  if (!instrumentationKey || !endpoint) return undefined;
+
+  return {
+    instrumentationKey,
+    trackUrl: new URL(TRACK_PATH, endpoint).toString(),
+  };
+}

package/src/telemetry/exceptionEnvelope.ts

@@ -0,0 +1,110 @@
+export type RequestLocation = {
+  host?: string;
+  method?: string;
+  path?: string;
+  routePath?: string;
+  routeType?: string;
+  renderSource?: string;
+  operationId?: string;
+};
+
+export type ServerError = {
+  error: unknown;
+  location: RequestLocation;
+};
+
+export type Role = {
+  name?: string;
+  instance?: string;
+};
+
+const ERROR_SEVERITY = 3;
+
+type ClientFailure = Error & {
+  digest?: string;
+  response?: { status?: number; url?: string };
+  cause?: unknown;
+};
+
+function withoutQuery(url: string | undefined) {
+  if (!url) return undefined;
+  try {
+    const parsed = new URL(url);
+    return `${parsed.origin}${parsed.pathname}`;
+  } catch {
+    return undefined;
+  }
+}
+
+function causeOf(cause: unknown) {
+  if (cause instanceof Error) return `${cause.name}: ${cause.message}`;
+  return cause === undefined ? undefined : String(cause);
+}
+
+function failedCall(error: ClientFailure) {
+  return {
+    status: error.response?.status?.toString(),
+    url: withoutQuery(error.response?.url),
+    cause: causeOf(error.cause),
+  };
+}
+
+function describe(error: unknown) {
+  if (error instanceof Error) {
+    const failure = error as ClientFailure;
+    return {
+      typeName: error.name,
+      message: error.message,
+      stack: error.stack,
+      details: { digest: failure.digest, ...failedCall(failure) },
+    };
+  }
+  return { typeName: "Error", message: String(error), details: {} };
+}
+
+function definedOnly(values: Record<string, string | undefined>) {
+  return Object.fromEntries(
+    Object.entries(values).filter(([, value]) => value !== undefined)
+  );
+}
+
+export function exceptionEnvelope(
+  instrumentationKey: string,
+  serverError: ServerError,
+  role: Role,
+  time: Date
+) {
+  const { typeName, message, stack, details } = describe(serverError.error);
+  const { location } = serverError;
+  const route = location.routePath ?? location.path;
+  const operationName = [location.method, route].filter(Boolean).join(" ");
+
+  return {
+    name: "Microsoft.ApplicationInsights.Exception",
+    time: time.toISOString(),
+    iKey: instrumentationKey,
+    tags: definedOnly({
+      "ai.cloud.role": role.name,
+      "ai.cloud.roleInstance": role.instance,
+      "ai.operation.name": operationName || undefined,
+      "ai.operation.id": location.operationId,
+    }),
+    data: {
+      baseType: "ExceptionData",
+      baseData: {
+        ver: 2,
+        severityLevel: ERROR_SEVERITY,
+        problemId: `${typeName} at ${route ?? "unknown route"}`,
+        exceptions: [
+          {
+            typeName,
+            message,
+            hasFullStack: stack !== undefined,
+            stack,
+          },
+        ],
+        properties: definedOnly({ ...location, ...details }),
+      },
+    },
+  };
+}

package/src/telemetry/operationId.ts

@@ -0,0 +1,10 @@
+const TRACEPARENT = /^[\da-f]{2}-([\da-f]{32})-[\da-f]{16}-[\da-f]{2}$/;
+const INVALID_TRACE_ID = "0".repeat(32);
+
+export function operationIdFrom(
+  traceparent: string | undefined,
+  newId: () => string
+) {
+  const traceId = traceparent?.match(TRACEPARENT)?.[1];
+  return traceId && traceId !== INVALID_TRACE_ID ? traceId : newId();
+}

package/src/telemetry/telemetry.test.ts

@@ -0,0 +1,163 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { parseConnectionString } from "./connectionString.ts";
+import { exceptionEnvelope } from "./exceptionEnvelope.ts";
+import { operationIdFrom } from "./operationId.ts";
+import { withCloudRole } from "./cloudRole.ts";
+
+const connectionString =
+  "InstrumentationKey=7e4c6e13-0000-0000-0000-000000000000;IngestionEndpoint=https://norwayeast-0.in.applicationinsights.azure.com/;LiveEndpoint=https://norwayeast.livediagnostics.monitor.azure.com/;ApplicationId=abc";
+
+test("the connection string gives the key and the track url", () => {
+  assert.deepEqual(parseConnectionString(connectionString), {
+    instrumentationKey: "7e4c6e13-0000-0000-0000-000000000000",
+    trackUrl:
+      "https://norwayeast-0.in.applicationinsights.azure.com/v2.1/track",
+  });
+});
+
+test("nothing is sent without a usable connection string", () => {
+  assert.equal(parseConnectionString(undefined), undefined);
+  assert.equal(parseConnectionString(""), undefined);
+  assert.equal(parseConnectionString("InstrumentationKey=abc"), undefined);
+});
+
+test("a render crash becomes an error-level exception for the site", () => {
+  const envelope = exceptionEnvelope(
+    "key",
+    {
+      error: new ReferenceError("localStorage is not defined"),
+      location: {
+        host: "snokam.test.snosky.no",
+        method: "GET",
+        path: "/skjer/julebord",
+        routePath: "/[host]/skjer/[slug]",
+        routeType: "render",
+        operationId: "4bf92f3577b34da6a3ce929d0e0e4736",
+      },
+    },
+    { name: "app-plfm-web-t", instance: "web-1" },
+    new Date("2026-11-08T10:00:00Z")
+  );
+
+  assert.equal(envelope.name, "Microsoft.ApplicationInsights.Exception");
+  assert.equal(envelope.iKey, "key");
+  assert.equal(envelope.time, "2026-11-08T10:00:00.000Z");
+  assert.equal(envelope.tags["ai.cloud.role"], "app-plfm-web-t");
+  assert.equal(envelope.tags["ai.operation.name"], "GET /[host]/skjer/[slug]");
+  assert.equal(
+    envelope.tags["ai.operation.id"],
+    "4bf92f3577b34da6a3ce929d0e0e4736"
+  );
+  const data = envelope.data.baseData;
+  assert.equal(data.severityLevel, 3);
+  assert.equal(data.problemId, "ReferenceError at /[host]/skjer/[slug]");
+  assert.equal(data.exceptions[0].typeName, "ReferenceError");
+  assert.equal(data.exceptions[0].message, "localStorage is not defined");
+  assert.equal(data.exceptions[0].hasFullStack, true);
+  assert.equal(data.properties.path, "/skjer/julebord");
+  assert.equal(data.properties.routePath, "/[host]/skjer/[slug]");
+});
+
+test("a thrown value that is not an Error is still reported", () => {
+  const envelope = exceptionEnvelope(
+    "key",
+    { error: "boom", location: { path: "/blogg/ny" } },
+    {},
+    new Date("2026-11-08T10:00:00Z")
+  );
+
+  const data = envelope.data.baseData;
+  assert.equal(data.exceptions[0].message, "boom");
+  assert.equal(data.exceptions[0].hasFullStack, false);
+  assert.equal(data.problemId, "Error at /blogg/ny");
+  assert.equal("ai.cloud.role" in envelope.tags, false);
+});
+
+test("a failed api call names the status and endpoint without its query", () => {
+  const failure = Object.assign(new Error("Response returned an error code"), {
+    name: "ResponseError",
+    response: {
+      status: 404,
+      url: "https://n8n.snosky.no/api/blog/v1.0/projects?email=a%40b.no",
+    },
+  });
+  const envelope = exceptionEnvelope(
+    "key",
+    { error: failure, location: { path: "/sider/sitemap.xml" } },
+    {},
+    new Date("2026-11-08T10:00:00Z")
+  );
+
+  const { properties } = envelope.data.baseData;
+  assert.equal(properties.status, "404");
+  assert.equal(properties.url, "https://n8n.snosky.no/api/blog/v1.0/projects");
+  assert.equal("cause" in properties, false);
+});
+
+test("a request that never got a response names its cause", () => {
+  const failure = Object.assign(new Error("The request failed"), {
+    name: "FetchError",
+    cause: new DOMException(
+      "The operation was aborted due to timeout",
+      "TimeoutError"
+    ),
+  });
+  const envelope = exceptionEnvelope(
+    "key",
+    { error: failure, location: { path: "/" } },
+    {},
+    new Date("2026-11-08T10:00:00Z")
+  );
+
+  assert.equal(
+    envelope.data.baseData.properties.cause,
+    "TimeoutError: The operation was aborted due to timeout"
+  );
+});
+
+test("a server error joins the trace of the request that caused it", () => {
+  const id = operationIdFrom(
+    "00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
+    () => "fresh"
+  );
+
+  assert.equal(id, "4bf92f3577b34da6a3ce929d0e0e4736");
+});
+
+test("a server error without a usable trace gets its own operation id", () => {
+  assert.equal(
+    operationIdFrom(undefined, () => "fresh"),
+    "fresh"
+  );
+  assert.equal(
+    operationIdFrom("garbage", () => "fresh"),
+    "fresh"
+  );
+  assert.equal(
+    operationIdFrom(
+      "00-00000000000000000000000000000000-00f067aa0ba902b7-01",
+      () => "fresh"
+    ),
+    "fresh"
+  );
+});
+
+test("browser telemetry carries the configured role", () => {
+  const envelope = { name: "PageView", tags: { "ai.session.id": "s" } };
+
+  withCloudRole("web-browser")(envelope);
+
+  assert.deepEqual(envelope.tags, {
+    "ai.session.id": "s",
+    "ai.cloud.role": "web-browser",
+  });
+});
+
+test("browser telemetry is left alone without a role", () => {
+  const envelope = { name: "PageView", tags: {} };
+
+  withCloudRole(undefined)(envelope);
+
+  assert.deepEqual(envelope.tags, {});
+});