Debugging JavaScript Apps in CI/CD
Cecelia Martinez
Community Lead, Replay.io
@ceceliacreates
Cecelia Martinez
- Community Lead, Replay.io
- Previously @ Cypress.io
- GitHub Stars Program
- Women Who Code Front End
- Out in Tech Atlanta
@ceceliacreates
@ceceliacreates
Agenda
- Content Presentation
- Anatomy of a CI/CD pipeline
- Debugging process
- Causes of CI/CD failures
- Break
- Replay Practical Exercise
- Replay for Debugging
- GitHub Actions workflow
- Debugging a failure
@ceceliacreates
Procedures
- Use Discord thread to ask questions
- I will check thread frequently throughout presentation
- Raise hand in Zoom if there are technical or urgent issues
- Respect the event Code of Conduct
@ceceliacreates
Anatomy of a CI/CD Pipeline
Workflow trigger
Environment(s)
provisioning
Dependency
installation
Code checkout
Pre-build checks
Application build
Application tests
- Unit
- Component
- Integration/e2e
- Visual
- Performance
Artifact(s) upload
- Local artifacts
- External artifacts
Deployment
@ceceliacreates
Debugging Process
Isolate initial point of failure
Confirm expected behavior
Review artifacts
- Logs
- Failed test artifacts
- Screenshots
- Videos
- Diffs
- Replays
- Enable debug logs
Identify points of divergence
Generate hypotheses
Trace failure to root cause
- Application-related
- Environment-related
- Pipeline-related
Test and validate solution
@ceceliacreates
Causes of CI/CD Failures
Workflow trigger
- Trigger criteria
- Events
- Conditions
- Branch
- Syntax error
Environment provisioning
- Resource availability (queueing)
- Images
- Provisioning requirements
- Security
- Data
- Resource management
Dependency installation
- Failed installation
- Dependency version
- Dependency compatibility
- Pre-installed software for OS
Code checkout
- Authentication
- Commit or branch changes
Pre-build checks
- Type checks
- Linting checks
- Security checks
Application build
- Machine resources
- Missing or incorrect configuration
- Dependency failure
- Environment variables
- Build cache
Application tests
- True test failure
- Test code issue
- Test data issue
- Test flakiness
Artifact(s) upload
- Incorrect error handling
- Write permissions
- Directory location
Deployment
- Permissions
- Deployment size
- Host issues
@ceceliacreates
Break
@ceceliacreates
Replay for Debugging
Manual recording process
Recording automated tests
GitHub Actions example
- Fork https://github.com/ceceliacreates/floating-ui
- Sign up at https://app.replay.io
- Create a team
- Generate API Key
- Add API Key to GitHub Secret
- Run 'Update Visual Snapshots' workflow
- Make breaking change PR
- Review workflow log and replay of failed test
Debugging JavaScript Apps in CI/CD
By Cecelia Martinez
