Merge pull request #670 from bugsnag/expo-v36-support

Expo v36 support

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 ## TBD
+
+### Added
+- (expo): Add support for breaking changes in Expo SDK v36 [#670](https://github.com/bugsnag/bugsnag-js/pull/670)
+- (expo-cli): Choose a compatible version of @bugnsnag/expo for SDK v33-35 [#670](https://github.com/bugsnag/bugsnag-js/pull/670)
+
+### Fixed
 - (plugin-network-breadcrumbs): Fixes the `window.fetch` monkey-patch to also accept `Request`. [#662](https://github.com/bugsnag/bugsnag-js/pull/662)
 
 ## 6.4.3 (2019-10-21)

dockerfiles/Dockerfile.expo-android-builder

@@ -14,7 +14,7 @@ WORKDIR /app/test/expo/features/fixtures/test-app
 RUN mkdir -p /app/test/expo/features/fixures/build
 
 RUN yarn global add gulp-cli node-gyp
-RUN yarn add bunyan rsync turtle-cli@0.11.1
+RUN yarn add bunyan rsync turtle-cli@0.13.1
 
 RUN node_modules/.bin/turtle setup:android
 
@@ -29,4 +29,4 @@ CMD EXPO_ANDROID_KEYSTORE_PASSWORD=password \
     --keystore-alias password \
     --output /app/test/expo/features/fixtures/build/output.apk \
     --release-channel $EXPO_RELEASE_CHANNEL \
-    --type apk
+    --type apk

packages/delivery-expo/network-status.js

@@ -1,4 +1,4 @@
-const { NetInfo } = require('react-native')
+const NetInfo = require('@react-native-community/netinfo')
 
 /*
  * This class provides the following:
@@ -24,11 +24,11 @@ module.exports = class NetworkStatus {
 
   _watch () {
     // get the initial status
-    NetInfo.isConnected.fetch().then(isConnected => {
-      this._update(isConnected)
+    NetInfo.fetch().then(state => {
+      this._update(state.isConnected)
       // then listen for subsequent changes
-      NetInfo.isConnected.addEventListener('connectionChange', isConnected => {
-        this._update(isConnected)
+      NetInfo.addEventListener(state => {
+        this._update(state.isConnected)
       })
     })
   }

packages/delivery-expo/package.json

@@ -21,6 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "@bugsnag/core": "^6.4.1",
+    "@react-native-community/netinfo": "^5.0.0",
     "expo-file-system": "^6.0.2"
   },
   "devDependencies": {

packages/delivery-expo/test/network-status.test.js

@@ -6,13 +6,9 @@ describe('delivery: expo -> NetworkStatus', () => {
   it('should update the value of isConnected when it changes', done => {
     const listeners = []
     const NetworkStatus = proxyquire('../network-status', {
-      'react-native': {
-        NetInfo: {
-          isConnected: {
-            addEventListener: (event, fn) => { listeners.push({ event, fn }) },
-            fetch: () => new Promise(resolve => setTimeout(() => resolve(true), 1))
-          }
-        }
+      '@react-native-community/netinfo': {
+        addEventListener: (fn) => { listeners.push(fn) },
+        fetch: () => new Promise(resolve => setTimeout(() => resolve({ isConnected: true }), 1))
       }
     })
     const ns = new NetworkStatus()
@@ -24,8 +20,7 @@ describe('delivery: expo -> NetworkStatus', () => {
       expect(ns.isConnected).toBe(true)
       // then it should start listening
       expect(listeners.length).toBe(1)
-      expect(listeners[0].event).toBe('connectionChange')
-      listeners[0].fn(false)
+      listeners[0]({ isConnected: false })
       // check that the change we sent updated the value
       expect(ns.isConnected).toBe(false)
       done()
@@ -35,13 +30,9 @@ describe('delivery: expo -> NetworkStatus', () => {
   it('should alert any _watchers when the value of isConnected changes', done => {
     const listeners = []
     const NetworkStatus = proxyquire('../network-status', {
-      'react-native': {
-        NetInfo: {
-          isConnected: {
-            addEventListener: (event, fn) => { listeners.push({ event, fn }) },
-            fetch: () => new Promise(resolve => setTimeout(() => resolve(true), 1))
-          }
-        }
+      '@react-native-community/netinfo': {
+        addEventListener: (fn) => { listeners.push(fn) },
+        fetch: () => new Promise(resolve => setTimeout(() => resolve({ isConnected: true }), 1))
       }
     })
     const ns = new NetworkStatus()
@@ -60,9 +51,9 @@ describe('delivery: expo -> NetworkStatus', () => {
     })
 
     setTimeout(() => {
-      listeners[0].fn(false)
+      listeners[0]({ isConnected: false })
       setTimeout(() => {
-        listeners[0].fn(true)
+        listeners[0]({ isConnected: true })
       }, 1)
     }, 2)
   })

packages/expo-cli/commands/install.js

@@ -69,14 +69,27 @@ const selectVersion = async (dir) => {
   try {
     const pkg = JSON.parse(await promisify(readFile)(join(dir, 'package.json'), 'utf8'))
     const expoVersion = pkg.dependencies.expo
+
+    let message = 'If you want the latest version of @bugsnag/expo hit enter, otherwise type the version you want'
+    let defaultVersion = 'latest'
+
+    // help select compatible versions of @bugsnag/expo for older expo releases
     const isPre33 = (expoVersion && !semver.gte(semver.minVersion(expoVersion), '33.0.0'))
+    const isPre36 = (expoVersion && !semver.gte(semver.minVersion(expoVersion), '36.0.0'))
+
+    if (isPre33) {
+      message = 'It looks like you’re using a version of Expo SDK <33. The last version of Bugsnag that supported your version of Expo is v6.3.0'
+      defaultVersion = '6.3.0'
+    } else if (isPre36) {
+      message = 'It looks like you’re using a version of Expo SDK <36. The last version of Bugsnag that supported your version of Expo is v6.4.1'
+      defaultVersion = '6.4.1'
+    }
+
     const { version } = await prompts({
       type: 'text',
       name: 'version',
-      message: isPre33
-        ? 'It looks like you’re using a version of Expo SDK <33. The latest version of Bugsnag works with SDK >= 33 so it’s recommended that you install the last version of Bugsnag that supported your Expo version: v6.3.0'
-        : 'If you want the latest version of @bugsnag/expo hit enter, otherwise type the version you want',
-      initial: isPre33 ? '6.3.0' : 'latest',
+      message: message,
+      initial: defaultVersion,
       validate: str => {
         if (str === 'latest') return true
         if (semver.valid(str)) return true

packages/expo/src/notifier.js

@@ -26,6 +26,11 @@ const plugins = [
 
 const bugsnagReact = require('@bugsnag/plugin-react')
 
+// The NetInfo module makes requests to this URL to detect if the device is connected
+// to the internet. We don't want these requests to be recorded as breadcrumbs.
+// see https://github.com/react-native-community/react-native-netinfo/blob/d39b18c61e220d518d8403b6f4f4ab5bcc8c973c/src/index.ts#L16
+const NET_INFO_REACHABILITY_URL = 'https://clients3.google.com/generate_204'
+
 module.exports = (opts) => {
   // handle very simple use case where user supplies just the api key as a string
   if (typeof opts === 'string') opts = { apiKey: opts }
@@ -55,7 +60,8 @@ module.exports = (opts) => {
         bugsnag.use(pl, () => [
           bugsnag.config.endpoints.notify,
           bugsnag.config.endpoints.sessions,
-          Constants.manifest.logUrl
+          Constants.manifest.logUrl,
+          NET_INFO_REACHABILITY_URL
         ])
         break
       default:

packages/plugin-react-native-connectivity-breadcrumbs/connectivity.js

@@ -1,19 +1,14 @@
-const { NetInfo } = require('react-native')
+const NetInfo = require('@react-native-community/netinfo')
 
 module.exports = {
   init: client => {
     const explicitlyDisabled = client.config.connectivityBreadcrumbsEnabled === false
     const implicitlyDisabled = client.config.autoBreadcrumbs === false && client.config.connectivityBreadcrumbsEnabled !== true
     if (explicitlyDisabled || implicitlyDisabled) return
 
-    NetInfo.addEventListener('connectionChange', ({ type, effectiveType }) => {
+    NetInfo.addEventListener(({ isConnected, isInternetReachable, type }) => {
       client.leaveBreadcrumb(
-        `Connectivity changed`,
-        {
-          type,
-          effectiveType
-        },
-        'state'
+        `Connectivity changed`, { isConnected, isInternetReachable, type }, 'state'
       )
     })
   },

packages/plugin-react-native-connectivity-breadcrumbs/package.json

@@ -19,6 +19,9 @@
   },
   "author": "Bugsnag",
   "license": "MIT",
+  "dependencies": {
+    "@react-native-community/netinfo": "^5.0.0"
+  },
   "devDependencies": {
     "@bugsnag/core": "^6.4.1",
     "jasmine": "3.1.0",

packages/plugin-react-native-connectivity-breadcrumbs/test/connectivity.test.js

@@ -6,15 +6,15 @@ const Client = require('@bugsnag/core/client')
 const VALID_NOTIFIER = { name: 't', version: '0', url: 'http://' }
 
 describe('plugin: react native connectivity breadcrumbs', () => {
-  it('should create a breadcrumb when the NetInfo#connectionChange event happens', () => {
+  it('should create a breadcrumb when NetInfo events happen', () => {
     let _cb
     const NetInfo = {
-      addEventListener: (type, fn) => {
+      addEventListener: (fn) => {
         _cb = fn
       }
     }
     const plugin = proxyquire('../', {
-      'react-native': { NetInfo }
+      '@react-native-community/netinfo': NetInfo
     })
 
     const client = new Client(VALID_NOTIFIER)
@@ -25,17 +25,17 @@ describe('plugin: react native connectivity breadcrumbs', () => {
     expect(typeof _cb).toBe('function')
     expect(client.breadcrumbs.length).toBe(0)
 
-    _cb({ type: 'wifi', effectiveType: '3g' })
+    _cb({ type: 'wifi', isConnected: true, isInternetReachable: true })
     expect(client.breadcrumbs.length).toBe(1)
     expect(client.breadcrumbs[0].type).toBe('state')
     expect(client.breadcrumbs[0].name).toBe('Connectivity changed')
-    expect(client.breadcrumbs[0].metaData).toEqual({ type: 'wifi', effectiveType: '3g' })
+    expect(client.breadcrumbs[0].metaData).toEqual({ type: 'wifi', isConnected: true, isInternetReachable: true })
 
-    _cb({ type: 'none', effectiveType: 'unknown' })
+    _cb({ type: 'none', isConnected: false, isInternetReachable: false })
     expect(client.breadcrumbs.length).toBe(2)
     expect(client.breadcrumbs[1].type).toBe('state')
     expect(client.breadcrumbs[1].name).toBe('Connectivity changed')
-    expect(client.breadcrumbs[1].metaData).toEqual({ type: 'none', effectiveType: 'unknown' })
+    expect(client.breadcrumbs[1].metaData).toEqual({ type: 'none', isConnected: false, isInternetReachable: false })
   })
 
   it('should not be enabled when autoBreadcrumbs=false', () => {
@@ -46,7 +46,7 @@ describe('plugin: react native connectivity breadcrumbs', () => {
       }
     }
     const plugin = proxyquire('../', {
-      'react-native': { NetInfo }
+      '@react-native-community/netinfo': NetInfo
     })
 
     const client = new Client(VALID_NOTIFIER)
@@ -60,12 +60,12 @@ describe('plugin: react native connectivity breadcrumbs', () => {
   it('should not be enabled when connectivityBreadcrumbsEnabled=false', () => {
     let _cb
     const NetInfo = {
-      addEventListener: (type, fn) => {
+      addEventListener: (fn) => {
         _cb = fn
       }
     }
     const plugin = proxyquire('../', {
-      'react-native': { NetInfo }
+      '@react-native-community/netinfo': NetInfo
     })
 
     const client = new Client(VALID_NOTIFIER)
@@ -79,12 +79,12 @@ describe('plugin: react native connectivity breadcrumbs', () => {
   it('should be enabled when autoBreadcrumbs=false and connectivityBreadcrumbsEnabled=true', () => {
     let _cb
     const NetInfo = {
-      addEventListener: (type, fn) => {
+      addEventListener: (fn) => {
         _cb = fn
       }
     }
     const plugin = proxyquire('../', {
-      'react-native': { NetInfo }
+      '@react-native-community/netinfo': NetInfo
     })
 
     const client = new Client(VALID_NOTIFIER)

test/expo/features/auto_breadcrumbs.feature

@@ -105,8 +105,8 @@ Scenario: Network breadcrumbs are captured by default
   And the exception "errorClass" equals "Error"
   And the exception "message" equals "defaultNetworkBreadcrumbsBehaviour"
   And the event has a "request" breadcrumb named "XMLHttpRequest succeeded"
-  And the event "breadcrumbs.0.metaData.status" equals 200
-  And the event "breadcrumbs.0.metaData.request" equals "GET http://postman-echo.com/get"
+  And the event "breadcrumbs.1.metaData.status" equals 200
+  And the event "breadcrumbs.1.metaData.request" equals "GET http://postman-echo.com/get"
 
 Scenario: Network breadcrumbs can be disabled explicitly
   Given the element "networkBreadcrumbs" is present
@@ -138,4 +138,4 @@ Scenario: Network breadcrumbs overrides auto-breadcrumbs
   And the exception "message" equals "overrideNetworkBreadcrumbsBehaviour"
   And the event has a "request" breadcrumb named "XMLHttpRequest succeeded"
   And the event "breadcrumbs.0.metaData.status" equals 200
-  And the event "breadcrumbs.0.metaData.request" equals "GET http://postman-echo.com/get"
+  And the event "breadcrumbs.0.metaData.request" equals "GET http://postman-echo.com/get"

test/expo/features/error_boundary.feature

@@ -9,7 +9,7 @@ Scenario: A render error is captured by an error boundary
   When I click the element "errorBoundaryButton"
   Then I wait to receive a request
   And the exception "errorClass" equals "Error"
-  And the exception "message" starts with "Error: An error has occurred in Buggy component!"
+  And the exception "message" starts with "An error has occurred in Buggy component!"
   And the event "metaData.react.componentStack" is not null
 
 @skip_android_7 @skip_android_8
@@ -18,4 +18,4 @@ Scenario: When a render error occurs, a fallback is presented
   When I click the element "errorBoundaryFallbackButton"
   Then I wait to receive a request
   And the exception "errorClass" equals "Error"
-  And the element "errorBoundaryFallback" is present
+  And the element "errorBoundaryFallback" is present

test/expo/features/fixtures/test-app/app.json

@@ -3,7 +3,7 @@
     "name": "Test Fixture",
     "slug": "test-fixture",
     "privacy": "unlisted",
-    "sdkVersion": "34.0.0",
+    "sdkVersion": "36.0.0",
     "platforms": [
       "ios",
       "android"