Uncaught error bubbles up to the app

[Sparragus]

If the proxy is unreachable when it's offline or blocked by the client, for example, this fetch will throw a runtime error that reaches the app.

unleash-proxy-client-js/src/metrics.ts

Lines 72 to 81 in c040f14

	await this.fetch(url, {
	cache: 'no-cache',
	method: 'POST',
	headers: {
	'Authorization': this.clientKey,
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(payload),
	});

I suggest we implement a try/catch just like it's being done in index.ts.

unleash-proxy-client-js/src/index.ts

Lines 253 to 288 in d1d4ad2

	if (this.fetch) {
	try {
	const context = this.context;
	const urlWithQuery = new URL(this.url.toString());
	// Add context information to url search params. If the properties
	// object is included in the context, flatten it into the search params
	// e.g. /?...&property.param1=param1Value&property.param2=param2Value
	Object.entries(context).forEach(([contextKey, contextValue]) => {
	if (contextKey === 'properties' && contextValue) {
	Object.entries<string>(contextValue).forEach(([propertyKey, propertyValue]) =>
	urlWithQuery.searchParams.append(`properties[${propertyKey}]`, propertyValue)
	);
	} else {
	urlWithQuery.searchParams.append(contextKey, contextValue);
	}
	});
	const response = await this.fetch(urlWithQuery.toString(), {
	cache: 'no-cache',
	headers: {
	'Authorization': this.clientKey,
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'If-None-Match': this.etag,
	},
	});
	if (response.ok && response.status !== 304) {
	this.etag = response.headers.get('ETag') || '';
	const data = await response.json();
	await this.storeToggles(data.toggles);
	}
	} catch (e) {
	// tslint:disable-next-line
	console.error('Unleash: unable to fetch feature toggles', e);
	this.emit(EVENTS.ERROR, e);
	}
	}

As a side-note, on Next.js apps, this is very bothersome during development because it shows a modal displaying uncaught runtime errors.

[ivarconr]

Makes sense @Sparragus 👍🏼

I often forget that fetch uses a mix of throw and unsuccessful response codes, which often feels a bit clunky to get right.

Generally the SDK should try to throw in any operation that happens in the background.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[thomasheartman]

@ivarconr This seems like something we should be able to rectify. Should we reopen and mark as a bug that we can fix? What do you think?

[raymzag]

Following as well. We are seeing these errors in our error loggings too. (edit: we use react sdk client)

[olav]

Should be fixed in the following versions:

unleash-proxy-client-js v2.1.0
@unleash/proxy-client-vue v0.0.4
@unleash/proxy-client-svelte v0.0.4
@unleash/proxy-client-react v3.3.0