Setup - Flipper — ContextQMD

import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

To use the <Link to={useBaseUrl("/docs/features/plugins/network")}>Network plugin</Link>, you need to add the plugin to your Flipper client instance.

Android

The network plugin is shipped as a separate Maven artifact, as follows:

groovy

dependencies {
  debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.273.0'
}

Once added to your dependencies, you can instantiate the plugin and add it to the client:

java

import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;

NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
new NetworkingModule.CustomClientBuilder() {
    @Override
    public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
    }
});
client.addPlugin(networkFlipperPlugin);

OkHttp Integration

If you are using the popular OkHttp library, you can use the Interceptors system to automatically hook into your existing stack, as shown in the following snippet:

java

import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;

new OkHttpClient.Builder()
    .addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin))
    .build();

As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic.

Protobuf / Retrofit Integration

If you are using Retrofit with Protobuf request or response types, you can setup automatic decoding so that the network inspector can display a human readable payload. First you must add the separate dependency:

groovy

dependencies {
  debugImplementation 'com.facebook.flipper:flipper-retrofit2-protobuf-plugin:0.91.2'
}

Then call SendProtobufToFlipperFromRetrofit for each service class:

kotlin

import com.facebook.flipper.plugins.retrofit2protobuf.SendProtobufToFlipperFromRetrofit

SendProtobufToFlipperFromRetrofit("https://baseurl.com/", MyApiService::class.java)

iOS

To enable network inspection, add the following pod to your Podfile:

ruby

pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version

Initialize the plugin in the following way by updating AppDelegate.m:

objc

#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>

[[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];

</TabItem> <TabItem value="swift">

swift

import FlipperKit

client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))

</TabItem> </Tabs>

Protobuf + Retrofit Setup

Gradle Dependencies

Ensure that you already have an explicit dependency in your application's build.gradle including the plugin dependency, as shown in the following example:

groovy

dependencies {
  implementation "com.squareup.retrofit2:retrofit:2.9.0"
  implementation "com.squareup.retrofit2:converter-protobuf:2.9.0"

  // update version below to match latest Flipper client app
  debugImplementation "com.facebook.flipper:flipper-retrofit2-protobuf-plugin:0.84.0"
}

Sending Retrofit Service

If you have a Retrofit service interface PersonService which has Protobuf body or return types then at the time you create your implementation, call the plugin with your baseURL and service class, as follows:

import com.facebook.flipper.plugins.retrofit2protobuf.SendProtobufToFlipperFromRetrofit
...
val personService = retrofit.create(PersonService::class.java)
SendProtobufToFlipperFromRetrofit(baseUrl, PersonService::class.java)