-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: mobile-instrumentation * minor changes * notice * new tag * feat: removed self hosted signoz * fix github urls * feat: removed new doc tag * feat: region * feat: removed smaller table
- Loading branch information
Showing
8 changed files
with
29,972 additions
and
2,612 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 155 additions & 0 deletions
155
data/docs/instrumentation/mobile-instrumentation/flutter.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
--- | ||
date: 2024-09-22 | ||
id: flutter-mobile-app | ||
title: Android/iOS App in Flutter Instrumentation | ||
description: Instrument your Android/iOS application built with Flutter using OpenTelemetry and send data to SigNoz | ||
--- | ||
|
||
import InstrumentationFAQ from '@/components/shared/instrumentation-faq.md' | ||
|
||
This documentation contains instructions on how to set up OpenTelemetry(OTel) instrumentation in your Android/iOS mobile application built using Flutter. OpenTelemetry, also known as OTel for short, is an open-source observability framework that can help you generate and collect telemetry data - traces, metrics, and logs from your Flutter application. | ||
|
||
Once the telemetry data is generated, you can configure an exporter to send the data to SigNoz for monitoring and visualization. | ||
|
||
There are three major steps to using OpenTelemetry: | ||
|
||
- Instrumenting your iOS application with OpenTelemetry | ||
- Configuring the exporter to send data to SigNoz | ||
- Validating the configuration to ensure that data is being sent as expected. | ||
|
||
<Admonition type="info"> | ||
The package which we are using here is [Unofficial](https://pub.dev/packages/opentelemetry) Implementation of OpenTelemetry Packages. | ||
</Admonition> | ||
|
||
|
||
In this tutorial, we will instrument an Android/iOS Mobile application for traces and send it to SigNoz. | ||
|
||
## Requirements | ||
|
||
[Flutter](https://docs.flutter.dev/get-started/install) | ||
|
||
### Send traces directly to SigNoz cloud | ||
|
||
|
||
<Admonition type="info"> | ||
You can test sample application for [Flutter](https://github.com/SigNoz/mobile-monitoring-sample-apps/tree/main/android-ios-flutter) (Replace the variables inside `main.dart`) | ||
</Admonition> | ||
|
||
|
||
**Step 1 : Instrument your application with OpenTelemetry** | ||
|
||
To configure your Flutter application to send traces to OpenTelemetry you need to install [opentelemetry](https://pub.dev/packages/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-access-token': '<SIGNOZ_INGESTION_KEY>', | ||
}; | ||
final exporter = CollectorExporter( | ||
//enter ingestion url here VARIABLE | ||
Uri.parse('ingest.[REGION].signoz.cloud:<PORT>/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()); | ||
} | ||
``` | ||
|
||
Ensure to replace `<SIGNOZ_INGESTION_KEY>`, `<PORT>`, and `<REGION>` with your actual SigNoz ingestion key, Port, and region, respectively. | ||
|
||
You can find your Ingestion Key in the following places: | ||
- mail which you recieved from SigNoz after signing up. | ||
- inside settings on SigNoz dashboard | ||
|
||
Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table. | ||
|
||
| Region | Endpoint | | ||
| --- | --- | | ||
| US | ingest.us.signoz.cloud:443/v1/traces | | ||
| IN | ingest.in.signoz.cloud:443/v1/traces | | ||
| EU | ingest.eu.signoz.cloud:443/v1/traces | | ||
|
||
These are the variables you need to replace : | ||
|
||
| Placeholder | Description | | ||
|----------------------------|---------------------------------------------| | ||
| `<SIGNOZ_INGESTION_KEY>` | Your SigNoz ingestion key | | ||
| `<PORT>` | Port (default: 443) | | ||
| `<REGION>` | Region for SigNoz ingestion URL | | ||
|
||
**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 . |
Oops, something went wrong.