How can I catch source errors?

[aldenquimby]

Description

• same question as #203 because the answer there appears outdated

Reproduction

Steps

1. Create autocomplete with multiple algolia sources:

   autocomplete({
   getSources: () => [{
   sourceId: 'posts',
   getItems: ({ query }) => getAlgoliaResults({
     searchClient,
     queries: [{ query, index_name: 'posts' }],
   }),
   }, {
   sourceId: 'events',
   getItems: ({ query }) => getAlgoliaResults({
     searchClient,
     queries: [{ query, index_name: 'events' }],
   }),
   }],
   ...
   })

2. Turn off your internet so all requests will fail

3. Type into search input

Expected behavior

• either (a) autocomplete status is automatically set to error, or (b) there's a way to catch errors and set status + display a message

Actual behavior

• uncaught promise error happens
• autocomplete status is not set to error
• I tried this, but catch block is never hit, presumably b/c algolia queries are grouped together under the hood:

  getItems: ({ query }) => {
    const algoliaResults = getAlgoliaResults({
      searchClient,
      queries: [{ query, index_name: 'posts' }],
    });
    return {
      ...algoliaResults,
      execute: async (params) => {
        try {
          return await algoliaResults.execute(params);
        } catch {
          // this is never hit
        }
      }
    };
  }

Environment

• OS: macOS (Sonoma)
• Browser: Chrome (latest)
• Autocomplete version: 1.17.0

[dhayab]

Hi, thanks for your report. There is no error catching for Algolia sources at the library level currently. As a workaround you can catch errors at the search client level and forward them to the source in place of result items:

const algoliaClient = algoliasearch(appId, apiKey);
const searchClient = {
  ...algoliaClient,
  search(queries) {
    return algoliaClient.search(queries).catch((error) => {
      return { results: [{ hits: [{ error }] }] };
    });
  },
};

You will then be able to detect the presence of item.error in your source's item template and show a message accordingly.

[aldenquimby]

@dhayab perfect, thank you!