Network Error Monitoring in Mobile Apps: Setting Up Sentry

Network Error Monitoring in Mobile Apps: Setting Up Sentry

Picture this: 3:00 AM, backend responds with 502. 8% of users see an empty screen, some of them uninstall the app. We deal with this every day—production without network error monitoring loses users. With Sentry, we intercept such scenarios early, group errors by fingerprint, and configure alerts to never miss a failure.

Network errors vary: from connection loss to response parsing issues. Each category requires its own monitoring strategy. Below is a priority-based classification derived from experience with dozens of projects.

Why Sentry Over Custom Logging?

Custom logging often creates thousands of duplicate tickets. Sentry groups them by fingerprint—cutting analysis time by 5–10x. Sentry also provides context: device, OS version, request traces. According to Sentry documentation, proper grouping reduces incidents by 70%. We have been using Sentry for years—it's a proven production solution. Over the years, we have set up monitoring for dozens of projects, from fintech to e-commerce.

How to Intercept Network Requests in React Native?

@sentry/react-native automatically patches fetch and XMLHttpRequest. By default, it includes Performance traces but does not log errors automatically. Here is the configuration:

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://[email protected]/yyy',
  tracesSampleRate: 0.1, // 10% of requests traced for Performance
  integrations: [
    new Sentry.ReactNativeTracing({
      traceFetch: true,
      traceXHR: true,
      // Do not include sensitive endpoints in traces
      tracingOrigins: ['api.yourapp.com', 'cdn.yourapp.com'],
    }),
  ],
});

For explicit network error logging, wrap fetch:

export async function monitoredFetch(
  url: string,
  options?: RequestInit
): Promise<Response> {
  const startTime = Date.now();
  try {
    const response = await fetch(url, options);
    const duration = Date.now() - startTime;

    if (!response.ok) {
      Sentry.captureMessage(`HTTP ${response.status}: ${url}`, {
        level: response.status >= 500 ? 'error' : 'warning',
        extra: {
          status: response.status,
          duration,
          method: options?.method ?? 'GET',
          endpoint: new URL(url).pathname,
        },
        fingerprint: [`http-${response.status}`, new URL(url).pathname],
      });
    }
    return response;
  } catch (error) {
    Sentry.captureException(error, {
      extra: { url, duration: Date.now() - startTime },
      tags: { error_type: 'network_connectivity' },
    });
    throw error;
  }
}

fingerprint is critical. Without it, Sentry creates a separate issue for each URL with an error. With fingerprint: ['http-500', '/api/orders'], all 500 errors on /api/orders are grouped into one issue.

How to Configure Fingerprint for Grouping?

In the code above, we use the response status and endpoint path. To group by a different criterion, change the array. For example, for authentication errors: ['auth-4xx'].

Breadcrumbs: Context Before the Error

Breadcrumbs show what happened before the network error: which screens the user visited, what actions they performed. By default, the last 100 breadcrumbs are stored—enough for long sessions. Here is how to add a breadcrumb on navigation:

// Add breadcrumb on navigation
navigation.addListener('state', (e) => {
  Sentry.addBreadcrumb({
    category: 'navigation',
    message: `Navigate to ${e.data.state.routes[e.data.state.index].name}`,
    level: 'info',
  });
});

Thanks to breadcrumbs, problem localization time drops from hours to minutes: you see not just an error, but the sequence of user actions.

How to Separate Offline Errors from Server Errors?

Offline errors must be distinguished from server errors. A user on the subway is not a backend problem:

import NetInfo from '@react-native-community/netinfo';

let isConnected = true;
NetInfo.addEventListener(state => { isConnected = state.isConnected ?? true; });

// In monitoredFetch, inside catch:
if (!isConnected) {
  // Do not send to Sentry—this is expected offline
  throw new OfflineError('No network connection');
}
// Otherwise—real error, log it
Sentry.captureException(error, { tags: { connectivity: 'online' } });

Comparison of Alerting Approaches

How to Set Up Alerts in Sentry?

Sentry Alerts based on condition: count(event) > 50 per 5min for http-500 → Slack/PagerDuty. Error rate above baseline → alert. For production, this should run 24/7. Here is a step-by-step guide:

1. Open Alerts → Create Alert.
2. Choose type: Issues (error count).
3. Set criterion: filter by level (error), tags (endpoint).
4. Specify threshold: e.g., 50 events in 5 minutes.
5. Configure channel: Slack, PagerDuty, email.
6. Set silence interval (to avoid spam).

Done. Alerts will automatically notify the team about error spikes.

What’s Included in Turnkey Setup?

We guarantee correct monitoring configuration. The scope includes:

• Sentry integration into the app (any stack: React Native, Flutter, native).
• Fingerprint setup for all endpoints.
• Offline detection and breadcrumbs added.
• Alert rule development and integration with your messenger.
• Developer documentation.
• Team training (1–2 calls).
• Support for one month after launch.

We have been configuring monitoring for production apps for years. Among our clients are fintech, e-commerce, and SaaS companies. We will assess your project for free—contact us. Reach out for a consultation or order the setup now.

Assessment

Sentry setup with network request monitoring, fingerprinting, offline detection, and alerts: 1–2 weeks. Cost is calculated individually based on complexity and stack. Want to protect your app? Fill out the feedback form—we’ll get back to you within a day.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.