Feat: Screenshot Attachment (#1088)

Co-authored-by: Manoel Aranda Neto <marandaneto@gmail.com>
Co-authored-by: Manoel Aranda Neto <5731772+marandaneto@users.noreply.github.com>

.github/workflows/flutter.yml

@@ -81,7 +81,8 @@ jobs:
         if: runner.os == 'Linux'
         run: |
           cd flutter
-          flutter test --platform chrome --test-randomize-ordering-seed=random
+          flutter test --platform chrome --test-randomize-ordering-seed=random --exclude-tags canvasKit
+          flutter test --platform chrome --test-randomize-ordering-seed=random --tags canvasKit --web-renderer canvaskit
 
       - name: Test VM with coverage
         if: runner.os != 'macOS'

.github/workflows/web-example-ghpages.yml

@@ -18,6 +18,7 @@ jobs:
         with:
           workingDir: flutter/example
           customArgs: --source-maps
+          webRenderer: canvaskit
 
       - name: Upload source maps
         run: |

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Features
+
+- Feat: Screenshot Attachment ([#1088](https://github.com/getsentry/sentry-dart/pull/1088))
+
 ### Fixes
 
 - Merging of integrations and packages ([#1111](https://github.com/getsentry/sentry-dart/pull/1111))

dart/lib/sentry_private.dart

@@ -0,0 +1,3 @@
+// attachments
+// ignore: invalid_export_of_internal_element
+export 'src/sentry_client_attachment_processor.dart';

dart/lib/src/sentry_attachment/sentry_attachment.dart

@@ -83,6 +83,11 @@ class SentryAttachment {
           addToTransactions: addToTransactions,
         );
 
+  SentryAttachment.fromScreenshotData(Uint8List bytes)
+      : this.fromUint8List(bytes, 'screenshot.png',
+            contentType: 'image/png',
+            attachmentType: SentryAttachment.typeAttachmentDefault);
+
   /// Attachment type.
   /// Should be one of types given in [AttachmentType].
   final String attachmentType;

dart/lib/src/sentry_client.dart

@@ -19,6 +19,7 @@ import 'sentry_envelope.dart';
 import 'client_reports/client_report_recorder.dart';
 import 'client_reports/discard_reason.dart';
 import 'transport/data_category.dart';
+import 'sentry_client_attachment_processor.dart';
 
 /// Default value for [User.ipAddress]. It gets set when an event does not have
 /// a user and IP address. Only applies if [SentryOptions.sendDefaultPii] is set
@@ -37,6 +38,9 @@ class SentryClient {
 
   SentryStackTraceFactory get _stackTraceFactory => _options.stackTraceFactory;
 
+  SentryClientAttachmentProcessor get _clientAttachmentProcessor =>
+      _options.clientAttachmentProcessor;
+
   /// Instantiates a client using [SentryOptions]
   factory SentryClient(SentryOptions options) {
     if (options.sendClientReports) {
@@ -130,12 +134,15 @@ class SentryClient {
       preparedEvent = _eventWithRemovedBreadcrumbsIfHandled(preparedEvent);
     }
 
+    final attachments = await _clientAttachmentProcessor.processAttachments(
+        scope?.attachments ?? [], preparedEvent);
+
     final envelope = SentryEnvelope.fromEvent(
       preparedEvent,
       _options.sdk,
       dsn: _options.dsn,
       traceContext: scope?.span?.traceContext(),
-      attachments: scope?.attachments,
+      attachments: attachments.isNotEmpty ? attachments : null,
     );
 
     final id = await captureEnvelope(envelope);

dart/lib/src/sentry_client_attachment_processor.dart

@@ -0,0 +1,14 @@
+import 'dart:async';
+
+import 'package:meta/meta.dart';
+
+import './sentry_attachment/sentry_attachment.dart';
+import './protocol/sentry_event.dart';
+
+@internal
+class SentryClientAttachmentProcessor {
+  Future<List<SentryAttachment>> processAttachments(
+      List<SentryAttachment> attachments, SentryEvent event) async {
+    return attachments;
+  }
+}

dart/lib/src/sentry_options.dart

@@ -5,6 +5,7 @@ import 'package:meta/meta.dart';
 import 'package:http/http.dart';
 
 import '../sentry.dart';
+import '../sentry_private.dart';
 import 'client_reports/client_report_recorder.dart';
 import 'client_reports/noop_client_report_recorder.dart';
 import 'sentry_exception_factory.dart';
@@ -354,6 +355,10 @@ class SentryOptions {
   @internal
   late SentryStackTraceFactory stackTraceFactory =
       SentryStackTraceFactory(this);
+
+  @internal
+  late SentryClientAttachmentProcessor clientAttachmentProcessor =
+      SentryClientAttachmentProcessor();
 }
 
 /// This function is called with an SDK specific event object and can return a modified event

dart/test/mocks.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:sentry/sentry.dart';
+import 'package:sentry/sentry_private.dart';
 import 'package:sentry/src/transport/rate_limiter.dart';
 
 final fakeDsn = 'https://abc@def.ingest.sentry.io/1234567';
@@ -160,3 +161,23 @@ class MockRateLimiter implements RateLimiter {
     this.errorCode = errorCode;
   }
 }
+
+enum MockAttachmentProcessorMode { filter, add }
+
+/// Filtering out all attachments.
+class MockAttachmentProcessor implements SentryClientAttachmentProcessor {
+  MockAttachmentProcessorMode mode;
+
+  MockAttachmentProcessor(this.mode);
+
+  @override
+  Future<List<SentryAttachment>> processAttachments(
+      List<SentryAttachment> attachments, SentryEvent event) async {
+    switch (mode) {
+      case MockAttachmentProcessorMode.filter:
+        return <SentryAttachment>[];
+      case MockAttachmentProcessorMode.add:
+        return <SentryAttachment>[SentryAttachment.fromIntList([], "added")];
+    }
+  }
+}

dart/test/sentry_attachment_test.dart

@@ -159,6 +159,15 @@ void main() {
 
       expect(attachment.addToTransactions, true);
     });
+
+    test('fromScreenshotData', () async {
+      final attachment =
+          SentryAttachment.fromScreenshotData(Uint8List.fromList([0, 0, 0, 0]));
+      expect(attachment.attachmentType, SentryAttachment.typeAttachmentDefault);
+      expect(attachment.contentType, 'image/png');
+      expect(attachment.filename, 'screenshot.png');
+      expect(attachment.addToTransactions, false);
+    });
   });
 }
 

dart/test/sentry_client_test.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:typed_data';
 
+import 'package:collection/collection.dart';
 import 'package:sentry/sentry.dart';
 import 'package:sentry/src/client_reports/client_report.dart';
 import 'package:sentry/src/client_reports/discard_reason.dart';
@@ -1043,6 +1044,45 @@ void main() {
     });
   });
 
