Fix #10701 enabling failures for wms requests with exception, for Ima…

…geWMS sources

web/client/components/map/openlayers/__tests__/Layer-test.jsx

@@ -320,6 +320,37 @@ describe('Openlayers layer', () => {
         expect(layer).toBeTruthy();
         expect(map.getLayers().getLength()).toBe(1);
     });
+    it.only('render wms singleTile layer with error', (done) => {
+        mockAxios.onGet().reply(r => {
+            expect(r.url.indexOf('SAMPLE_URL') >= 0 ).toBeTruthy();
+            return [200, "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
+            "<ows:ExceptionReport xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">\n" +
+            "  <ows:Exception exceptionCode=\"InvalidParameterValue\" locator=\"srsname\">\n" +
+            "    <ows:ExceptionText>msWFSGetFeature(): WFS server error. Invalid GetFeature Request</ows:ExceptionText>\n" +
+            "  </ows:Exception>\n" +
+            "</ows:ExceptionReport>"];
+        });
+        const options = {
+            type: 'wms',
+            visibility: true,
+            singleTile: true,
+            url: 'SAMPLE_URL',
+            name: 'osm:vector_tile'
+        };
+        const layer = ReactDOM.render(<OpenlayersLayer
+            type="wms"
+            options={{
+                ...options
+            }}
+            map={map} />, document.getElementById("container"));
+        expect(layer.layer.getSource()).toBeTruthy();
+        layer.layer.getSource().on('imageloaderror', (e)=> {
+            setTimeout(() => {
+                expect(e).toBeTruthy();
+                done();
+            }, 200);
+        });
+    });
     it('creates a tiled wms layer for openlayers map with long url', (done) => {
         let options = {
             "type": "wms",

web/client/components/map/openlayers/plugins/WMSLayer.js

@@ -29,7 +29,7 @@ import TileWMS from 'ol/source/TileWMS';
 import VectorTileSource from 'ol/source/VectorTile';
 import VectorTileLayer from 'ol/layer/VectorTile';
 
-import { isVectorFormat } from '../../../../utils/VectorTileUtils';
+import { isVectorFormat, isValidResponse } from '../../../../utils/VectorTileUtils';
 import { OL_VECTOR_FORMATS, applyStyle } from '../../../../utils/openlayers/VectorTileUtils';
 
 import { proxySource, getWMSURLs, wmsToOpenlayersOptions, toOLAttributions, generateTileGrid } from '../../../../utils/openlayers/WMSUtils';
@@ -74,10 +74,14 @@ const loadFunction = (options, headers) => function(image, src) {
                 headers,
                 responseType: 'blob'
             }).then(response => {
-                if (response.status === 200 && response.data) {
+                if (isValidResponse(response)) {
                     image.getImage().src = URL.createObjectURL(response.data);
                 } else {
-                    console.error("Status code: " + response.status);
+                    // #10701 this is needed to trigger the imageloaderror event
+                    // in ol otherwise this event is not triggered if you assign
+                    // the xml content of the exception to the src attribute
+                    image.getImage().src = null;
+                    console.error("error: " + response.data);
                 }
             }).catch(e => {
                 console.error(e);

web/client/utils/VectorTileUtils.js

@@ -13,3 +13,7 @@ export const VECTOR_FORMATS = [
 ];
 
 export const isVectorFormat = (format) => VECTOR_FORMATS.indexOf(format) !== -1;
+
+export const isValidResponse = (response) => {
+    return response?.status === 200 && response?.data && response?.data?.type !== "text/xml";
+};

web/client/utils/__tests__/VectorTileUtils-test.js

@@ -7,7 +7,10 @@
  */
 
 import expect from 'expect';
-import { isVectorFormat } from '../VectorTileUtils';
+import {
+    isValidResponse,
+    isVectorFormat
+} from '../VectorTileUtils';
 
 describe('VectorTileUtils', () => {
     it('test isVectorFormat with vector formats', () => {
@@ -33,4 +36,12 @@ describe('VectorTileUtils', () => {
         const GIF = 'image/gif';
         expect(isVectorFormat(GIF)).toBe(false);
     });
+    it('test isValidResponse', () => {
+        // invalid responses
+        expect(isValidResponse({data: {type: "text/xml"}})).toBeFalsy();
+        expect(isValidResponse({data: {type: "blob"}})).toBeFalsy();
+        expect(isValidResponse({data: {type: "blob"}, status: 401})).toBeFalsy();
+        // valid responses
+        expect(isValidResponse({data: {type: "blob"}, status: 200})).toBeTruthy();
+    });
 });