@trackunit/react-core-contexts 1.30.5 → 1.30.8

package/index.cjs.js

@@ -2,13 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var client = require('@apollo/client');
+var reactCoreHooks = require('@trackunit/react-core-hooks');
+var react = require('react');
 var context = require('@apollo/client/link/context');
 var removeTypename = require('@apollo/client/link/remove-typename');
 var utilities = require('@apollo/client/utilities');
-var reactCoreHooks = require('@trackunit/react-core-hooks');
 var graphql = require('graphql');
 var graphqlSse = require('graphql-sse');
-var react = require('react');
 var error = require('@apollo/client/link/error');
 var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
@@ -19,7 +19,7 @@ var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
 /**
  * This error link is used to capture error information, i. e. traceId, graphQL errors, network errors, etc.
  */
-const createErrorLink = ({ errorHandler, token, }) => {
+const createErrorLink = ({ errorHandler, getToken, }) => {
     return error.onError(({ graphQLErrors, networkError, operation, forward }) => {
         if (networkError) {
             // We skip the error logging if the error is an AbortError
@@ -67,7 +67,7 @@ const createErrorLink = ({ errorHandler, token, }) => {
                     x.message.includes("Invalid token specified") ||
                     x.message.includes("Access denied! You need to be authorized to perform this action!"));
             });
-            if (invalidToken && token) {
+            if (invalidToken && getToken()) {
                 errorHandler.captureException(new Error(JSON.stringify({
                     category: "GraphQL",
                     info: "GraphQL Error - invalidToken",
@@ -103,6 +103,76 @@ const createErrorLink = ({ errorHandler, token, }) => {
     });
 };
 
+/**
+ * Wraps an SSE subscription link and provides the same error monitoring as the
+ * HTTP error link — capturing GraphQL errors, traceIds, FORCE_RELOAD_BROWSER,
+ * and UNAUTHENTICATED codes — for long-lived subscription Observables.
+ */
+const createSubscriptionErrorLink = ({ errorHandler, getToken, }) => {
+    return new client.ApolloLink((operation, forward) => {
+        return new client.Observable(observer => {
+            const subscription = forward(operation).subscribe({
+                next: response => {
+                    const { errors } = response;
+                    if (errors) {
+                        const code = errors[0]?.extensions?.code;
+                        if (code === "FORCE_RELOAD_BROWSER") {
+                            window.location.reload();
+                        }
+                        const traceIds = [];
+                        errors.forEach(error => {
+                            if ("extensions" in error && error.extensions && typeof error.extensions.traceId === "string") {
+                                traceIds.push(error.extensions.traceId);
+                            }
+                        });
+                        if (traceIds.length) {
+                            errorHandler.setTag("traceIds", traceIds.join(", "));
+                        }
+                        errorHandler.addBreadcrumb({
+                            category: "GraphQL",
+                            message: "GraphQL Subscription Error",
+                            level: "error",
+                            data: { log: JSON.stringify(errors) },
+                        });
+                        const invalidToken = errors.some(x => x.extensions?.code === "UNAUTHENTICATED" ||
+                            x.message.includes("Invalid token specified") ||
+                            x.message.includes("Access denied! You need to be authorized to perform this action!"));
+                        if (invalidToken && getToken()) {
+                            errorHandler.captureException(new Error(JSON.stringify({
+                                category: "GraphQL",
+                                info: "GraphQL Subscription Error - invalidToken",
+                                level: "warning",
+                                data: { log: JSON.stringify(errors) },
+                            })), { level: "warning", fingerprint: ["GraphQL Subscription Error - invalidToken"] });
+                        }
+                    }
+                    observer.next(response);
+                },
+                error: err => {
+                    // AbortError is expected when a subscription is cancelled (component
+                    // unmount or navigation) — graphql-sse calls control.abort() which
+                    // fires this error asynchronously. Swallow it to prevent an
+                    // unhandled rejection, mirroring the guard in createErrorLink.
+                    if (err instanceof Error && err.name === "AbortError") {
+                        return;
+                    }
+                    // eslint-disable-next-line no-console
+                    console.error(err);
+                    errorHandler.addBreadcrumb({
+                        category: "GraphQL",
+                        message: "GraphQL Subscription Network Error",
+                        level: "error",
+                        data: { log: String(err) },
+                    });
+                    observer.error(err);
+                },
+                complete: () => observer.complete(),
+            });
+            return () => subscription.unsubscribe();
+        });
+    });
+};
+
 // Use a widened `string` key so TypeScript picks the `unknown` overload of
 // `Reflect.get` instead of the typed one — otherwise reads like `module`
 // resolve to `NodeModule` from @types/node.
@@ -170,11 +240,12 @@ const isInternalGqlContext = () => {
     return Reflect.get(globalThis, "gql") === "internal";
 };
 
-const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, isDev, tracingHeaders, firstToken, errorHandler, }) => {
-    let token;
-    if (!token) {
-        token = firstToken;
-    }
+/**
+ * @internal
+ */
+const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, isDev, tracingHeaders: initialTracingHeaders, firstToken, errorHandler, }) => {
+    let token = firstToken;
+    let tracingHeaders = initialTracingHeaders;
     const publicGraphQLLink = client.createHttpLink({
         uri: request => graphqlPublicUrl + "/" + request.operationName,
     });
@@ -184,7 +255,7 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
     const reportGraphQLLink = client.createHttpLink({
         uri: request => graphqlReportUrl + "/" + request.operationName,
     });
-    const authLink = context.setContext(async (_, { headers: existingHeaders }) => {
+    const authLink = context.setContext((_, { headers: existingHeaders }) => {
         return {
             headers: {
                 ...existingHeaders,
@@ -192,7 +263,7 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
             },
         };
     });
-    const errorLink = createErrorLink({ errorHandler, token });
+    const errorLink = createErrorLink({ errorHandler, getToken: () => token });
     const defaultOptions = {
         watchQuery: {
             fetchPolicy: "no-cache",
@@ -209,10 +280,12 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
     };
     const removeTypenameLink = removeTypename.removeTypenameFromVariables();
     class SSELink extends client.ApolloLink {
+        /** @inheritdoc */
         constructor(options) {
             super();
             this.client = graphqlSse.createClient(options);
         }
+        /** @inheritdoc */
         request(operation) {
             return new utilities.Observable(sink => {
                 return this.client.subscribe({ ...operation, query: graphql.print(operation.query) }, {
@@ -228,12 +301,13 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
         headers: () => generateHeaders(token, tracingHeaders),
     });
     // Split links based on operation type
+    const subscriptionErrorLink = createSubscriptionErrorLink({ errorHandler, getToken: () => token });
     const splitLink = client.from([
         authLink,
         client.split(({ query }) => {
             const definition = utilities.getMainDefinition(query);
             return definition.kind === "OperationDefinition" && definition.operation === "subscription";
-        }, sseLink, client.from([
+        }, client.from([subscriptionErrorLink, sseLink]), client.from([
             errorLink,
             removeTypenameLink,
             client.split(operation => operation.getContext().clientName === "report", reportGraphQLLink, client.split(() => isInternalGqlContext(), internalGraphQLLink, publicGraphQLLink)),
@@ -261,8 +335,12 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
         getToken: () => {
             return token;
         },
+        setTracingHeaders: (newHeaders) => {
+            tracingHeaders = newHeaders;
+        },
     };
 };
+
 const useApolloClient = () => {
     const { graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, environment, tracingHeaders } = reactCoreHooks.useEnvironment();
     const { token: currentToken } = reactCoreHooks.useToken();
@@ -281,11 +359,17 @@ const useApolloClient = () => {
             errorHandler,
         });
     });
-    react.useMemo(() => {
-        if (client.getToken() !== currentToken) {
-            client.setToken(currentToken);
-        }
-    }, [client, currentToken]);
+    // Synchronously propagate the token into the Apollo client closure during render
+    // so that child components' effects (useLayoutEffect / useEffect) always see the
+    // current token when they fire their first request in the same commit.
+    // React runs child effects before parent effects, so a parent useEffect here would
+    // be too late — child queries would go out with the previous token for one commit.
+    if (client.getToken() !== currentToken) {
+        client.setToken(currentToken);
+    }
+    react.useEffect(() => {
+        client.setTracingHeaders(tracingHeaders);
+    }, [client, tracingHeaders]);
     return client;
 };
 /**

package/index.esm.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { ApolloProvider, createHttpLink, from, split, ApolloClient, InMemoryCache, ApolloLink } from '@apollo/client';
+import { ApolloLink, Observable, createHttpLink, from, split, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { useEnvironment, useToken, useErrorHandler } from '@trackunit/react-core-hooks';
+import { useState, useEffect, useMemo, useCallback, useReducer, Suspense } from 'react';
 import { setContext } from '@apollo/client/link/context';
 import { removeTypenameFromVariables } from '@apollo/client/link/remove-typename';
-import { getMainDefinition, Observable } from '@apollo/client/utilities';
-import { useEnvironment, useToken, useErrorHandler } from '@trackunit/react-core-hooks';
+import { getMainDefinition, Observable as Observable$1 } from '@apollo/client/utilities';
 import { print } from 'graphql';
 import { createClient } from 'graphql-sse';
-import { useState, useMemo, useEffect, useCallback, useReducer, Suspense } from 'react';
 import { onError } from '@apollo/client/link/error';
 import { ToastRuntime, AnalyticsRuntime, registerHostChangeHandler, AssetSortingRuntime, ConfirmationDialogRuntime, EnvironmentRuntime, ExportDataRuntime, AssetsFilterBarRuntime, CustomersFilterBarRuntime, SitesFilterBarRuntime, GeolocationRuntime, ModalDialogRuntime, NavigationRuntime, OemBrandingRuntime, ThemeCssRuntime, TimeRangeRuntime, TokenRuntime, CurrentUserRuntime, CurrentUserPreferenceRuntime, UserSubscriptionRuntime, WidgetConfigRuntime } from '@trackunit/iris-app-runtime-core';
 import { ToastProvider, AnalyticsContextProvider, AssetSortingProvider, ConfirmationDialogProvider, EnvironmentContextProvider, ErrorHandlingContextProvider, ExportDataContext, FilterBarProvider, GeolocationProvider, ModalDialogContextProvider, NavigationContextProvider, OemBrandingContextProvider, TimeRangeProvider, TokenProvider, CurrentUserProvider, CurrentUserPreferenceProvider, UserSubscriptionProvider, WidgetConfigProvider } from '@trackunit/react-core-contexts-api';
@@ -17,7 +17,7 @@ import { Channels, SortOrder, AssetSortByProperty } from '@trackunit/iris-app-ru
 /**
  * This error link is used to capture error information, i. e. traceId, graphQL errors, network errors, etc.
  */
-const createErrorLink = ({ errorHandler, token, }) => {
+const createErrorLink = ({ errorHandler, getToken, }) => {
     return onError(({ graphQLErrors, networkError, operation, forward }) => {
         if (networkError) {
             // We skip the error logging if the error is an AbortError
@@ -65,7 +65,7 @@ const createErrorLink = ({ errorHandler, token, }) => {
                     x.message.includes("Invalid token specified") ||
                     x.message.includes("Access denied! You need to be authorized to perform this action!"));
             });
-            if (invalidToken && token) {
+            if (invalidToken && getToken()) {
                 errorHandler.captureException(new Error(JSON.stringify({
                     category: "GraphQL",
                     info: "GraphQL Error - invalidToken",
@@ -101,6 +101,76 @@ const createErrorLink = ({ errorHandler, token, }) => {
     });
 };
 
+/**
+ * Wraps an SSE subscription link and provides the same error monitoring as the
+ * HTTP error link — capturing GraphQL errors, traceIds, FORCE_RELOAD_BROWSER,
+ * and UNAUTHENTICATED codes — for long-lived subscription Observables.
+ */
+const createSubscriptionErrorLink = ({ errorHandler, getToken, }) => {
+    return new ApolloLink((operation, forward) => {
+        return new Observable(observer => {
+            const subscription = forward(operation).subscribe({
+                next: response => {
+                    const { errors } = response;
+                    if (errors) {
+                        const code = errors[0]?.extensions?.code;
+                        if (code === "FORCE_RELOAD_BROWSER") {
+                            window.location.reload();
+                        }
+                        const traceIds = [];
+                        errors.forEach(error => {
+                            if ("extensions" in error && error.extensions && typeof error.extensions.traceId === "string") {
+                                traceIds.push(error.extensions.traceId);
+                            }
+                        });
+                        if (traceIds.length) {
+                            errorHandler.setTag("traceIds", traceIds.join(", "));
+                        }
+                        errorHandler.addBreadcrumb({
+                            category: "GraphQL",
+                            message: "GraphQL Subscription Error",
+                            level: "error",
+                            data: { log: JSON.stringify(errors) },
+                        });
+                        const invalidToken = errors.some(x => x.extensions?.code === "UNAUTHENTICATED" ||
+                            x.message.includes("Invalid token specified") ||
+                            x.message.includes("Access denied! You need to be authorized to perform this action!"));
+                        if (invalidToken && getToken()) {
+                            errorHandler.captureException(new Error(JSON.stringify({
+                                category: "GraphQL",
+                                info: "GraphQL Subscription Error - invalidToken",
+                                level: "warning",
+                                data: { log: JSON.stringify(errors) },
+                            })), { level: "warning", fingerprint: ["GraphQL Subscription Error - invalidToken"] });
+                        }
+                    }
+                    observer.next(response);
+                },
+                error: err => {
+                    // AbortError is expected when a subscription is cancelled (component
+                    // unmount or navigation) — graphql-sse calls control.abort() which
+                    // fires this error asynchronously. Swallow it to prevent an
+                    // unhandled rejection, mirroring the guard in createErrorLink.
+                    if (err instanceof Error && err.name === "AbortError") {
+                        return;
+                    }
+                    // eslint-disable-next-line no-console
+                    console.error(err);
+                    errorHandler.addBreadcrumb({
+                        category: "GraphQL",
+                        message: "GraphQL Subscription Network Error",
+                        level: "error",
+                        data: { log: String(err) },
+                    });
+                    observer.error(err);
+                },
+                complete: () => observer.complete(),
+            });
+            return () => subscription.unsubscribe();
+        });
+    });
+};
+
 // Use a widened `string` key so TypeScript picks the `unknown` overload of
 // `Reflect.get` instead of the typed one — otherwise reads like `module`
 // resolve to `NodeModule` from @types/node.
@@ -168,11 +238,12 @@ const isInternalGqlContext = () => {
     return Reflect.get(globalThis, "gql") === "internal";
 };
 
-const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, isDev, tracingHeaders, firstToken, errorHandler, }) => {
-    let token;
-    if (!token) {
-        token = firstToken;
-    }
+/**
+ * @internal
+ */
+const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, isDev, tracingHeaders: initialTracingHeaders, firstToken, errorHandler, }) => {
+    let token = firstToken;
+    let tracingHeaders = initialTracingHeaders;
     const publicGraphQLLink = createHttpLink({
         uri: request => graphqlPublicUrl + "/" + request.operationName,
     });
@@ -182,7 +253,7 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
     const reportGraphQLLink = createHttpLink({
         uri: request => graphqlReportUrl + "/" + request.operationName,
     });
-    const authLink = setContext(async (_, { headers: existingHeaders }) => {
+    const authLink = setContext((_, { headers: existingHeaders }) => {
         return {
             headers: {
                 ...existingHeaders,
@@ -190,7 +261,7 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
             },
         };
     });
-    const errorLink = createErrorLink({ errorHandler, token });
+    const errorLink = createErrorLink({ errorHandler, getToken: () => token });
     const defaultOptions = {
         watchQuery: {
             fetchPolicy: "no-cache",
@@ -207,12 +278,14 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
     };
     const removeTypenameLink = removeTypenameFromVariables();
     class SSELink extends ApolloLink {
+        /** @inheritdoc */
         constructor(options) {
             super();
             this.client = createClient(options);
         }
+        /** @inheritdoc */
         request(operation) {
-            return new Observable(sink => {
+            return new Observable$1(sink => {
                 return this.client.subscribe({ ...operation, query: print(operation.query) }, {
                     next: value => sink.next(value),
                     complete: sink.complete.bind(sink),
@@ -226,12 +299,13 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
         headers: () => generateHeaders(token, tracingHeaders),
     });
     // Split links based on operation type
+    const subscriptionErrorLink = createSubscriptionErrorLink({ errorHandler, getToken: () => token });
     const splitLink = from([
         authLink,
         split(({ query }) => {
             const definition = getMainDefinition(query);
             return definition.kind === "OperationDefinition" && definition.operation === "subscription";
-        }, sseLink, from([
+        }, from([subscriptionErrorLink, sseLink]), from([
             errorLink,
             removeTypenameLink,
             split(operation => operation.getContext().clientName === "report", reportGraphQLLink, split(() => isInternalGqlContext(), internalGraphQLLink, publicGraphQLLink)),
@@ -259,8 +333,12 @@ const createApolloClient = ({ graphqlPublicUrl, graphqlInternalUrl, graphqlRepor
         getToken: () => {
             return token;
         },
+        setTracingHeaders: (newHeaders) => {
+            tracingHeaders = newHeaders;
+        },
     };
 };
+
 const useApolloClient = () => {
     const { graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, environment, tracingHeaders } = useEnvironment();
     const { token: currentToken } = useToken();
@@ -279,11 +357,17 @@ const useApolloClient = () => {
             errorHandler,
         });
     });
-    useMemo(() => {
-        if (client.getToken() !== currentToken) {
-            client.setToken(currentToken);
-        }
-    }, [client, currentToken]);
+    // Synchronously propagate the token into the Apollo client closure during render
+    // so that child components' effects (useLayoutEffect / useEffect) always see the
+    // current token when they fire their first request in the same commit.
+    // React runs child effects before parent effects, so a parent useEffect here would
+    // be too late — child queries would go out with the previous token for one commit.
+    if (client.getToken() !== currentToken) {
+        client.setToken(currentToken);
+    }
+    useEffect(() => {
+        client.setTracingHeaders(tracingHeaders);
+    }, [client, tracingHeaders]);
     return client;
 };
 /**

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-core-contexts",
-  "version": "1.30.5",
+  "version": "1.30.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/iris-app-api": "1.20.8",
-    "@trackunit/iris-app-runtime-core-api": "1.16.7",
-    "@trackunit/react-core-hooks": "1.17.11",
-    "@trackunit/i18n-library-translation": "1.22.2",
-    "@trackunit/react-components": "1.26.5",
-    "@trackunit/iris-app-runtime-core": "1.17.7",
+    "@trackunit/iris-app-api": "1.20.9",
+    "@trackunit/iris-app-runtime-core-api": "1.16.8",
+    "@trackunit/react-core-hooks": "1.17.12",
+    "@trackunit/i18n-library-translation": "1.22.3",
+    "@trackunit/react-components": "1.26.7",
+    "@trackunit/iris-app-runtime-core": "1.17.8",
     "graphql-sse": "^2.5.4",
-    "@trackunit/react-core-contexts-api": "1.17.7"
+    "@trackunit/react-core-contexts-api": "1.17.8"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/createApolloClient.d.ts

@@ -0,0 +1,19 @@
+import { ApolloClient } from "@apollo/client";
+import { ErrorHandlingContextValue, TracingHeaders } from "@trackunit/iris-app-runtime-core-api";
+/**
+ * @internal
+ */
+export declare const createApolloClient: ({ graphqlPublicUrl, graphqlInternalUrl, graphqlReportUrl, isDev, tracingHeaders: initialTracingHeaders, firstToken, errorHandler, }: {
+    graphqlPublicUrl: string;
+    graphqlInternalUrl: string;
+    graphqlReportUrl: string;
+    tracingHeaders: TracingHeaders;
+    isDev: boolean;
+    firstToken?: string;
+    errorHandler: ErrorHandlingContextValue;
+}) => {
+    client: ApolloClient<import("@apollo/client").NormalizedCacheObject>;
+    setToken: (newToken: string | undefined) => void;
+    getToken: () => string | undefined;
+    setTracingHeaders: (newHeaders: TracingHeaders) => void;
+};

package/src/errorLink/errorLink.d.ts

@@ -3,7 +3,7 @@ import { ErrorHandlingContextValue } from "@trackunit/iris-app-runtime-core-api"
 /**
  * This error link is used to capture error information, i. e. traceId, graphQL errors, network errors, etc.
  */
-export declare const createErrorLink: ({ errorHandler, token, }: {
+export declare const createErrorLink: ({ errorHandler, getToken, }: {
     errorHandler: ErrorHandlingContextValue;
-    token: string | undefined;
+    getToken: () => string | undefined;
 }) => ApolloLink;

package/src/errorLink/subscriptionErrorLink.d.ts

@@ -0,0 +1,11 @@
+import { ApolloLink } from "@apollo/client";
+import { ErrorHandlingContextValue } from "@trackunit/iris-app-runtime-core-api";
+/**
+ * Wraps an SSE subscription link and provides the same error monitoring as the
+ * HTTP error link — capturing GraphQL errors, traceIds, FORCE_RELOAD_BROWSER,
+ * and UNAUTHENTICATED codes — for long-lived subscription Observables.
+ */
+export declare const createSubscriptionErrorLink: ({ errorHandler, getToken, }: {
+    errorHandler: ErrorHandlingContextValue;
+    getToken: () => string | undefined;
+}) => ApolloLink;