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

https://slides.com/ceceliamartinez/debugging-javascript-apps-in-ci-cd

@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

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

https://tinyurl.com/recording-bug-reports

Recording automated tests

https://tinyurl.com/replay-automated-tests

GitHub Actions example