@sanity/client 7.21.0 → 7.22.1

package/dist/stega.browser.d.cts

@@ -855,6 +855,7 @@ export declare class ClientError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any, context?: HttpContext)
 }
@@ -1133,9 +1134,9 @@ declare interface ContentSourceMapValueMapping_2 {
 
 /** @public */
 export declare class CorsOriginError extends Error {
-  projectId: string
+  projectId?: string
   addOriginUrl?: URL
-  constructor({projectId}: {projectId: string})
+  constructor({projectId, credentials}?: {projectId?: string; credentials?: boolean})
 }
 
 /**
@@ -1515,6 +1516,7 @@ export declare interface ErrorProps {
   response: Any
   statusCode: number
   responseBody: Any
+  traceId?: string
   details: Any
 }
 
@@ -1714,7 +1716,11 @@ export declare type FitMode = 'preserve' | 'stretch' | 'crop' | 'smartcrop' | 'p
  * @returns A formatted error message string.
  * @public
  */
-export declare function formatQueryParseError(error: QueryParseError, tag?: string | null): string
+export declare function formatQueryParseError(
+  error: QueryParseError,
+  tag?: string | null,
+  traceId?: string,
+): string
 
 /** @beta */
 declare type GenerateAsyncInstruction<T extends Record<string, Any> = Record<string, Any>> = (
@@ -6061,6 +6067,7 @@ export declare class ServerError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any)
 }

package/dist/stega.browser.d.ts

@@ -855,6 +855,7 @@ export declare class ClientError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any, context?: HttpContext)
 }
@@ -1133,9 +1134,9 @@ declare interface ContentSourceMapValueMapping_2 {
 
 /** @public */
 export declare class CorsOriginError extends Error {
-  projectId: string
+  projectId?: string
   addOriginUrl?: URL
-  constructor({projectId}: {projectId: string})
+  constructor({projectId, credentials}?: {projectId?: string; credentials?: boolean})
 }
 
 /**
@@ -1515,6 +1516,7 @@ export declare interface ErrorProps {
   response: Any
   statusCode: number
   responseBody: Any
+  traceId?: string
   details: Any
 }
 
@@ -1714,7 +1716,11 @@ export declare type FitMode = 'preserve' | 'stretch' | 'crop' | 'smartcrop' | 'p
  * @returns A formatted error message string.
  * @public
  */
-export declare function formatQueryParseError(error: QueryParseError, tag?: string | null): string
+export declare function formatQueryParseError(
+  error: QueryParseError,
+  tag?: string | null,
+  traceId?: string,
+): string
 
 /** @beta */
 declare type GenerateAsyncInstruction<T extends Record<string, Any> = Record<string, Any>> = (
@@ -6061,6 +6067,7 @@ export declare class ServerError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any)
 }

package/dist/stega.d.cts

@@ -855,6 +855,7 @@ export declare class ClientError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any, context?: HttpContext)
 }
@@ -1133,9 +1134,9 @@ declare interface ContentSourceMapValueMapping_2 {
 
 /** @public */
 export declare class CorsOriginError extends Error {
-  projectId: string
+  projectId?: string
   addOriginUrl?: URL
-  constructor({projectId}: {projectId: string})
+  constructor({projectId, credentials}?: {projectId?: string; credentials?: boolean})
 }
 
 /**
@@ -1515,6 +1516,7 @@ export declare interface ErrorProps {
   response: Any
   statusCode: number
   responseBody: Any
+  traceId?: string
   details: Any
 }
 
@@ -1714,7 +1716,11 @@ export declare type FitMode = 'preserve' | 'stretch' | 'crop' | 'smartcrop' | 'p
  * @returns A formatted error message string.
  * @public
  */
-export declare function formatQueryParseError(error: QueryParseError, tag?: string | null): string
+export declare function formatQueryParseError(
+  error: QueryParseError,
+  tag?: string | null,
+  traceId?: string,
+): string
 
 /** @beta */
 declare type GenerateAsyncInstruction<T extends Record<string, Any> = Record<string, Any>> = (
@@ -6061,6 +6067,7 @@ export declare class ServerError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any)
 }

