An untrackable bug. How to deal with it?

Add-ons Development
#1

I got this bug like this:

 AbortError: The operation was aborted.

And that is everything I got, no guide or anything that can tell me what part in my code causes this.

However, I still try my best to narrow the scope. Here is the my file, the one causes that bug:

(This file works as background script and handles install event. Something likes what should extension do after the first installation or after updating)

const install = () => {
	const defaultSE = 0;

	const setSE = (id) => {
		const hasPatIn = arr => {
			for (let item of arr)
				return (item.id == id) ? item.pattern : null
		}

		fetch('./se.json')
			.then(res => res.json())
			.then(ls => {// The bug must happen around here...
				const searchEngine = {
					id: id,
					pattern: hasPatIn(ls)
				};
				browser.storage.sync.set({ searchEngine })
			})
	}

	const hasSE = callback => {
		browser.storage.sync.get(
			'searchEngine',
			se => {
				if (
					Object.keys(se).length === 0
					&& se.constructor == Object
				) callback('404')

			}
		)
	}

	hasSE(no => setSE(defaultSE))
}
install()

const update = () => {
	//
}

function setup(details) {
	switch (details.reason) {
		case "install":
			install();
			break;
		case "update":
			update();
			break;
	}
}

//browser.runtime.onInstalled.addListener(setup)

What do you guy do in this case? Can I have an advice please?

#2

How do you know this?

If you haven’t already, I’d suggest starting with putting some breakpoints in each of the Promise’s then functions - see if you’re getting any data from the fetch and whether it gets converted to JSON correctly.

I’m not familiar with the specific error message but would initially guess that it could be due to a problem loading from that URL.

#3

Like I said, I try many times using console.log to track the bug. It all work till that line. I got a feeling that any thing get in the promise can’t be print on the console. Which doesn’t make sense to me.

To ensure there is no problem with the promise in FF, I wrote another code using fetchAPI to fetch directly an image from a website and it works well. I wonder FF addon is blocked or something.

Here is the simple fetch that I paste directly to the web console:

const url = "URL_same_domain";
fetch(url)
    .then(res => res.blob())
    .then(blob => {
        console.log(URL.createObjectURL(blob))
    })

But if I but that code to my content-script, this script still run under same domain website, then the console.log no longer works.