$30 off During Our Annual Pro Sale. View Details »

Building frontend development environment and web performance monitoring

Building frontend development environment and web performance monitoring

Hayato Koriyama

July 03, 2019
Tweet

More Decks by Hayato Koriyama

Other Decks in Programming

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