6

I have a React web application that allows Image uploads.

After performing a fetch POST request for multiple images (in this case 6) to my API, the browser refreshes itself and reloads the current page. It is worth noting that this application allows images to be cropped and so for every image the user uploads there is a second image (cropped) to upload. So the above 6 images result in 12 POST requests.

The refresh behavior is INCONSISTENT and difficult to reproduce. I have inserted breakpoints within the function this behavior occurs. Using the chrome debugger tools I have stepped through the flow and found that the refresh occurs after this call.

this.ws.onmessage = function(e) {
    debug('message event', e.data);
    self.emit('message', e.data);
};

It is located inside the file websocket.js within the Library node_modules/react-dev-tools/node_modules/socketjs-client/lib/transport/websocket.js

I have narrowed it down to this file and ruled out any issues from my project codebase.

My theory is that the behavior of my application is triggering an external listener/case which is causing a full browser refresh.

I see that the file in question is inside react-dev-tools and thought that removing this module could solve the problem, however, this occurs in my production environment also and so I feel removing this could break the build.

Any thoughts as to better my investigation or potential solutions please are helpful.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
Vince
  • 691
  • 1
  • 8
  • 18

1 Answers1

0

I'm not sure how you're running your environments, but maybe this will help...

I ran into this exact issue and it took me 3 days (too long) to narrow it to nodemon (in development) and pm2 (in production). I'm not sure how you're serving your application/images, but for me, any time a new file was added, the service was intermittently restarted (sometimes it uploaded, sometimes it was cut off).

For development, I added a nodemon.json config file at the application root (nodemon app.js --config nodemon.json):

{   
    "ignore": ["uploads"] 
}

For production, I created a prod.json at the application root and ran pm2 start prod.json:

{
  "apps" : [{
    "name"        : "app-name",
    "ignore_watch" : ["uploads"],
    "script"      : "./app.js",
    "env": {
      "NODE_ENV": "production"
    }
  }]
}

If you're using neither of the above packages, then I'd suggest looking into the possibility of reconfiguring how you're storing and serving images to the application (as a last resort).

Matt Carlotta
  • 18,972
  • 4
  • 39
  • 51
  • not sure how the above would work with my setup. It's pretty straightforward workflow. Sends base64 encoded string to API - API creates a buffer and puts the image in desired location in file system. SETUP: React front end, NodeJS and Mongo Backend. Hosted on AWS lightsail. – Vince Oct 18 '18 at 03:33
  • Not sure if multiple large base64 is causing the refresh or not. Sort of in the dark at the moment – Vince Oct 18 '18 at 03:43
  • Hmmm, do me a favor and create a stripped down WORKING version of your app on github (only include anything related to uploading images/retrieval from the front and back -- or anything you think might be causing the problem). I'll see if I can replicate and/or possibly fix the refresh issue. – Matt Carlotta Oct 18 '18 at 04:46
  • I have re-written my upload function from Promise.al(promises) to instead iterate a for loop and execute each fetch request using the await functionality. This seems to have solved the issue locally, I am going to wait and see how this performs live in production. – Vince Oct 19 '18 at 02:45