Manage WFS service from GeoServer

Question

I'm trying to have a zoom to extents of WFS layer. I'm using this code:

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.FullScreen({className: 'ol-full-screen', tipLabel: 'Toggle full-screen'}),
    new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')}),
  ]),
  target: 'map',
});

var view = new ol.View({
  center: ol.proj.fromLonLat([9.25040, 45.54318]),
  zoom: 12,
});
map.setView(view);

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});
map.addLayer(osm);

var treeSource = new ol.source.Vector();

var treeLayer = new ol.layer.Vector({
  source: treeSource,
  style: customStyle,
});
map.addLayer(treeLayer);

var featureRequest = new ol.format.WFS().writeGetFeature({
  srsName: 'EPSG:4326',
  featurePrefix: 'workspacename',
  featureTypes: ['trees'],
  outputFormat: 'application/json',
});

fetch('http://localhost:8080/geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest)
  }).then(function(response) {
    return response.json();
  }).then(function(json) {
    var features = new ol.format.GeoJSON().readFeatures(json);
    console.log(features);
    treeSource.addFeatures(features);
    map.getView().fit(treeSource.getExtent());
});

What I see is a zooming on the extent of the WFS but the features are out of scale because I see 50mm on scale bar. I exclude that the problem is on the features because I can use this features using WMS service withouth problems. Another strange thing is that for a few second I can see the background map from OSM and after this I see only the WFS and the map is putted on 0,0.

I've used almost the same code of the official example.

If I use this code for the same layer, but using WMS service, I've no problems:

var wmsTreesSource = new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/workspacename/wms',
  params: {
    'LAYERS': 'trees',
    'TILED': true,
  },
});
var wmsTrees = new ol.layer.Tile({
  title: 'Trees',
  source: wmsTreesSource,
  visible: true,
});
map.addLayer(wmsTrees);

Answer 1

You are requesting the feature in EPSG:4326 but your view is EPSG:3857, so you are zooming to somewhere within 180 meters of [0, 0]

If the server does not support EPSG:3857 requests you will need

 var features = new ol.format.GeoJSON().readFeatures(json, {dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection()});