add additional headers

Author: silesky

packages/browser/src/plugins/segmentio/batched-dispatcher.ts

@@ -4,13 +4,7 @@ import { onPageChange } from '../../lib/on-page-change'
 import { SegmentFacade } from '../../lib/to-facade'
 import { RateLimitError } from './ratelimit-error'
 import { Context } from '../../core/context'
-
-export type BatchingDispatchConfig = {
-  size?: number
-  timeout?: number
-  maxRetries?: number
-  keepalive?: boolean
-}
+import { BatchingDispatchConfig, createHeaders } from './shared-dispatcher'
 
 const MAX_PAYLOAD_SIZE = 500
 const MAX_KEEPALIVE_SIZE = 64
@@ -84,9 +78,8 @@ export default function batch(
 
     return fetch(`https://${apiHost}/b`, {
       keepalive: config?.keepalive || pageUnloaded,
-      headers: {
-        'Content-Type': 'text/plain',
-      },
+      headers: createHeaders(config?.additionalHeaders),
+      ...(config?.fetchPriority ? { priority: config?.fetchPriority } : {}),
       method: 'post',
       body: JSON.stringify({
         writeKey,

packages/browser/src/plugins/segmentio/fetch-dispatcher.ts

@@ -1,21 +1,18 @@
 import { fetch } from '../../lib/fetch'
 import { RateLimitError } from './ratelimit-error'
-
+import { createHeaders, StandardDispatcherConfig } from './shared-dispatcher'
 export type Dispatcher = (url: string, body: object) => Promise<unknown>
 
-export type StandardDispatcherConfig = {
-  keepalive?: boolean
-}
-
 export default function (config?: StandardDispatcherConfig): {
   dispatch: Dispatcher
 } {
   function dispatch(url: string, body: object): Promise<unknown> {
     return fetch(url, {
       keepalive: config?.keepalive,
-      headers: { 'Content-Type': 'text/plain' },
+      headers: createHeaders(config?.additionalHeaders),
       method: 'post',
       body: JSON.stringify(body),
+      ...(config?.fetchPriority ? { priority: config?.fetchPriority } : {}),
     }).then((res) => {
       if (res.status >= 500) {
         throw new Error(`Bad response from server: ${res.status}`)

packages/browser/src/plugins/segmentio/index.ts

@@ -7,21 +7,12 @@ import { Plugin } from '../../core/plugin'
 import { PriorityQueue } from '../../lib/priority-queue'
 import { PersistedPriorityQueue } from '../../lib/priority-queue/persisted'
 import { toFacade } from '../../lib/to-facade'
-import batch, { BatchingDispatchConfig } from './batched-dispatcher'
-import standard, { StandardDispatcherConfig } from './fetch-dispatcher'
+import batch from './batched-dispatcher'
+import standard from './fetch-dispatcher'
 import { normalize } from './normalize'
 import { scheduleFlush } from './schedule-flush'
 import { SEGMENT_API_HOST } from '../../core/constants'
-
-type DeliveryStrategy =
-  | {
-      strategy?: 'standard'
-      config?: StandardDispatcherConfig
-    }
-  | {
-      strategy?: 'batching'
-      config?: BatchingDispatchConfig
-    }
+import { DeliveryStrategy } from './shared-dispatcher'
 
 export type SegmentioSettings = {
   apiKey: string
@@ -95,7 +86,7 @@ export function segmentio(
   const client =
     deliveryStrategy?.strategy === 'batching'
       ? batch(apiHost, deliveryStrategy.config)
-      : standard(deliveryStrategy?.config as StandardDispatcherConfig)
+      : standard(deliveryStrategy?.config)
 
   async function send(ctx: Context): Promise<Context> {
     if (isOffline()) {

packages/browser/src/plugins/segmentio/shared-dispatcher.ts

@@ -0,0 +1,60 @@
+export const createHeaders = (
+  headerSettings: AdditionalHeaders | undefined
+): Record<string, string> => {
+  return {
+    'Content-Type': 'text/plain',
+    ...(typeof headerSettings === 'function'
+      ? headerSettings()
+      : headerSettings),
+  }
+}
+
+/**
+ * Additional headers to be sent with the request.
+ * Default is `Content-Type: text/plain`. This can be overridden.
+ * If a function is provided, it will be called before each request.
+ */
+export type AdditionalHeaders =
+  | Record<string, string>
+  | (() => Record<string, string>)
+
+/**
+ * Priority of the request.
+ * chrome only
+ * @default 'auto'
+ */
+export type FetchPriority = 'high' | 'low' | 'auto'
+
+export type BatchingDispatchConfig = {
+  size?: number
+  timeout?: number
+  maxRetries?: number
+  additionalHeaders?: AdditionalHeaders
+  /**
+   * This is useful for ensuring that events are sent even if the user navigates away from the page.
+   * @default false IF the page is being unloaded, true otherwise
+   */
+  keepalive?: boolean
+  fetchPriority?: FetchPriority
+}
+
+export type StandardDispatcherConfig = {
+  /**
+   * This is useful for ensuring that an event is sent even if the user navigates away from the page.
+   * However, it may increase the likelihood of events being lost, as there is a 64kb limit for all fetch requests with keepalive (which is why it's disabled by default).
+   * @default false
+   */
+  keepalive?: boolean
+  additionalHeaders?: AdditionalHeaders
+  fetchPriority?: FetchPriority
+}
+
+export type DeliveryStrategy =
+  | {
+      strategy?: 'standard'
+      config?: StandardDispatcherConfig
+    }
+  | {
+      strategy?: 'batching'
+      config?: BatchingDispatchConfig
+    }