How to handle layer errors

KevinHaeni

Hello,

In JSAPI 3.x, it was possible to react to layer errors, like for example if the map service is not available, with the following code:

this.layer.on('error', function(evt) {
    if (evt.error.code === 400) {
      this.notificationService.error('Layer Error', `Message: ${evt.error.message}`);
    }
}

With layer being a FeatureLayer object.

I don't really see how this can be achieved using JSAPI 4.x. Any ideas?

kenbuja

In one of my projects, I had a list of layers to add. This was the code I used to see if each service was available before attempting to load them.

<SPAN class="keyword token">var</SPAN> promises <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>layersToAdd<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; promises<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">testService</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> allPromises <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">all</SPAN><SPAN class="punctuation token">(</SPAN>promises<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
allPromises<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; response<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>r<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>r<SPAN class="punctuation token">.</SPAN>resolution<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//load layer</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">testService</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> deferred <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Deferred</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> request <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">XMLHttpRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; request<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"get"</SPAN><SPAN class="punctuation token">,</SPAN> layer<SPAN class="punctuation token">.</SPAN>url <SPAN class="operator token">+</SPAN> <SPAN class="string token">"?f=json"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">catch</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token class-name">error</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; deferred<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN> resolution<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> deferred<SPAN class="punctuation token">.</SPAN>promise<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; request<SPAN class="punctuation token">.</SPAN>onloadend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>status <SPAN class="operator token">!==</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Could not load "</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; deferred<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN> resolution<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> response <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Could not load "</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; deferred<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN> resolution<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; deferred<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN> resolution<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; request<SPAN class="punctuation token">.</SPAN><SPAN class="token function">send</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> deferred<SPAN class="punctuation token">.</SPAN>promise<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>