Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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