Building frontend development environment and web performance monitoring

Transcript

1. 1.

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

   Mercari x Merpay Frontend Tech Talk vol.2
2. 2.

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

3. 3.

   3 What is Mercari JP Web DevOps Agenda Why Web

   DevOps? Building & Monitoring 02 03 01
4. 4.

   4 What is Web DevOps? --

5. 5.

   5 Mercari JP Web Re-architecture DevOps Members

6. 6.

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

   + SET) Recent Mercari JP Web Team New technical stack
7. 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.

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

   DevOps
9. 9.

   9 Mercari JP Web Frontend Stack

10. 10.

    10 Mercari JP Web DevOps Stack microservice platform

11. 11.

    11 Why DevOps?

12. 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.

    13 Why DevOps? To focus on development

14. 14.

    14 Web Re-architecture DevOps

15. 15.

    15 Web Re-architecture DevOps

16. 16.

    16 Frontend DevOps Toolset E2E Performance Monitoring Frontend Error Tracking

    Build Development Environment
17. 17.

    17 In CircleCI, workflow add a comment to each Pull

    Request DevTools
18. 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.

    19 Bundle Analyzer per Pull Request

20. 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.

    21 Check Modules License

22. 22.

    22 Check Vulnerability

23. 23.

    23 Monitoring

24. 24.

    24 Calibreapp

25. 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.

    26 Alert from the outlier Calibreapp

27. 27.

    27 Calibreapp - Caused from the new feature - Our

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

    29 Calibreapp Carousel...

30. 30.

    30 Sentry Error tracking service

31. 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.

    32 Sentry workflow 1. Sentry notification 2. On-call member create

    a ticket 3. Assign a member to ticket
33. 33.

    33 Support & Knowledge for after release - On-call training

    for members - Describe Design Doc
34. 34.

    34 Conclusion microservice platform