Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

브라우저싱크 Error: ENOSPC: System limit for number of file watchers reached 에러 대처

max_user_watches를 늘리는 게 능사는 아니다. 감시 파일 개수를 줄일 수도 있다.

로컬에서 브라우저싱크를 돌리는데 아래와 같은 에러가 발생하면서 작동을 하지 않았다.

[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.16:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Watching files...
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/my-project-folder/vendor/myclabs/deep-copy/.github'
    at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
    at Object.watch (node:fs:2247:34)
    at createFsWatchInstance (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:119:15)
    at setFsWatchListener (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:166:15)
    at NodeFsHandler._watchWithNodeFs (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:331:14)
    at NodeFsHandler._handleDir (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:559:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async NodeFsHandler._addToNodeFs (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:609:16)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/my-project-folder/node_modules/chokidar/index.js:647:10)
    at NodeFsHandler._addToNodeFs (/my-project-folder/node_modules/chokidar/lib/nodefs-handler.js:637:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/my-project-folder/vendor/myclabs/deep-copy/.github',
  filename: '/my-project-folder/vendor/myclabs/deep-copy/.github'
}

핵심 에러 문장은 Error: ENOSPC: System limit for number of file watchers reached인데, 파일 변경 감시자가 최대치까지 가서 더이상 파일을 감시할 수 없다는 말이다. ENOSPC는 nodejs에서 드라이브에 공간이 없다는 의미로 사용되는 에러 코드라고 한다. 이 경우는 드라이브는 아니니, 뭔가 공간이 없으면 그냥 저 에러 코드를 사용하곤 하나보다.

브라우저싱크는 파일이 변경되는지를 감시하고 있다가 파일 변경이 감지되면 브라우저를 새로고침하는 역할을 하는데, 감시할 파일이 너무 많아서 뻗어 버린 것이다.

단순한 해결책

이 에러로 검색을 해 보면 아래 명령으로 파일 감시 숫자를 최대치까지 키워 해결하라고 한다.

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

fs는 file system의 약자다. tee -a는 파일 끝에 문자열을 더하는 명령이다.

그런데 이게 능사일까? 내 심지어 경우에 이미 저 조처를 취해둔 뒤였다.

감시 대상을 제한하라

라라벨에서도 브라우저싱크를 사용하는데, 최근엔 이런 에러를 만난 적이 없다. 그런데 지금 이런 에러를 만난 프로젝트는 라라벨이 아니라 워드프레스였다. 브라우저싱크가 너무 많은 파일을 감시하도록 설정한 게 아닐까 하는 생각이 들었다. 불필요한 파일을 너무 많이 감시하면 메모리도 많이 든다.

설정을 살펴 보니 웬걸, 내가 손댈 일이 없는 node_modulesvendor까지 감시를 하게 설정이 돼 있었다. 아래가 감시 대상을 규정한 브라우저싱크 설정이다.

mix.browserSync({
   proxy: 'ws-dev.localhost',
   files: [
      '**/*.php',
      '**/*.js',
      '**/*.css',
   ]
});

이걸 아래처럼 고쳐서 감시 대상을 제한했다. PHP 파일은 테마 폴더로 제한했고, js는 컴파일 결과 폴더와 구 js만 감시하게 제한했다. 그리고 CSS도 컴파일 결과만 감시하게 제한했다.

mix.browserSync({
   proxy: 'ws-dev.localhost',
   files: [
      'wp-content/themes/ws/**/*.php',
      'wp-content/themes/ws/build/*.js',
      'wp-content/themes/ws/js/*.js',
      'wp-content/themes/ws/build/*.css',
   ]
});

이렇게 하니 문제가 해결됐다.

기타 – 메모리 사용량, 프로세서 확인

max_user_watches=524288이 최댓값인데, 감시자 하나당 사용하는 메모리가 1080바이트(64비트 시스템에서)라서 최댓값까지 감시자를 사용하면 메모리를 540MB 사용하게 된다. 32비트 시스템이라면 270MB.

어떤 프로세스가 파일 감시자를 사용하고 있는지 확인하려면 아래 명령을 사용한다. root 사용자로 들어가서 실행해야 한다.

find /proc/*/fd -lname anon_inode:inotify |
cut -d/ -f3 |
xargs -I '{}' -- ps --no-headers -o '%p %U %c' -p '{}' |
uniq -c |
sort -nr

참고

How To Fix – Error “ENOSPC: System Limit for Number of File Watchers Reached”?

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다