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

The day I broke React Native

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.

Nicola Corti

November 26, 2023
Tweet

More Decks by Nicola Corti

Other Decks in Programming

Transcript

  1. Photo by Herry Sutanto on Unsplash

    View full-size slide

  2. Photo by Omar Prestwich on Unsplash

    View full-size slide

  3. ๐Ÿคจ
    ๐Ÿคฏ

    View full-size slide

  4. Photo by Tim Dennert on Unsplash

    View full-size slide

  5. Nicola Corti
    he/him
    @cortinico
    The day I broke
    React Native

    View full-size slide

  6. What
    Why
    How
    This is going to be heavily Android Specific

    View full-size slide

  7. What happened

    View full-size slide

  8. RFC #508
    W
    hat

    View full-size slide

  9. This is Maven Central
    W
    hat

    View full-size slide

  10. Why it happened

    View full-size slide

  11. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-native:+"
    //
    From node_modules

    }

    W
    hy

    View full-size slide

  12. "com.facebook.react:react-native:+"
    W
    hy

    View full-size slide

  13. com.facebook.react react-native +
    W
    hy
    Those are Maven GAV Coordinates
    Group Artifact Version

    View full-size slide

  14. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-native:+"
    //
    From node_modules

    }

    W
    hy

    View full-size slide

  15. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-nativ
    }

    W
    hy

    View full-size slide

  16. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-native:+"
    //
    From node_modules

    }

    W
    hy

    View full-size slide

  17. //
    le

    //
    DynamicVersion

    acebook.react:react-native:+" From node_modules

    W
    hy

    View full-size slide

  18. $ tree node_modules/react-native/android
    W
    hy

    View full-size slide

  19. $ 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

    View full-size slide

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

    View full-size slide

  21. $ 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

    View full-size slide

  22. How we fixed it

    View full-size slide

  23. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-native:+"
    //
    From node_modules

    }

    H
    ow

    View full-size slide

  24. //
    android/app/build.gradle

    dependencies {

    //
    noinspection GradleDynamicVersion

    implementation "com.facebook.react:react-native:0.68.7"

    }

    H
    ow

    View full-size slide

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

    View full-size slide

  26. Lessons Learned

    View full-size slide

  27. Release Support Window
    Lessons

    View full-size slide

  28. Release Support Window
    Lessons
    github.com/reactwg/react-native-releases/

    View full-size slide

  29. 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"

    View full-size slide

  30. Libraries best practices
    Lessons

    View full-size slide

  31. It was a Fridayโ€ฆ
    Lessons

    View full-size slide

  32. โ€ฆand airplane wifi didnโ€™t really work
    Photo by Tim Dennert on Unsplash

    View full-size slide

  33. reactnative.dev/blog/2023/01/27/71rc1-android-outage-postmortem

    View full-size slide

  34. Nicola Corti
    @cortinico
    Thank You

    View full-size slide