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

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