Error logging

src/api/client.ts

@@ -63,7 +63,8 @@ export interface NostoClient {
         type: "serp" | "autocomplete" | "category",
         hit: { url?: string; keyword?: string }
     ): void
-    recordSearchSubmit(query: string): void
+    recordSearchSubmit(query: string): void,
+    captureError: (error: unknown, reporter: string, level: 'debug' | 'info' | 'warn' | 'error') => void
 }
 
 /**
@@ -82,6 +83,16 @@ export function getNostoClient(): PromiseLike<NostoClient> {
     })
 }
 
+export function logAndCaptureError(error: unknown, level: 'debug' | 'info' | 'warn' | 'error') {
+    getNostoClient().then(api => {
+        api.captureError(error, 'nostoAutocomplete', level)
+    })
+    const acceptedLogs = ['debug', 'info', 'warn', 'error']
+    if (level in acceptedLogs) {
+        console[level](error)
+    }
+}
+
 /**
  * @group Nosto Client
  * @category Recommendation Types

src/autocomplete.ts

@@ -1,4 +1,4 @@
-import { getNostoClient } from "./api/client"
+import { getNostoClient, logAndCaptureError } from "./api/client"
 import { AutocompleteConfig, getDefaultConfig } from "./config"
 import { Dropdown, createDropdown, parseHit } from "./utils/dropdown"
 import { DefaultState, StateActions, getStateActions } from "./utils/state"
@@ -260,12 +260,13 @@ function createInputDropdown<State>({
             : findAll(config.dropdownSelector, HTMLElement)
 
     if (dropdownElements.length === 0) {
-        console.error(`No dropdown element found for input ${input}`)
+        const noElementsError = `No dropdown element found for input ${input}`
+        logAndCaptureError(new Error(noElementsError), "error")
         return
     } else if (dropdownElements.length > 1) {
-        console.error(
+        logAndCaptureError(new Error(
             `Multiple dropdown elements found for input ${input}, using the first element`
-        )
+        ), "error")
     }
 
     const dropdownElement = dropdownElements[0]

src/utils/dropdown.ts

@@ -1,3 +1,4 @@
+import { logAndCaptureError } from "../api/client"
 import { AnyPromise } from "./promise"
 
 type OnClickBindings<State> = {
@@ -270,7 +271,8 @@ export function parseHit(hit: string): Hit {
         const parsedHit: Hit | undefined | null = JSON.parse(hit)
         return parsedHit ?? {}
     } catch (error) {
-        console.warn("Could not parse hit", error)
+        logAndCaptureError(error, "warn")
+        console.warn("Could not parse hit")
         return {}
     }
 }

src/utils/ga.ts

@@ -1,3 +1,4 @@
+import { logAndCaptureError } from "../api/client"
 import { AutocompleteConfig, defaultGaConfig } from "../config"
 
 const localStorageKey = "nostoAutocomplete:gaEvent"
@@ -68,7 +69,8 @@ export function trackGaPageView(options?: {
                     trackers[0]?.send("pageview", url.pathname + url.search)
                 }
             } catch (error) {
-                console.log("Could not send pageview to GA", error)
+                logAndCaptureError(error, "warn")
+                console.warn("Could not send pageview to GA")
             }
         }
     }
@@ -104,7 +106,8 @@ export const getGaTrackUrl = <State>(
                 window.location.origin
             ).toString()
         } catch (error) {
-            console.log("Could not create track url", error)
+            logAndCaptureError(error, "warn")
+            console.warn("Could not create track url")
             return undefined
         }
     }
@@ -125,7 +128,7 @@ function consumeLocalStorageEvent(): void {
             }
             trackGaPageView(event)
         } catch (e) {
-            console.warn(e)
+            logAndCaptureError(e, "warn")
         }
     }
 }

src/utils/history.ts

@@ -1,3 +1,4 @@
+import { logAndCaptureError } from "../api/client"
 import { DefaultState } from "./state"
 
 type Items = NonNullable<DefaultState["history"]>
@@ -12,7 +13,8 @@ export function createHistory(size: number) {
                 JSON.parse(localStorage.getItem(localStorageKey) ?? "[]") ?? []
             )
         } catch (err) {
-            console.error("Could not get history items.", err)
+            logAndCaptureError(err, "error")
+            console.error("Could not get history items.")
             return [] as Items
         }
     }
@@ -21,7 +23,8 @@ export function createHistory(size: number) {
         try {
             localStorage.setItem(localStorageKey, JSON.stringify(data))
         } catch (err) {
-            console.error("Could not set history items.", err)
+            logAndCaptureError(err, "error")
+            console.error("Could not set history items.")
         }
     }