Building frontend development environment and web performance monitoring

Building frontend development environment and web performance monitoring

0580c8d5697963abaa4583e26ac16ac0?s=128

Hayato Koriyama

July 03, 2019
Tweet

Transcript

  1. 1 Building frontend development environment and web performance monitoring フロントエンド開発環境の構築とパフォーマンス監視

    Mercari x Merpay Frontend Tech Talk vol.2
  2. 2 (Hayato Koriyama) Mercari JP Web Platform DevOps @nekobato

  3. 3 What is Mercari JP Web DevOps Agenda Why Web

    DevOps? Building & Monitoring 02 03 01
  4. 4 What is Web DevOps? --

  5. 5 Mercari JP Web Re-architecture DevOps Members

  6. 6 Mercari JP Web Re-architecture Project Frontend + α (Backend

    + SET) Recent Mercari JP Web Team New technical stack
  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
  8. 8 ↓Frontend Engineer ↓UI Designer ↓BlockChain Engineer ↓Frontend Engineer Web

    DevOps
  9. 9 Mercari JP Web Frontend Stack

  10. 10 Mercari JP Web DevOps Stack microservice platform

  11. 11 Why DevOps?

  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
  13. 13 Why DevOps? To focus on development

  14. 14 Web Re-architecture DevOps

  15. 15 Web Re-architecture DevOps

  16. 16 Frontend DevOps Toolset E2E Performance Monitoring Frontend Error Tracking

    Build Development Environment
  17. 17 In CircleCI, workflow add a comment to each Pull

    Request DevTools
  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
  19. 19 Bundle Analyzer per Pull Request

  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
  21. 21 Check Modules License

  22. 22 Check Vulnerability

  23. 23 Monitoring

  24. 24 Calibreapp

  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
  26. 26 Alert from the outlier Calibreapp

  27. 27 Calibreapp - Caused from the new feature - Our

    network incident - Issues on Calibreapp This alert is...
  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
  29. 29 Calibreapp Carousel...

  30. 30 Sentry Error tracking service

  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
  32. 32 Sentry workflow 1. Sentry notification 2. On-call member create

    a ticket 3. Assign a member to ticket
  33. 33 Support & Knowledge for after release - On-call training

    for members - Describe Design Doc
  34. 34 Conclusion microservice platform