Android/iOS App in Flutter Instrumentation

This document contains instructions on how to set up OpenTelemetry instrumentation in your Flutter applications and view your application traces in SigNoz.

✅ Info

The package which we are using here is Unofficial Implementation of OpenTelemetry Packages.

In this tutorial, we will instrument an Android/iOS Mobile application for traces and send it to SigNoz.

Requirements

Flutter

Send traces directly to SigNoz cloud

✅ Info

You can test sample application for Flutter (Replace the variables inside main.dart)

Step 1 : Instrument your application with OpenTelemetry

To configure your Flutter application to send traces to OpenTelemetry you need to install opentelemetry

For that,run the following command.

flutter pub add opentelemetry

Step 2: Initialize the tracer

To enable tracing and send traces to the SigNoz cloud, you need to initialize the tracer as follows:

Import the packages

import 'package:opentelemetry/api.dart';
import 'package:opentelemetry/sdk.dart';

Put the following in main.dart file.

final headers = {
    //INGESTION KEY HERE VARIABLE
    'signoz-ingestion-key': '<your-ingestion-key>',
  };

  final exporter = CollectorExporter(
    //enter ingestion url here VARIABLE
    Uri.parse('ingest.<region>.signoz.cloud:443/v1/traces'),
    headers: headers,
  );

  // Set up span processors
  final processor = BatchSpanProcessor(exporter);
  final provider = TracerProviderBase(
    processors: [processor],
    //enter service name here VARIABLE
    resource: Resource( [Attribute.fromString("service.name", "<service_name>")]),
  );

  registerGlobalTracerProvider(provider);

  void _createSpan() {
    final inputText = _controller.text;

    // Start a root span
    final rootSpan = _tracer.startSpan('root-span');
    try {
      // Create a child span with the input text
      final childSpan = _tracer.startSpan('child-span', kind: SpanKind.client);
      try {
        // Set attribute for the child span
        childSpan.setAttribute(Attribute.fromString('input.name', inputText));

        // Simulate a remote procedure call (this could be a real async call)
        remoteProcedureCall();

        // Add an event to the child span
        childSpan.addEvent('Processed input: $inputText');
      } catch (e) {
        childSpan.recordException(e);
      } finally {
        childSpan.end();
      }
    } catch (e) {
      // Handle any exceptions that may occur while starting spans
      print('Error creating span: $e');
    } finally {
      // End the root span
      rootSpan.end();
    }
  }

  Future<void> remoteProcedureCall() async {
    final headers = <String, String>{};
    W3CTraceContextPropagator().inject(Context.current, headers, _TextMapSetter());
  }


  • Set the <region> to match your SigNoz Cloud region
  • Replace <your-ingestion-key> with your SigNoz ingestion key
  • <service_name> is name of your service

Step 3: Send Telemetry data to SigNoz

To send telemetry data to SigNoz, you can use the _createSpan function which we created above.

_createSpan()

Step 4: Run app

Run your application from Android Studio to see the output & you can verify the sent span in SigNoz .

Was this page helpful?