What’s Wrong with My Simple React Docker Image

Initialize React.JS App

I was trying to create a simple react app following the tutorial from https://reactjs.org/docs/create-a-new-react-app.html. Well, it works on my computer — before and after I dockerize it. But when I run the docker image on the PPL server, it gives me an error:

events.js:174
      throw er; // Unhandled 'error' event
      ^
Error: ENOSPC: System limit for number of file watchers reached, watch '/my-app/public'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch(fs.js:1254:11)
    at createFsWatchInstance (/my-app/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/my-app/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/my-app/node_modules/chokidar/lib/nodefs-handler.js:232:14)
    at FSWatcher.NodeFsHandler._handleDir (/my-app/node_modules/chokidar/lib/nodefs-handler.js:422:19)
    at FSWatcher.<anonymous> (/my-app/node_modules/chokidar/lib/nodefs-handler.js:470:19)
    at FSWatcher.<anonymous> (/my-app/node_modules/chokidar/lib/nodefs-handler.js:475:16)
    at FSWatcher.oncomplete (fs.js:155:5)
Emittted 'error' event at:
    at FSWatcher._handleError (/my-app/node_modules/chokidar/index.js:260)
    at createFsWatchInstance (/my-app/node_modules/chokidar/lib/nodefs-handler.js:39:5)
    at setFsWatchListener (/my-app/node_modules/chokidar/lib/nodefs-handler.js:80:5)
    [... lines matching original stack trace ...]
    at FSReqWrap.oncomplete (fs.js:155:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-02-21T13_52_37_060Z-debug.log

Here’s the package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Hmm.. the first clue I noticed is the ENOSPC error code, which I can assume it’s an abbreviation of ERROR NO SPACE. So I checked out the available disk space:

All following console was run inside the docker container

root@9efcab7ce8c6:/# df -H
Filesystem      Size  Used Avail Use% Mounted on
overlay         317G  315G    0G 100% /
tmpfs            68M     0   68M   0% /dev
tmpfs            68G     0   68G   0% /sys/fs/cgroup
/dev/sdb1       317G   94G  207G  32% /etc/hosts
shm              68M     0   68M   0% /dev/shm

Wow, the disk is full! What should I remove for clean up the disk? I realized that there are plenty of unused images, so I deleted some and voila:

root@9efcab7ce8c6:/# df -H
Filesystem      Size  Used Avail Use% Mounted on
overlay         317G   94G  207G  32% /
tmpfs            68M     0   68M   0% /dev
tmpfs            68G     0   68G   0% /sys/fs/cgroup
/dev/sdb1       317G   94G  207G  32% /etc/hosts
shm              68M     0   68M   0% /dev/shm

Well, now there is plenty much disk available, but the error is still the same. So disk space mustn’t be the issue.

The next clue is about file watcher limit. I do some research about it — because I’m not familiar with this thing — and found out about inotify file watcher. This tool allows programs to monitor filesystem changes. The maximum amount of files being watched is controlled by the system. There are plenty of ways to check this limit:

root@9efcab7ce8c6:/# cat /proc/sys/fs/inotify/max_user_watches
8192
root@9efcab7ce8c6:/# sysctl fs.inotify.max_user_watches
fs.inotify.max_user_watches = 8192

I also found an issue opened at jest‘s GitHub repository. They said we just need to increase the limit, just like what I found another repo’s wiki page:

root@9efcab7ce8c6:/# echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

By default, if we run a shell on a docker container it runs as root user and it doesn’t have sudo command. So I installed it first. But it didn’t work:

sysctl: setting key 'fs.inotify.max_user_watches': Read-only file system

But then — thanks to our Scrum Master Syahrul Ardiansyah — I found a way out by adding a line on /etc/sysctl.conf:

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf

And voila! The error is gone! Previously, I’ve also tried to run a simple Next.JS app and there’s no issue. I suspect it’s because there are too many files to be watched on the React.JS app.

But there’s still something makes me confused. The next time I create a container and checked the inotify file watcher limit, it’s already had value 524288 😕.