Skip to content

Commit

Permalink
feat: mobile-instrumentation (#808)
Browse files Browse the repository at this point in the history
* 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
UnCool-0x authored Sep 27, 2024
1 parent 8c803d3 commit 4d08321
Show file tree
Hide file tree
Showing 8 changed files with 29,972 additions and 2,612 deletions.
33 changes: 33 additions & 0 deletions constants/docsSideNav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,39 @@ const docsSideNav = [
},
],
},
{
type: 'category',
isExpanded: false,
label: 'Mobile Instrumentation',
route: '/docs/mobile-instrumentation',
className: 'new-doc',
// route: '',
// link: {
// type: 'doc',
// },
items: [
{
type: 'doc',
label: 'Swift UI',
route: '/docs/instrumentation/mobile-instrumentation/swiftUi',
},
{
type: 'doc',
label: 'Java',
route: '/docs/instrumentation/mobile-instrumentation/java',
},
{
type: 'doc',
label: 'Kotlin',
route: '/docs/instrumentation/mobile-instrumentation/kotlin',
},
{
type: 'doc',
label: 'Flutter',
route: '/docs/instrumentation/mobile-instrumentation/flutter',
},
],
},
],
},
{
Expand Down
155 changes: 155 additions & 0 deletions data/docs/instrumentation/mobile-instrumentation/flutter.mdx
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 .
Loading

0 comments on commit 4d08321

Please sign in to comment.