react-native: reduce breadcrumb size

examples/sdk/reactNative/src/actions/actions.ts

@@ -1,4 +1,4 @@
-import { BacktraceClient } from '@backtrace/react-native';
+import { BacktraceClient, BreadcrumbLogLevel, BreadcrumbType } from '@backtrace/react-native';
 import { Alert, Platform } from 'react-native';
 import { actions as androidActions } from './android/action';
 
@@ -125,6 +125,17 @@ export function generateActions(client: BacktraceClient) {
                 client.addAttribute({ time: value });
             },
         },
+        {
+            name: 'Add a breadcrumb',
+            platform,
+            action: async () => {
+                const timestamp = Date.now();
+                notify(`Adding manual breadcrumb`);
+                client.breadcrumbs?.addBreadcrumb('Manual breadcrumb', BreadcrumbLogLevel.Info, BreadcrumbType.User, {
+                    timestamp,
+                });
+            },
+        },
         ...Platform.select({
             android: androidActions,
             default: [],

packages/react-native/src/BacktraceClient.ts

@@ -10,15 +10,15 @@ import {
 } from '@backtrace/sdk-core';
 import { NativeModules, Platform } from 'react-native';
 import { type BacktraceConfiguration } from './BacktraceConfiguration';
+import { ReactNativeRequestHandler } from './ReactNativeRequestHandler';
+import { ReactStackTraceConverter } from './ReactStackTraceConverter';
 import { FileBreadcrumbsStorage } from './breadcrumbs/FileBreadcrumbsStorage';
 import { BacktraceClientBuilder } from './builder/BacktraceClientBuilder';
 import type { BacktraceClientSetup } from './builder/BacktraceClientSetup';
 import { version } from './common/platformHelper';
 import { CrashReporter } from './crashReporter/CrashReporter';
 import { generateUnhandledExceptionHandler } from './handlers';
 import { type ExceptionHandler } from './handlers/ExceptionHandler';
-import { ReactNativeRequestHandler } from './ReactNativeRequestHandler';
-import { ReactStackTraceConverter } from './ReactStackTraceConverter';
 import { type FileSystem } from './storage/FileSystem';
 
 export class BacktraceClient extends BacktraceCoreClient<BacktraceConfiguration> {
@@ -55,13 +55,7 @@ export class BacktraceClient extends BacktraceCoreClient<BacktraceConfiguration>
 
         const breadcrumbsManager = this.modules.get(BreadcrumbsManager);
         if (breadcrumbsManager && this.sessionFiles) {
-            breadcrumbsManager.setStorage(
-                FileBreadcrumbsStorage.create(
-                    fileSystem,
-                    this.sessionFiles,
-                    (clientSetup.options.breadcrumbs?.maximumBreadcrumbs ?? 100) || 100,
-                ),
-            );
+            breadcrumbsManager.setStorage(FileBreadcrumbsStorage.factory(fileSystem, this.sessionFiles));
         }
 
         this.attributeManager.attributeEvents.on(

packages/react-native/src/attachment/BacktraceFileAttachment.ts

@@ -2,7 +2,7 @@ import { type BacktraceFileAttachment as CoreBacktraceFileAttachment } from '@ba
 import { Platform } from 'react-native';
 import { type FileSystem } from '../storage/';
 import { type FileLocation } from '../types/FileLocation';
-export class BacktraceFileAttachment implements CoreBacktraceFileAttachment {
+export class BacktraceFileAttachment implements CoreBacktraceFileAttachment<FileLocation> {
     public readonly name: string;
     public readonly mimeType: string;
 
@@ -18,7 +18,7 @@ export class BacktraceFileAttachment implements CoreBacktraceFileAttachment {
         this._uploadUri = Platform.OS === 'android' ? `file://${this.filePath}` : this.filePath;
     }
 
-    public get(): FileLocation | string | undefined {
+    public get(): FileLocation | undefined {
         const exists = this._fileSystemProvider.existsSync(this.filePath);
 
         if (!exists) {

packages/react-native/src/breadcrumbs/AlternatingFileWriter.ts

@@ -4,6 +4,7 @@ import { type StreamWriter } from '../storage/StreamWriter';
 export class AlternatingFileWriter {
     private _streamId?: string;
     private _count = 0;
+    private _size = 0;
     private _disposed = false;
 
     private readonly _streamWriter: StreamWriter;
@@ -13,14 +14,12 @@ export class AlternatingFileWriter {
     private _currentAppendedLog?: string;
 
     constructor(
+        private readonly _fileSystem: FileSystem,
         private readonly _mainFile: string,
         private readonly _fallbackFile: string,
-        private readonly _fileCapacity: number,
-        private readonly _fileSystem: FileSystem,
+        private readonly _maxLines?: number,
+        private readonly _maxSize?: number,
     ) {
-        if (this._fileCapacity <= 0) {
-            throw new Error('File capacity may not be less or equal to 0.');
-        }
         this._streamWriter = this._fileSystem.streamWriter;
     }
 
@@ -42,7 +41,8 @@ export class AlternatingFileWriter {
             return;
         }
 
-        this.prepareBreadcrumbStream();
+        const appendLength = this._currentAppendedLog.length + 1;
+        this.prepareBreadcrumbStream(appendLength);
 
         if (!this._streamId) {
             this._logQueue.unshift(this._currentAppendedLog);
@@ -53,10 +53,39 @@ export class AlternatingFileWriter {
         // if the queue is full and we can save more item in a batch
         // try to save as much as possible to speed up potential native operations
         this._count += 1;
+        this._size += appendLength;
+
         const logsToAppend = [this._currentAppendedLog];
 
-        const restAppendingLogs = this._logQueue.splice(0, this._fileCapacity - this._count);
+        let logsToTake = 0;
+        let currentCount = this._count;
+        let currentSize = this._size;
+
+        for (let i = 0; i < this._logQueue.length; i++) {
+            const log = this._logQueue[i];
+            if (!log) {
+                continue;
+            }
+
+            const logLength = log.length + 1;
+
+            if (currentCount + 1 > (this._maxLines ?? Infinity)) {
+                break;
+            }
+
+            if (currentSize + logLength >= (this._maxSize ?? Infinity)) {
+                break;
+            }
+
+            logsToTake++;
+            currentCount++;
+            currentSize += logLength;
+        }
+
+        const restAppendingLogs = this._logQueue.splice(0, logsToTake);
         this._count = this._count + restAppendingLogs.length;
+        this._size += restAppendingLogs.reduce((sum, l) => sum + l.length + 1, 0);
+
         logsToAppend.push(...restAppendingLogs);
 
         this._streamWriter
@@ -76,24 +105,32 @@ export class AlternatingFileWriter {
             });
     }
 
-    private prepareBreadcrumbStream() {
+    private prepareBreadcrumbStream(newSize: number) {
         if (!this._streamId) {
             this._streamId = this._streamWriter.create(this._mainFile);
-        } else if (this._count >= this._fileCapacity) {
+        } else if (this._count >= (this._maxLines ?? Infinity) || this._size + newSize >= (this._maxSize ?? Infinity)) {
+            this.switchFile();
+        }
+    }
+
+    private switchFile() {
+        if (this._streamId) {
             const closeResult = this._streamWriter.close(this._streamId);
             if (!closeResult) {
                 return;
             }
-            this._streamId = undefined;
+        }
 
-            const renameResult = this._fileSystem.copySync(this._mainFile, this._fallbackFile);
-            if (!renameResult) {
-                return;
-            }
-            this._streamId = this._streamWriter.create(this._mainFile);
+        this._streamId = undefined;
 
-            this._count = 0;
+        const renameResult = this._fileSystem.copySync(this._mainFile, this._fallbackFile);
+        if (!renameResult) {
+            return;
         }
+        this._streamId = this._streamWriter.create(this._mainFile);
+
+        this._count = 0;
+        this._size = 0;
     }
 
     public dispose() {

packages/react-native/src/breadcrumbs/FileBreadcrumbsStorage.ts

@@ -1,16 +1,20 @@
 import {
     BreadcrumbLogLevel,
     BreadcrumbType,
-    jsonEscaper,
     SessionFiles,
     TimeHelper,
+    jsonEscaper,
     type BacktraceAttachment,
+    type BacktraceAttachmentProvider,
     type Breadcrumb,
     type BreadcrumbsStorage,
+    type BreadcrumbsStorageFactory,
+    type BreadcrumbsStorageLimits,
     type RawBreadcrumb,
 } from '@backtrace/sdk-core';
 import { BacktraceFileAttachment } from '..';
 import { type FileSystem } from '../storage';
+import type { FileLocation } from '../types/FileLocation';
 import { AlternatingFileWriter } from './AlternatingFileWriter';
 
 const FILE_PREFIX = 'bt-breadcrumbs';
@@ -27,29 +31,45 @@ export class FileBreadcrumbsStorage implements BreadcrumbsStorage {
         private readonly _fileSystem: FileSystem,
         private readonly _mainFile: string,
         private readonly _fallbackFile: string,
-        maximumBreadcrumbs: number,
+        private readonly _limits: BreadcrumbsStorageLimits,
     ) {
         this._writer = new AlternatingFileWriter(
+            _fileSystem,
             _mainFile,
             _fallbackFile,
-            Math.floor(maximumBreadcrumbs / 2),
-            _fileSystem,
+            this._limits.maximumBreadcrumbs ? Math.floor(this._limits.maximumBreadcrumbs / 2) : undefined,
+            this._limits.maximumTotalBreadcrumbsSize,
         );
     }
 
-    public static create(fileSystem: FileSystem, session: SessionFiles, maximumBreadcrumbs: number) {
-        const file1 = session.getFileName(this.getFileName(0));
-        const file2 = session.getFileName(this.getFileName(1));
-        return new FileBreadcrumbsStorage(fileSystem, file1, file2, maximumBreadcrumbs);
+    public static factory(fileSystem: FileSystem, session: SessionFiles): BreadcrumbsStorageFactory {
+        return ({ limits }) => {
+            const file1 = session.getFileName(this.getFileName(0));
+            const file2 = session.getFileName(this.getFileName(1));
+            return new FileBreadcrumbsStorage(fileSystem, file1, file2, limits);
+        };
     }
 
-    public getAttachments(): BacktraceAttachment<unknown>[] {
+    public getAttachments(): [BacktraceAttachment<FileLocation>, BacktraceAttachment<FileLocation>] {
         return [
             new BacktraceFileAttachment(this._fileSystem, this._mainFile, 'bt-breadcrumbs-0'),
             new BacktraceFileAttachment(this._fileSystem, this._fallbackFile, 'bt-breadcrumbs-1'),
         ];
     }
 
+    public getAttachmentProviders(): BacktraceAttachmentProvider[] {
+        return [
+            {
+                get: () => new BacktraceFileAttachment(this._fileSystem, this._mainFile, 'bt-breadcrumbs-0'),
+                type: 'dynamic',
+            },
+            {
+                get: () => new BacktraceFileAttachment(this._fileSystem, this._fallbackFile, 'bt-breadcrumbs-1'),
+                type: 'dynamic',
+            },
+        ];
+    }
+
     public add(rawBreadcrumb: RawBreadcrumb): number {
         const breadcrumbType = BreadcrumbType[rawBreadcrumb.type];
         if (!breadcrumbType) {
@@ -73,6 +93,14 @@ export class FileBreadcrumbsStorage implements BreadcrumbsStorage {
         };
 
         const breadcrumbJson = JSON.stringify(breadcrumb, jsonEscaper());
+        const sizeLimit = this._limits.maximumTotalBreadcrumbsSize;
+        if (sizeLimit !== undefined) {
+            const jsonLength = breadcrumbJson.length + 1; // newline
+            if (jsonLength > sizeLimit) {
+                return id;
+            }
+        }
+
         this._writer.writeLine(breadcrumbJson);
 
         return id;

packages/react-native/tests/_mocks/fileSystem.ts

@@ -0,0 +1,66 @@
+import { MockedFileSystem, mockFileSystem } from '@backtrace/sdk-core/tests/_mocks/fileSystem';
+import { randomUUID } from 'crypto';
+import path from 'path';
+import { StreamWriter } from '../../src';
+import { FileSystem } from '../../src/storage/FileSystem';
+
+function mockStreamWriter(files: Record<string, string>): StreamWriter {
+    const streams = new Map<string, string>();
+    return {
+        create(source) {
+            const id = randomUUID();
+            const fullPath = path.resolve(source);
+            streams.set(id, fullPath);
+            files[fullPath] = '';
+            return id;
+        },
+        append(key, content) {
+            const source = streams.get(key);
+            if (!source) {
+                return Promise.resolve(false);
+            }
+            files[source] += content;
+            return Promise.resolve(true);
+        },
+        close(key) {
+            const source = streams.get(key);
+            if (!source) {
+                return false;
+            }
+
+            streams.delete(key);
+            return true;
+        },
+    };
+}
+
+export function mockReactFileSystem(files?: Record<string, string>): MockedFileSystem<FileSystem> {
+    const fs = mockFileSystem(files);
+
+    return {
+        ...fs,
+
+        copy: jest.fn().mockImplementation((sourceFile: string, destinationFile: string) => {
+            const src = fs.files[path.resolve(sourceFile)];
+            if (!src) {
+                return Promise.resolve(false);
+            }
+
+            fs.files[path.resolve(destinationFile)] = src;
+            return Promise.resolve(true);
+        }),
+
+        copySync: jest.fn().mockImplementation((sourceFile: string, destinationFile: string) => {
+            const src = fs.files[path.resolve(sourceFile)];
+            if (!src) {
+                return false;
+            }
+
+            fs.files[path.resolve(destinationFile)] = src;
+            return true;
+        }),
+
+        applicationDirectory: jest.fn().mockReturnValue(path.resolve('.')),
+        streamWriter: mockStreamWriter(fs.files),
+    };
+}