Building frontend development environment and web performance monitoring

Transcript

1. 1
   Building frontend development environment
   and web performance monitoring
   フロントエンド開発環境の構築とパフォーマンス監視
   Mercari x Merpay Frontend Tech Talk vol.2
   

   View Slide

2. 2
   (Hayato Koriyama)
   Mercari JP
   Web Platform
   DevOps
   @nekobato
   

   View Slide

3. 3
   What is Mercari JP Web DevOps
   Agenda
   Why Web DevOps?
   Building & Monitoring
   02
   03
   01
   

   View Slide

4. 4
   What is Web DevOps?
   --
   

   View Slide

5. 5
   Mercari JP Web Re-architecture DevOps
   Members
   

   View Slide

6. 6
   Mercari JP Web Re-architecture Project
   Frontend
   +
   α (Backend + SET)
   Recent Mercari JP Web Team New technical stack
   

   View Slide

7. 7
   Mercari JP Web Re-architecture Project
   ViewDev (Frontend)
   +
   Backend
   +
   DevOps
   SSR Frontend
   GraphQL Server
   SSR Backend
   Server
   Session Server
   microservices
   Web Gateway
   New web team
   

   View Slide

8. 8
   ↓Frontend Engineer
   ↓UI Designer
   ↓BlockChain Engineer
   ↓Frontend Engineer
   Web DevOps
   

   View Slide

9. 9
   Mercari JP Web Frontend Stack
   

   View Slide

10. 10
    Mercari JP Web DevOps Stack
    microservice platform
    

    View Slide

11. 11
    Why DevOps?
    

    View Slide

12. 12
    Developers working on...
    - Develop features
    - Make local development environments
    - Configure error tracking
    - Configure logging system
    - Configure performance monitoring
    - Maintenance CircleCI jobs
    - Make deploy pipeline
    - …and so on
    

    View Slide

13. 13
    Why DevOps?
    To focus on
    development
    

    View Slide

14. 14
    Web Re-architecture DevOps
    

    View Slide

15. 15
    Web Re-architecture DevOps
    

    View Slide

16. 16
    Frontend DevOps Toolset
    E2E Performance
    Monitoring
    Frontend Error
    Tracking
    Build
    Development
    Environment
    

    View Slide

17. 17
    In CircleCI, workflow add a comment to each Pull Request
    DevTools
    

    View Slide

18. 18
    Storybook static files per Pull Request
    https://[ internal Website ]/[Repository name]/[Pull Request Number]/storybook
    AWS S3
    Push Commit
    Build Storybook
    Upload Assets
    

    View Slide

19. 19
    Bundle Analyzer per Pull Request
    

    View Slide

20. 20
    Bundle Analyzer per Pull Request
    https://[ internal Website ]/[Repository name]/[Pull Request Number]/analyze/server
    https://[ internal Website ]/[Repository name]/[Pull Request Number]/analyze/client
    AWS S3
    Push Commit
    Build Storybook
    Upload Assets
    

    View Slide

21. 21
    Check Modules License
    

    View Slide

22. 22
    Check Vulnerability
    

    View Slide

23. 23
    Monitoring
    

    View Slide

24. 24
    Calibreapp
    

    View Slide

25. 25
    Calibreapp
    - First Meaningful Paint
    - Speed Index
    Alert threshold: 20% slower than recent Mercari JP Web
    (measured at 2019-02-18)
    https://timkadlec.com/2014/01/fast-enough/
    SLI/SLO
    

    View Slide

26. 26
    Alert from the outlier
    Calibreapp
    

    View Slide

27. 27
    Calibreapp
    - Caused from the new feature
    - Our network incident
    - Issues on Calibreapp
    This alert is...
    

    View Slide

28. 28
    Calibreapp
    - Snapshot per hour
    - Extract median of recent 14 snapshots
    - Alert if the median exceeds the threshold
    Extract median of recent 14 snapshots
    

    View Slide

29. 29
    Calibreapp
    Carousel...
    

    View Slide

30. 30
    Sentry
    Error tracking service
    

    View Slide

31. 31
    Sentry
    - Sentry ⇔ JIRA Issue Link
    - Slack alert notification
    - An issue is first seen
    - An issue is seen more than N times in 1m
    

    View Slide

32. 32
    Sentry workflow
    1. Sentry notification
    2. On-call member create a ticket
    3. Assign a member to ticket
    

    View Slide

33. 33
    Support & Knowledge for after release
    - On-call training for members
    - Describe Design Doc
    

    View Slide

34. 34
    Conclusion
    microservice platform
    

    View Slide