How would you show errors from async src?

[folknor]

Hi,

I'm wondering how would you let the user know that there was an error in an async data.src request?

Currently I catch those errors and show them in a separate part of the UI, but what I'd like is to show them "inline" in the resultsList like

Of course I can fake the look and such of my custom error UI to look like the box there, but I was hoping you had some ideas or thoughts.

My first thought was just to return a single custom result from data.src like this

let errorObject = {
	error: true,
}

src: async () => {
	let data
	await fetch("URL", params)
		.then(json => (data = json))
		.catch(() => {
			return [errorObject]
		})
	if (!(data instanceof Object)) {
		return [errorObject]
	}
	return data
}

I've not expanded this into working code yet. I'm just brainstorming.

Any thoughts?

Thank you!

[folknor]

Just some alternatives from the top of my head:

1. Trigger a new event "error" when dataStore promises fail
2. Emit the "fetch" event with some new metadata (the error object from the promise)
3. New property on the root autoComplete object .onError(promiseError), and if the function returns a HTMLElement you create an empty list and add it, almost like resultsList.noResults

I don't know, I'm just thinking out loud.

You probably have much better ideas :-)

[folknor]

Come to think of it events are probably not a good idea because they're async. I can't rely on the event showing up before resultsList.noResults or something else gets called that lets me show it in the popup.

So of the limited options I came up with, number 3 looks the best right now, but you probably have a better solution!

[folknor]

Also apologies if this should be a bug/feature request, or some other discussion category - I wasn't sure.

[folknor]

Here's how I've done it now without any changes to autocomplete.js;

function insertError(query, err) {
	return [
		{
			key1: query,
			error: err
		}
	]
}

// data.key: ["key1"],

//data.src:
let data
await fetch("/", params)
	.then(res => {
		if (!res.ok || (res.status >= 400 && res.status < 600)) {
			throw new Error(
				"Custom error message."
			)
		}
		return res.json()
	})
	.then(json => (data = json))
	.catch(error => (data = error))
if (
	data instanceof Error || data.foo.bar.validation.fails
) {
	return insertError(
		query.replace(/\s/g, ""),
		data instanceof Error
			? data
			: new Error(
					"Returned JSON fails validation"
			  )
	)
}
return data.foo.bar
// ...

resultItem: {
	content: (data, element) => {
		if (data.value.error instanceof Error) {
			element.innerHTML = data.value.error.message
			element.classList.add("error")
		} else {
			element.innerHTML = `<span>${data.value.key1}</span>`
		}
	}
}

resultsList: {
	container: element => {
		if (
			element.children.length === 1 &&
			element.children[0].classList.contains("error")
		) {
			let errorMessage = element.children[0].innerHTML
			element.innerHTML = ""
			const result = document.createElement("p")
			result.setAttribute("class", "autoComplete_error")
			result.setAttribute("tabindex", "-1")
			result.innerHTML = `<span class="iconify-inline" data-icon="fa-solid:exclamation-triangle"></span>${errorMessage}.`
			result.addEventListener("click", ev => {
				ev.stopPropagation()
			})
			element.prepend(result)
		}
	}
}

Obviously this is heavily edited from the actual code, to translate it to english and strip it down to the relevant parts.

It works but I'm hoping someone can come up with a more elegant solution :-)

[TarekRaafat]

Hello @folknor,

I'll think of different approaches for handling this use case and I'll share them with you.

Have a nice day! :)