API Key console error clarification

[Kizito007]

Improved console error message for invalid API Key

#158

Cc @gavinr-maps

[gavinr-maps]

@Kizito007 thank you for the PR!

I am not seeing the warning in my testing when I would expect to see it. Here's what I'm doing:

1. Cloning the repo with your modified branch
2. npm install
3. npm run build
4. npm start
5. In the browser window that opens, click the links for "examples" > "quickstart-dev.html"
   • Expected: Warning "Invalid API Key ...."
   • Actual: No warning:

[Kizito007]

Hey @gavinr-maps

You're right on track. However, the error is expected to warn for "example" HTML files that include apiKey in their script such as:

languages.html, worldview.html etc.

Once you click on a location and the API key is not there or invalid it throws a warning to the console

[hhkaos]

UPDATE: sorry I mistakenly tried the wrong branch. Now updated

You are right @Kizito007, but I agree with @gavinr-maps , the warning is not showing as expected on start on every situation.

Quickstart dev

http://127.0.0.1:8765/examples/quickstart-dev.html

Worldview

http://127.0.0.1:8765/examples/worldview.html

On start (which is OK because the sample is created to not load a map until you select a country):

After selecting a country

Languages

http://127.0.0.1:8765/examples/languages.html

[Kizito007]

Hey @hhkaos

Thanks for trying it out. What additional improvements will you suggest we work on for this issue?

[hhkaos]

Sorry for the delayed response @Kizito007. You should check the HTTP response, sometimes you can get a 200 with an error message:

Thanks!

[Kizito007]

It's all good @hhkaos

I just pushed an update which shows the API error message as a warning on the console.

Kindly check it out

[hhkaos]

We would like to avoid an additional fetch request if possible

[hhkaos]

Can we avoid sending an additional fetch request??

I have been checking the previous error message:

But it doesn't give us the information we need from the REST API, right? I have been checking other events unsuccessfully.

The style.ts is part of MapLibre library so we can not access to any.

// cc: @gavinr-maps @gowin20 any clue on how we can get that REST response?

[patrickarlt]

@Kizito007 I discussed this today with @gavinr-maps and @hhkaos. We are ok with the additional fetch request but only if the options.version is 1 since auth errors with the version 2 service will get covered by the error event above.

[Kizito007]

Just to confirm @patrickarlt are there any variations from version 1 such as 1.1.0 or 1.0.1 so I can safely check if options.version === 1

[gavinr-maps]

Yes, version is only 1 or 2 - see here:

esri-leaflet-vector/src/VectorBasemapLayer.js

Lines 17 to 18 in c751baf

	if (key.includes('/')) options.version = 2;
	else options.version = 1;

[Kizito007]

Thanks for the feedback bosses @gavinr-maps @hhkaos @patrickarlt

I just pushed the update.

[hhkaos]

I was talking to the team, and we think the correct approach would be to listen to the
error event here: https://github.com/Esri/esri-leaflet-vector/blob/master/src/VectorTileLayer.js#L113-L119

Your code in the PR should work https://github.com/Esri/esri-leaflet-vector/pull/227/files#diff-3f514e068697c8df07638716f1c0ebe08329ee0b5e15d993d4d89fb2c004d4b4R171-R177
if that doesn't give us to info back from the REST API, then we probably need other major changes, like manually requesting the style so we can handle the error ourselves

If we don't get the exact error messages we want back, we could say something like "Request for style failed. This is commonly caused by an incorrectly configured, expired, or invalid API key or an expired access token"

I hope this helps! 🙏

[Kizito007]

Thank you for the reach out @hhkaos and my apologies for the late response. My windows ran into some issues but it's all good now.

I'll look into it and respond with my feedback 🫡

[Kizito007]

Hey @hhkaos

I've been trying to listen for error events in the VectorTileLayer and VectorBaseMapLayer but it doesn't seem to return the error on the error event

Code:

Console (quickstart-dev.html):

[hhkaos]

I think you are right. When using some basemaps endpoints that return HTTP status 200 with an error encoded as a JSON object, there is no way to get that JSON and parse it because Maplibre does not trigger any errors.

I just tried using quickstart-dev.html with:

• L.esri.Vector.vectorBasemapLayer("ArcGIS:Streets", ...
• VS using L.esri.Vector.vectorBasemapLayer("arcgis/navigation", .....

Here you can see the result

So I would say maybe we can add a small logic before the fetch you added, just to make sure that that fetch request is only sent when using the V1 enumerations or Custom basemap styles.

What do you think? // cc: @gavinr-maps @patrickarlt

[Kizito007]

@hhkaos should I proceed to add a logic before the fetch?

[hhkaos]

Hi Kizito!, I'm trying to confirm internally with the team, but now it is Thanksgiving in the US, and I think it might take until next week for me to be able to confirm,

[Kizito007]

Thanks for the feedback 😁 and Happy Thanksgiving to everyone!

[patrickarlt]

@Kizito007 we met as a group and discussed this today. I left some feedback for you. Le t me know if this makes sense.

[patrickarlt]

@Kizito007 I discussed this today with @gavinr-maps and @hhkaos. We are ok with the additional fetch request but only if the options.version is 1 since auth errors with the version 2 service will get covered by the error event above.