package/dist/stega.d.ts

@@ -855,6 +855,7 @@ export declare class ClientError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any, context?: HttpContext)
 }
@@ -1133,9 +1134,9 @@ declare interface ContentSourceMapValueMapping_2 {
 
 /** @public */
 export declare class CorsOriginError extends Error {
-  projectId: string
+  projectId?: string
   addOriginUrl?: URL
-  constructor({projectId}: {projectId: string})
+  constructor({projectId, credentials}?: {projectId?: string; credentials?: boolean})
 }
 
 /**
@@ -1515,6 +1516,7 @@ export declare interface ErrorProps {
   response: Any
   statusCode: number
   responseBody: Any
+  traceId?: string
   details: Any
 }
 
@@ -1714,7 +1716,11 @@ export declare type FitMode = 'preserve' | 'stretch' | 'crop' | 'smartcrop' | 'p
  * @returns A formatted error message string.
  * @public
  */
-export declare function formatQueryParseError(error: QueryParseError, tag?: string | null): string
+export declare function formatQueryParseError(
+  error: QueryParseError,
+  tag?: string | null,
+  traceId?: string,
+): string
 
 /** @beta */
 declare type GenerateAsyncInstruction<T extends Record<string, Any> = Record<string, Any>> = (
@@ -6061,6 +6067,7 @@ export declare class ServerError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode']
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
   constructor(res: Any)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/client",
-  "version": "7.21.0",
+  "version": "7.22.1",
   "description": "Client for retrieving, creating and patching data from Sanity.io",
   "keywords": [
     "sanity",

package/src/data/live.ts

@@ -1,4 +1,4 @@
-import {catchError, mergeMap, Observable, of} from 'rxjs'
+import {catchError, mergeMap, Observable, of, throwError} from 'rxjs'
 import {finalize, map} from 'rxjs/operators'
 
 import {CorsOriginError} from '../http/errors'
@@ -122,16 +122,10 @@ export class LiveClient {
       'goaway',
     ])
 
-    const checkCors = fetchObservable(url, {
-      method: 'OPTIONS',
-      mode: 'cors',
-      credentials: esOptions.withCredentials ? 'include' : 'omit',
-      headers: esOptions.headers,
-    }).pipe(
-      catchError(() => {
-        // If the request fails, then we assume it was due to CORS, and we rethrow a special error that allows special handling in userland
-        throw new CorsOriginError({projectId: projectId!})
-      }),
+    const checkCors = checkCorsObservable(
+      new URL(this.#client.getUrl('/check/cors', false)),
+      projectId,
+      esOptions.withCredentials === true,
     )
 
     const observable = events
@@ -145,6 +139,12 @@ export class LiveClient {
           return of(event)
         }),
         catchError((err) => {
+          // If a prior `reconnect` already ran the CORS probe and produced a
+          // `CorsOriginError`, just rethrow it instead of calling `/check/cors`
+          // a second time only to get the same answer.
+          if (err instanceof CorsOriginError) {
+            return throwError(() => err)
+          }
           return checkCors.pipe(
             mergeMap(() => {
               // rethrow the original error if checkCors passed
@@ -172,21 +172,92 @@ export class LiveClient {
   }
 }
 
-function fetchObservable(url: URL, init: RequestInit) {
-  return new Observable((observer) => {
+/**
+ * Probes the `/check/cors` endpoint to confirm whether the current origin is
+ * allowed by the project's CORS configuration. EventSource failures are opaque,
+ * so we use this side-channel purely to tell "the server actively rejected our
+ * origin" apart from every other class of failure.
+ *
+ * Errors with `CorsOriginError` when either:
+ *
+ * - `requireCredentials` is `true` (the EventSource was about to send
+ *   credentials) and `/check/cors` reports `result.withCredentials === false`.
+ *   The credentialed request would fail due to a missing
+ *   `access-control-allow-credentials` header. The resulting error carries
+ *   `credentials: true` so its `addOriginUrl` deep-link pre-selects the
+ *   "Allow credentials" toggle in the Sanity management form.
+ * - `/check/cors` reports `result.allowed === false` (origin is not on the
+ *   project's CORS allow-list). The error carries `credentials: requireCredentials`
+ *   so the deep-link still pre-selects credentials when the caller needed them.
+ *
+ * Every other outcome is intentionally treated as "we don't know": the
+ * observable emits a single `void` value and then completes, so downstream
+ * `mergeMap(() => ...)` consumers can continue. No error is surfaced for any
+ * of these cases:
+ *
+ * - `allowed: true` (with credentials satisfied if required) or an
+ *   unrecognised body shape: the server did not confirm a CORS rejection.
+ * - Non-2xx HTTP response from `/check/cors`: same - no signal either way, and
+ *   a 5xx on the probe shouldn't poison the EventSource's original error.
+ * - `fetch` / network / JSON parse failures: indistinguishable from ordinary
+ *   connectivity hiccups (offline, DNS, certs, transient outages). Reporting
+ *   those as CORS errors is exactly the false-positive class this helper
+ *   exists to prevent.
+ * - The subscription was aborted: nothing to emit and nothing to complete.
+ *
+ * In all of those cases the caller's original underlying error from the
+ * EventSource is allowed to propagate unchanged.
+ */
+function checkCorsObservable(
+  url: URL,
+  projectId: string | undefined,
+  requireCredentials: boolean,
+): Observable<void> {
+  return new Observable<void>((observer) => {
     const controller = new AbortController()
-    const signal = controller.signal
-    fetch(url, {...init, signal: controller.signal}).then(
-      (response) => {
-        observer.next(response)
-        observer.complete()
-      },
-      (err) => {
-        if (!signal.aborted) {
-          observer.error(err)
+    const {signal} = controller
+    fetch(url, {method: 'GET', mode: 'cors', credentials: 'omit', signal})
+      .then((response) => {
+        // Aborted or non-2xx: not a confirmed CORS rejection. Fall through with
+        // an undefined body so the next step takes the silent-completion path.
+        if (signal.aborted || !response.ok) return
+        return response.json() as Promise<{
+          result?: {allowed?: boolean; withCredentials?: boolean}
+        }>
+      })
+      .then((body) => {
+        if (signal.aborted) return
+        // Check the credentialed case first: if the EventSource was about to
+        // send credentials but the project's CORS config doesn't permit them,
+        // the credentialed request would fail with a missing
+        // `access-control-allow-credentials` header. Surface this as a CORS
+        // rejection with `credentials: true` so the deep-link pre-selects the
+        // "Allow credentials" toggle.
+        if (requireCredentials && body?.result?.withCredentials === false) {
+          observer.error(new CorsOriginError({projectId, credentials: true}))
+          return
         }
-      },
-    )
+        // Generic case: the server actively rejected this origin. Propagate
+        // `credentials: requireCredentials` so the deep-link still pre-selects
+        // credentials when the caller needed them.
+        if (body?.result?.allowed === false) {
+          observer.error(new CorsOriginError({projectId, credentials: requireCredentials}))
+          return
+        }
+        // Anything else (allowed + credentials satisfied, unrecognised body)
+        // is treated as "not a confirmed CORS rejection" - let the caller's
+        // original error surface instead.
+        observer.next()
+        observer.complete()
+      })
+      // Fetch/network/JSON parse errors are intentionally ignored - see the
+      // helper's docblock for the rationale. We still need to settle the
+      // observer so downstream `mergeMap(checkCors, ...)` consumers can proceed.
+      .catch(() => {
+        if (signal.aborted || observer.closed) return
+        observer.next()
+        observer.complete()
+      })
     return () => controller.abort()
   })
 }

package/src/http/errors.ts

@@ -64,6 +64,7 @@ export class ClientError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode'] = 400
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
 
   constructor(res: Any, context?: HttpContext) {
@@ -78,6 +79,7 @@ export class ServerError extends Error {
   response: ErrorProps['response']
   statusCode: ErrorProps['statusCode'] = 500
   responseBody: ErrorProps['responseBody']
+  traceId: ErrorProps['traceId']
   details: ErrorProps['details']
 
   constructor(res: Any) {
@@ -93,13 +95,14 @@ function extractErrorProps(res: Any, context?: HttpContext): ErrorProps {
     response: res,
     statusCode: res.statusCode,
     responseBody: stringifyBody(body, res),
+    traceId: extractTraceId(res),
     message: '',
     details: undefined as Any,
   }
 
   // Fall back early if we didn't get a JSON object returned as expected
   if (!isRecord(body)) {
-    props.message = httpErrorMessage(res, body)
+    props.message = `${httpErrorMessage(res, body)}${formatTraceId(props.traceId)}`
     return props
   }
 
@@ -107,18 +110,18 @@ function extractErrorProps(res: Any, context?: HttpContext): ErrorProps {
 
   // API/Boom style errors ({statusCode, error, message})
   if (typeof error === 'string' && typeof body.message === 'string') {
-    props.message = `${error} - ${body.message}`
+    props.message = `${error} - ${body.message}${formatTraceId(props.traceId)}`
     return props
   }
 
   // Content Lake errors with a `error` prop being an object
   if (typeof error !== 'object' || error === null) {
     if (typeof error === 'string') {
-      props.message = error
+      props.message = `${error}${formatTraceId(props.traceId)}`
     } else if (typeof body.message === 'string') {
-      props.message = body.message
+      props.message = `${body.message}${formatTraceId(props.traceId)}`
     } else {
-      props.message = httpErrorMessage(res, body)
+      props.message = `${httpErrorMessage(res, body)}${formatTraceId(props.traceId)}`
     }
     return props
   }
@@ -134,7 +137,7 @@ function extractErrorProps(res: Any, context?: HttpContext): ErrorProps {
     if (allItems.length > MAX_ITEMS_IN_ERROR_MESSAGE) {
       itemsStr += `\n...and ${allItems.length - MAX_ITEMS_IN_ERROR_MESSAGE} more`
     }
-    props.message = `${error.description}${itemsStr}`
+    props.message = `${error.description}${formatTraceId(props.traceId)}${itemsStr}`
     props.details = body.error
     return props
   }
@@ -142,20 +145,20 @@ function extractErrorProps(res: Any, context?: HttpContext): ErrorProps {
   // Query parse errors
   if (isQueryParseError(error)) {
     const tag = context?.options?.query?.tag
-    props.message = formatQueryParseError(error, tag)
+    props.message = formatQueryParseError(error, tag, props.traceId)
     props.details = body.error
     return props
   }
 
   if ('description' in error && typeof error.description === 'string') {
     // Query/database errors ({error: {description, other, arb, props}})
-    props.message = error.description
+    props.message = `${error.description}${formatTraceId(props.traceId)}`
     props.details = error
     return props
   }
 
   // Other, more arbitrary errors
-  props.message = httpErrorMessage(res, body)
+  props.message = `${httpErrorMessage(res, body)}${formatTraceId(props.traceId)}`
   return props
 }
 
@@ -196,17 +199,22 @@ export function isQueryParseError(error: object): error is QueryParseError {
  * @returns A formatted error message string.
  * @public
  */
-export function formatQueryParseError(error: QueryParseError, tag?: string | null) {
+export function formatQueryParseError(
+  error: QueryParseError,
+  tag?: string | null,
+  traceId?: string,
+) {
   const {query, start, end, description} = error
+  const withTraceId = traceId ? `\n(traceId: ${traceId})` : ''
 
   if (!query || typeof start === 'undefined') {
-    return `GROQ query parse error: ${description}`
+    return `GROQ query parse error: ${description}${withTraceId}`
   }
 
   const withTag = tag ? `\n\nTag: ${tag}` : ''
   const framed = codeFrame(query, {start, end}, description)
 
-  return `GROQ query parse error:\n${framed}${withTag}`
+  return `GROQ query parse error:\n${framed}${withTag}${withTraceId}`
 }
 
 function httpErrorMessage(res: Any, body: unknown) {
@@ -215,35 +223,66 @@ function httpErrorMessage(res: Any, body: unknown) {
   return `${res.method}-request to ${res.url} resulted in HTTP ${res.statusCode}${statusMessage}${details}`
 }
 
+/**
+ * Extract the traceId from the traceparent header on the response.
+ *
+ * The traceparent is on the format [version]-[traceId]-[parentId]-[traceFlags], but
+ * when debugging end-user issues it's the traceId we need to be able to get hold of
+ * the relevant traces.
+ *
+ * @see https://www.w3.org/TR/trace-context/
+ * @returns The traceId for HTTP response
+ */
+function extractTraceId(res: Any): string | undefined {
+  const traceparent = res?.headers?.['traceparent']
+  if (!traceparent) return
+
+  return traceparent.split('-')[1]
+}
+
 function stringifyBody(body: Any, res: Any) {
   const contentType = (res.headers['content-type'] || '').toLowerCase()
   const isJson = contentType.indexOf('application/json') !== -1
   return isJson ? JSON.stringify(body, null, 2) : body
 }
 
+function formatTraceId(traceId: string | undefined): string {
+  return traceId ? ` (traceId: ${traceId})` : ''
+}
+
 function sliceWithEllipsis(str: string, max: number) {
   return str.length > max ? `${str.slice(0, max)}…` : str
 }
 
 /** @public */
 export class CorsOriginError extends Error {
-  projectId: string
+  projectId?: string
   addOriginUrl?: URL
 
-  constructor({projectId}: {projectId: string}) {
+  constructor({projectId, credentials}: {projectId?: string; credentials?: boolean} = {}) {
     super('CorsOriginError')
     this.name = 'CorsOriginError'
     this.projectId = projectId
 
-    const url = new URL(`https://sanity.io/manage/project/${projectId}/api`)
-    if (typeof location !== 'undefined') {
+    // Only build a deep-link when we know which project the user needs to
+    // configure - without `projectId` the management URL can't actually route
+    // them anywhere useful.
+    if (projectId && typeof location !== 'undefined') {
+      const url = new URL(`https://sanity.io/manage/project/${projectId}/api`)
       const {origin} = location
       url.searchParams.set('cors', 'add')
       url.searchParams.set('origin', origin)
+      if (credentials) {
+        // Pre-selects the "Allow credentials (token-based auth)" toggle in
+        // the Sanity management CORS form.
+        url.searchParams.set('credentials', '')
+      }
       this.addOriginUrl = url
       this.message = `The current origin is not allowed to connect to the Live Content API. Add it here: ${url}`
+    } else if (projectId) {
+      this.message = `The current origin is not allowed to connect to the Live Content API. Change your configuration here: https://sanity.io/manage/project/${projectId}/api`
     } else {
-      this.message = `The current origin is not allowed to connect to the Live Content API. Change your configuration here: ${url}`
+      this.message = `The current origin is not allowed to connect to the Live Content API.`
     }
   }
 }

package/src/types.ts

@@ -433,6 +433,7 @@ export interface ErrorProps {
   response: Any
   statusCode: number
   responseBody: Any
+  traceId?: string
   details: Any
 }