Abstract Syntax Tree(AST)로 Workflows 코드를 시각 다이어그램으로 바꾸는 방법

Cloudflare Workflows는 상태를 오래 유지하며 단계별 실행, 재시도, 병렬 처리를 지원하는 실행 엔진이다. 하지만 Workflows는 JSON이나 YAML이 아니라 코드 자체로 작성되기 때문에, 실제 실행 순서와 분기 구조를 다이어그램으로 복원하려면 정적 분석이 필요했다.

이를 위해 Cloudflare는 배포 시점에 스크립트를 가져와 AST(abstract syntax tree) 로 파싱하고, Promise와 await 관계를 추적해 어떤 작업이 병렬로 실행되고 무엇이 기다려지는지 판단했다. 이후 내부 서비스가 WorkflowEntrypoint와 step 호출을 그래프로 변환해 대시보드에 시각화했다.

핵심 난제는 난독화된 minified JavaScript였다. TypeScript로는 읽기 쉬워도, 번들러와 설정에 따라 esbuild, rspack, vite 등으로 압축된 결과는 형태가 크게 달라졌기 때문에, Cloudflare는 OXC의 oxc-parser 를 선택해 빠르고 정확하게 AST를 생성했다. 처음에는 Rust 컨테이너와 Cloudflare Queue로 검증했고, 이후 Rust Worker 로 옮겨 웹어셈블리(Wasm) 기반으로 처리했다.

다이어그램 생성에서는 함수와 step의 관계를 놓치지 않는 것이 중요했다. 예를 들어 함수가 다른 함수를 호출하고 그 내부에서 step이 실행되면, 직접 step을 호출하지 않은 상위 함수도 그래프에 포함되어야 한다. 반대로 step과 무관한 함수는 최종 출력에서 제거한다.

지원해야 하는 패턴도 다양했다.

• for...of, while, map, forEach 같은 반복문
• if / else if / else, switch / case, 삼항 연산자 같은 분기
• nullish coalescing, try/catch/finally, Promise.all 같은 제어 흐름
• 함수 내부/외부, 여러 모듈, 이름 변경, 중첩 구조까지 포함한 다양한 호출 형태

결국 목표는 개발자가 복잡한 내부 구현을 몰라도 무엇이 병렬인지, 어디서 막히는지, 어떤 step이 실제로 연결되는지 한눈에 볼 수 있는 간결한 시각화를 제공하는 것이었다. Cloudflare는 현재 이 다이어그램 기능을 beta로 제공하며, 더 정확한 표현을 위해 계속 개선할 계획이다.