budibase/packages/client/src/api/api.js

import { createAPIClient } from "@budibase/frontend-core"
import { authStore } from "../stores/auth.js"
import { notificationStore, devToolsEnabled, devToolsStore } from "../stores/"
import { get } from "svelte/store"

export const API = createAPIClient({
  // Enable caching of cacheable endpoints to speed things up,
  enableCaching: true,

  // Attach client specific headers
  attachHeaders: headers => {
    // Attach app ID header
    headers["x-budibase-app-id"] = window["##BUDIBASE_APP_ID##"]

    // Attach client header if not inside the builder preview
    if (!window["##BUDIBASE_IN_BUILDER##"]) {
      headers["x-budibase-type"] = "client"
    }

    // Add csrf token if authenticated
    const auth = get(authStore)
    if (auth?.csrfToken) {
      headers["x-csrf-token"] = auth.csrfToken
    }

    // Add role header
    const $devToolsStore = get(devToolsStore)
    const $devToolsEnabled = get(devToolsEnabled)
    if ($devToolsEnabled && $devToolsStore.role) {
      headers["x-budibase-role"] = $devToolsStore.role
    }
  },

  // Show an error notification for all API failures.
  // We could also log these to Posthog.
  // Or we could check error.status and redirect to login on a 403 etc.
  onError: error => {
    const { status, method, url, message, handled, suppressErrors } =
      error || {}
    const ignoreErrorUrls = [
      "bbtel",
      "/api/global/self",
      "/api/tables/ta_users",
    ]

    // Log any errors that we haven't manually handled
    if (!handled) {
      console.error("Unhandled error from API client", error)
      return
    }

    // Notify all errors
    if (message && !suppressErrors) {
      // Don't notify if the URL contains the word analytics as it may be
      // blocked by browser extensions
      let ignore = false
      for (let ignoreUrl of ignoreErrorUrls) {
        if (url?.includes(ignoreUrl)) {
          ignore = true
          break
        }
      }
      if (!ignore) {
        const validationErrors = error?.json?.validationErrors
        if (validationErrors) {
          for (let field in validationErrors) {
            notificationStore.actions.error(
              `${field} ${validationErrors[field]}`
            )
          }
        } else {
          notificationStore.actions.error(message)
        }
      }
    }

    // Log all errors to console
    console.warn(`[Client] HTTP ${status} on ${method}:${url}\n\t${message}`)
  },
  onMigrationDetected: _appId => {
    if (!window.MIGRATING_APP) {
      // We will force a reload, that will display the updating screen until the migration is running
      window.location.reload()
    }
  },
})