Network connection change breadcrumbs

[stefanosiano]

In order to provide more information, Sentry could collect another type of breadcrumbs: network breadcrumbs. This would be important especially for mobile or desktop SDKs.

The idea to collect data on every network changes:

• disconnection from a network
• connection to a network, with network details
• changes in a network details

Network details include:

• if the network is a VPN or not
• type of the network (wifi, cellular, ethernet)
• Upload/Download bandwidth
• Wi-Fi signal strength

The goal of this issue is just to understand what platforms can gather these information, so that we can build something that will be used by all the mobile SDKs

The breadcrumbs have: type: system category: network.event data["action"]: one of NETWORK_AVAILABLE, NETWORK_LOST, NETWORK_CAPABILITIES_CHANGED

### Platforms
- [x] https://github.com/getsentry/sentry-java/pull/2608
- [ ] https://github.com/getsentry/sentry-cocoa/issues/3127
- [x] React Native
- [ ] https://github.com/getsentry/sentry-dart/issues/1530
- [x] .NET MAUI
- [ ] https://github.com/getsentry/sentry-dart/issues/1790

[stefanosiano]

Android can collect all this info through a system API

[mattjohnsonpint]

For .NET MAUI, we already implemented a network status listener, for the purpose of pausing trying to push events to Sentry when the device has already made it clear that it's offline. Events are added to cache until the listener says its back online.

We could easily add a breadcrumb whenever the status changes. https://github.com/getsentry/sentry-dotnet/blob/main/src/Sentry.Maui/Internal/MauiNetworkStatusListener.cs

It would need only a small amount of refactoring.

We leverage MAUI's IConnectivity API, which leverages the network state info on iOS, Android, etc.

On Android, this requires the app have the ACCESS_NETWORK_STATE permission. I presume that applies to any Android app regardless of dev platform.

[ueman]

Regarding Flutter: On iOS and Android, the native SDK can be used to collect this data. On the desktop platforms (macOS, Windows, Linux) it's not really possible right now without a third-party dependency. On web it should be possible with the various browser APIs.

Is there already a specification for those breadcrumbs?

Edit: I've published a package which does it at https://pub.dev/packages/sentry_connectivity

[krystofwoldrich]

RN Doesn't have API to collect this information, but since it will be in the native breadcrumbs it will be automatically part of RN event crumbs.

[armcknight]

Implementing this in https://github.com/getsentry/sentry-cocoa/pull/3232.

There, I called the breadcrumb type connectivity and the category device.connectivity. If we like those I can open a PR to update https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/#breadcrumb-types, or with whichever names we think would be best... where would the category be documented, if anywhere?

I had considered just using http for the type, since the frontend renders a specific icon for that type. We could also change the frontend to also look for whatever new type we create.

[stefanosiano]

I just updated the description. On Android the breadcrumbs have: type: system category: network.event data["action"]: one of NETWORK_AVAILABLE, NETWORK_LOST, NETWORK_CAPABILITIES_CHANGED

I'm not sure if develop docs are to be updated, as these really affect only mobile SDKs, but perhaps it's a good idea anyway, since i didn't find the system type documented anywhere, either.

[kahest]

@krystofwoldrich we have this on iOS/Android - does this already work on RN or do we need to add some glue code?

[kahest]

^ Update - needs testing and exposing the option in the RN options

[krystofwoldrich]

RN breadcrumbs have this from the native SDKs breadcrumbs. Users can disable these but can filter them out in beforeSend.

iOS since https://github.com/getsentry/sentry-react-native/releases/tag/5.11.0 Android since https://github.com/getsentry/sentry-react-native/releases/tag/5.3.1

Currently, we don't allow any granular setting of what breadcrumbs are added from native. It's all native and filter or no native.