+  group('SentryClientAttachmentProcessor', () {
+    late Fixture fixture;
+
+    setUp(() {
+      fixture = Fixture();
+    });
+
+    test('processor filtering out attachments', () async {
+      fixture.options.clientAttachmentProcessor =
+          MockAttachmentProcessor(MockAttachmentProcessorMode.filter);
+      final scope = Scope(fixture.options);
+      scope.addAttachment(SentryAttachment.fromIntList([], "scope-attachment"));
+      final sut = fixture.getSut();
+
+      final event = SentryEvent();
+      await sut.captureEvent(event, scope: scope);
+
+      final capturedEnvelope = (fixture.transport).envelopes.first;
+      final attachmentItem = capturedEnvelope.items.firstWhereOrNull(
+          (element) => element.header.type == SentryItemType.attachment);
+      expect(attachmentItem, null);
+    });
+
+    test('processor adding attachments', () async {
+      fixture.options.clientAttachmentProcessor =
+          MockAttachmentProcessor(MockAttachmentProcessorMode.add);
+      final scope = Scope(fixture.options);
+      final sut = fixture.getSut();
+
+      final event = SentryEvent();
+      await sut.captureEvent(event, scope: scope);
+
+      final capturedEnvelope = (fixture.transport).envelopes.first;
+      final attachmentItem = capturedEnvelope.items.firstWhereOrNull(
+          (element) => element.header.type == SentryItemType.attachment);
+      expect(attachmentItem != null, true);
+    });
+  });
+
   group('ClientReportRecorder', () {
     late Fixture fixture;
 

flutter/example/lib/main.dart

@@ -31,16 +31,19 @@ Future<void> main() async {
       options.attachThreads = true;
       options.enableWindowMetricBreadcrumbs = true;
       options.addIntegration(LoggingIntegration());
+      options.attachScreenshot = true;
       // We can enable Sentry debug logging during development. This is likely
       // going to log too much for your app, but can be useful when figuring out
       // configuration issues, e.g. finding out why your events are not uploaded.
       options.debug = true;
     },
     // Init your App.
     appRunner: () => runApp(
-      DefaultAssetBundle(
-        bundle: SentryAssetBundle(enableStructuredDataTracing: true),
-        child: MyApp(),
+      SentryScreenshotWidget(
+        child: DefaultAssetBundle(
+          bundle: SentryAssetBundle(enableStructuredDataTracing: true),
+          child: MyApp(),
+        ),
       ),
     ),
   );

flutter/lib/sentry_flutter.dart

@@ -8,3 +8,4 @@ export 'src/sentry_flutter_options.dart';
 export 'src/flutter_sentry_attachment.dart';
 export 'src/sentry_asset_bundle.dart';
 export 'src/integrations/on_error_integration.dart';
+export 'src/screenshot/sentry_screenshot_widget.dart';

flutter/lib/src/event_processor/flutter_enricher_event_processor.dart

@@ -6,7 +6,6 @@ import 'package:flutter/material.dart';
 import 'package:sentry/sentry.dart';
 
 import '../binding_utils.dart';
-import '../renderer/renderer.dart';
 import '../sentry_flutter_options.dart';
 
 typedef WidgetBindingGetter = WidgetsBinding? Function();
@@ -155,7 +154,7 @@ class FlutterEnricherEventProcessor extends EventProcessor {
       // Also always fails in tests.
       // See https://github.com/flutter/flutter/issues/83919
       // 'window_is_visible': _window.viewConfiguration.visible,
-      'renderer': getRendererAsString()
+      'renderer': _options.rendererWrapper.getRendererAsString()
     };
   }
 

flutter/lib/src/integrations/screenshot_integration.dart

@@ -0,0 +1,29 @@
+import 'dart:async';
+
+import 'package:sentry/sentry.dart';
+import 'package:sentry/sentry_private.dart';
+import '../screenshot/screenshot_attachment_processor.dart';
+import '../sentry_flutter_options.dart';
+
+/// Adds [ScreenshotAttachmentProcessor] to options if [attachScreenshot] is true
+class ScreenshotIntegration implements Integration<SentryFlutterOptions> {
+  SentryFlutterOptions? _options;
+
+  @override
+  FutureOr<void> call(Hub hub, SentryFlutterOptions options) {
+    if (options.attachScreenshot) {
+      // ignore: invalid_use_of_internal_member
+      options.clientAttachmentProcessor =
+          ScreenshotAttachmentProcessor(options);
+      _options = options;
+
+      options.sdk.addIntegration('screenshotIntegration');
+    }
+  }
+
+  @override
+  FutureOr<void> close() {
+    // ignore: invalid_use_of_internal_member
+    _options?.clientAttachmentProcessor = SentryClientAttachmentProcessor();
+  }
+}

flutter/lib/src/renderer/renderer.dart

@@ -1,19 +1,26 @@
+import 'package:meta/meta.dart';
+
 import 'unknown_renderer.dart'
     if (dart.library.html) 'html_renderer.dart'
     if (dart.library.io) 'io_renderer.dart' as implementation;
 
-FlutterRenderer getRenderer() => implementation.getRenderer();
+@internal
+class RendererWrapper {
+  FlutterRenderer getRenderer() {
+    return implementation.getRenderer();
+  }
 
-String getRendererAsString() {
-  switch (getRenderer()) {
-    case FlutterRenderer.skia:
-      return 'Skia';
-    case FlutterRenderer.canvasKit:
-      return 'CanvasKit';
-    case FlutterRenderer.html:
-      return 'HTML';
-    case FlutterRenderer.unknown:
-      return 'Unknown';
+  String getRendererAsString() {
+    switch (getRenderer()) {
+      case FlutterRenderer.skia:
+        return 'Skia';
+      case FlutterRenderer.canvasKit:
+        return 'CanvasKit';
+      case FlutterRenderer.html:
+        return 'HTML';
+      case FlutterRenderer.unknown:
+        return 'Unknown';
+    }
   }
 }