The day I broke React Native

4th November 2022 - It was just a regular day for the "release crew" as we were approaching to prepare the first release candidate for React Native 0.71. Little did we know how an innocuous release could have triggered a domino effect resulting in failing builds for nearly every React Native developer out there.

With the wisdom of hindsight, we'll walk through what happened, what are our lessons learned and the lowlights of this incident. We'll have the opportunity to look through the internals of React Native, discover our incident-response culture, and learn how we're hardening our ecosystem to protect us against similar events in the future.

Join me as we revive this incident, and don't miss this opportunity to gain insights, be inspired, and embrace the lessons learned from the day I broke React Native.

Transcript

2. Photo by Herry Sutanto on Unsplash
3. Photo by Omar Prestwich on Unsplash
4. 🤨 🤯
5. Photo by Tim Dennert on Unsplash
6. Nicola Corti he/him @cortinico The day I broke React Native
7. What Why How This is going to be heavily Android Specific
8. What happened
9. W hat
10. W hat
11. RFC #508 W hat
12. W hat
13. This is Maven Central W hat
14. W
15. W hat
16. Why it happened
17. W hy
18. W hy
19. + W hy
20. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules } W hy
21. "com.facebook.react:react-native:+" W hy
22. com.facebook.react react-native + W hy Those are Maven GAV Coordinates Group Artifact Version
23. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules } W hy
24. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-nativ } W hy
25. W hy
26. W hy
27. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules } W hy
28. // le // DynamicVersion acebook.react:react-native:+" From node_modules W hy
29. $ tree node_modules/react-native/android W hy
30. $ tree node_modules/react-native/android node_modules/react-native/android └── com └── facebook └── react └── react-native ├── 0.68.7 │ ├── react-native-0.68.7-sources.jar │ ├── react-native-0.68.7.aar │ ├── react-native-0.68.7.module │ └── react-native-0.68.7.pom └── maven-metadata.xml W hy
31. $ tree node_modules/react-native/android node_modules/react-native/android └── com └── facebook └── react └── react-native ├── 0.68.7 │ ├── react-native-0.68.7-sources.jar │ ├── react-native-0.68.7-sources.jar.md5 │ ├── react-native-0.68.7-sources.jar.sha1 │ ├── react-native-0.68.7-sources.jar.sha256 │ ├── react-native-0.68.7-sources.jar.sha512 │ ├── react-native-0.68.7.aar │ ├── react-native-0.68.7.aar.md5 │ ├── react-native-0.68.7.aar.sha1 │ ├── react-native-0.68.7.aar.sha256 │ ├── react-native-0.68.7.aar.sha512 │ ├── react-native-0.68.7.module │ ├── react-native-0.68.7.module.md5 │ ├── react-native-0.68.7.module.sha1 │ ├── react-native-0.68.7.module.sha256 │ ├── react-native-0.68.7.module.sha512 │ ├── react-native-0.68.7.pom │ ├── react-native-0.68.7.pom.md5 │ ├── react-native-0.68.7.pom.sha1 │ ├── react-native-0.68.7.pom.sha256 │ └── react-native-0.68.7.pom.sha512 ├── maven-metadata.xml ├── maven-metadata.xml.md5 ├── maven-metadata.xml.sha1 ├── maven-metadata.xml.sha256 └── maven-metadata.xml.sha512 W hy
32. $ tree node_modules/react-native/android node_modules/react-native/android └── com └── facebook └── react └── react-native ├── 0.68.7 │ ├── react-native-0.68.7-sources.jar │ ├── react-native-0.68.7-sources.jar.md5 │ ├── react-native-0.68.7-sources.jar.sha1 │ ├── react-native-0.68.7-sources.jar.sha256 │ ├── react-native-0.68.7-sources.jar.sha512 │ ├── react-native-0.68.7.aar │ ├── react-native-0.68.7.aar.md5 │ ├── react-native-0.68.7.aar.sha1 │ ├── react-native-0.68.7.aar.sha256 │ ├── react-native-0.68.7.aar.sha512 │ ├── react-native-0.68.7.module │ ├── react-native-0.68.7.module.md5 │ ├── react-native-0.68.7.module.sha1 │ ├── react-native-0.68.7.module.sha256 │ ├── react-native-0.68.7.module.sha512 │ ├── react-native-0.68.7.pom │ ├── react-native-0.68.7.pom.md5 │ ├── react-native-0.68.7.pom.sha1 │ ├── react-native-0.68.7.pom.sha256 │ └── react-native-0.68.7.pom.sha512 ├── maven-metadata.xml ├── maven-metadata.xml.md5 ├── maven-metadata.xml.sha1 ├── maven-metadata.xml.sha256 └── maven-metadata.xml.sha512 W hy
33. How we fixed it
34. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules } H ow
35. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:0.68.7" } H ow
36. // android/app/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:0.68.7" } // node_modules/react-native-reanimated/android/build.gradle dependencies { // noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" } H ow
37. H ow
38. H ow
39. H ow
40. Lessons Learned
41. Release Support Window Lessons
42. Release Support Window Lessons github.com/reactwg/react-native-releases/
43. Incident Response Time SEV 0 SEV 1 SEV 2 SEV 3 SEV 4 Lessons Company-level crisis Red alert! All Hands on Deck! Major problem, resolution is very high priority. Significant problem, resolution is moderate or high priority. "A heads up"
44. Libraries best practices Lessons
45. It was a Friday… Lessons
46. Lessons
47. …and airplane wifi didn’t really work Photo by Tim Dennert on Unsplash
48. reactnative.dev/blog/2023/01/27/71rc1-android-outage-postmortem
49. Nicola Corti @cortinico Thank You