Error Handling

While the idea of this Nuxt module is to mask your Kirby API (and credentials) within the server proxy, nuxt-kql will minimize the hassle of handling errors by passing through the following properties to the response on the client:

• Response body
• HTTP status code
• HTTP status message
• Headers

Thus, if a request to Kirby fails, you can still handle the error response in your Nuxt app just like you would with a direct API call. In this case, both useKql and $kql will throw a NuxtError.

Logging the available error properties will provide you insights on what went wrong:

// `data` will be of type `KirbyQueryResponse` if the request to Kirby itself succeeded
const { data, error } = await useKql({ query: 'site' })

// Log the error if the request to Kirby failed
console.log(
  'Request failed with:',
  error.value.statusCode,
  error.value.statusMessage,
  // Response body
  error.value.data
)

NuxtError Type Declaration

interface NuxtError<DataT = unknown> extends H3Error<DataT> {}

// See https://github.com/unjs/h3
class H3Error<DataT = unknown> extends Error {
  static __h3_error__: boolean
  statusCode: number
  fatal: boolean
  unhandled: boolean
  statusMessage?: string
  data?: DataT
  cause?: unknown
  constructor(message: string, opts?: {
    cause?: unknown
  })
  toJSON(): Pick<H3Error<DataT>, 'data' | 'statusCode' | 'statusMessage' | 'message'>
}