Keep the last maxBreadcrumbs (default 100) when merging native and js…

… breadcrumbs

packages/core/src/js/integrations/devicecontext.ts

@@ -85,7 +85,10 @@ async function processEvent(event: Event): Promise<Event> {
     : undefined;
   if (nativeBreadcrumbs) {
     const maxBreadcrumbs = getClient()?.getOptions().maxBreadcrumbs ?? 100; // Default is 100.
-    event.breadcrumbs = nativeBreadcrumbs.concat(event.breadcrumbs || []).slice(0, maxBreadcrumbs);
+    event.breadcrumbs = nativeBreadcrumbs
+      .concat(event.breadcrumbs || []) // concatenate the native and js breadcrumbs
+      .sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0)) // sort by timestamp
+      .slice(-maxBreadcrumbs); // keep the last maxBreadcrumbs
   }
 
   return event;

packages/core/test/integrations/devicecontext.test.ts

@@ -167,6 +167,7 @@ describe('Device Context Integration', () => {
   });
 
   it('merge native and event breadcrumbs', async () => {
+    getClient().getOptions().maxBreadcrumbs = undefined; // Default 100
     const { processedEvent } = await processEventWith({
       nativeContexts: { breadcrumbs: [{ message: 'native-breadcrumb-1' }, { message: 'native-breadcrumb-2' }] },
       mockEvent: { breadcrumbs: [{ message: 'event-breadcrumb-1' }, { message: 'event-breadcrumb-2' }] },
@@ -181,43 +182,57 @@ describe('Device Context Integration', () => {
     });
   });
 
-  it('use only native breadcrumb if the maxBreadcrumbs limit does not leave space for event breadcrumbs', async () => {
-    getClient().getOptions().maxBreadcrumbs = 1;
+  it('respect breadcrumb order when merging', async () => {
+    getClient().getOptions().maxBreadcrumbs = undefined; // Default 100
     const { processedEvent } = await processEventWith({
-      nativeContexts: { breadcrumbs: [{ message: 'native-breadcrumb' }] },
-      mockEvent: { breadcrumbs: [{ message: 'event-breadcrumb' }] },
+      nativeContexts: {
+        breadcrumbs: [
+          { message: 'native-breadcrumb-3', timestamp: 'Thursday, November 7, 2024 3:24:59 PM GMT+02:00' }, // 1730985899
+          { message: 'native-breadcrumb-1', timestamp: 'Thursday, November 7, 2024 3:24:57 PM GMT+02:00' }, // 1730985897
+        ],
+      },
+      mockEvent: {
+        breadcrumbs: [
+          { message: 'event-breadcrumb-4', timestamp: 1730985999 },
+          { message: 'event-breadcrumb-2', timestamp: 1730985898 },
+        ],
+      },
     });
     expect(processedEvent).toStrictEqual({
-      breadcrumbs: [{ message: 'native-breadcrumb' }],
+      breadcrumbs: [
+        { message: 'native-breadcrumb-1', timestamp: 1730985897 },
+        { message: 'event-breadcrumb-2', timestamp: 1730985898 },
+        { message: 'native-breadcrumb-3', timestamp: 1730985899 },
+        { message: 'event-breadcrumb-4', timestamp: 1730985999 },
+      ],
     });
   });
 
-  it('use native breadcrumbs and pick only the event breadcrumbs that fit the maxBreadcrumbs limit', async () => {
+  it('keep the last maxBreadcrumbs when merging', async () => {
     getClient().getOptions().maxBreadcrumbs = 3;
     const { processedEvent } = await processEventWith({
-      nativeContexts: { breadcrumbs: [{ message: 'native-breadcrumb-1' }, { message: 'native-breadcrumb-2' }] },
-      mockEvent: { breadcrumbs: [{ message: 'event-breadcrumb-1' }, { message: 'event-breadcrumb-2' }] },
+      nativeContexts: {
+        breadcrumbs: [
+          { message: 'native-breadcrumb-3', timestamp: 'Thursday, November 7, 2024 3:24:59 PM GMT+02:00' }, // 1730985899
+          { message: 'native-breadcrumb-1', timestamp: 'Thursday, November 7, 2024 3:24:57 PM GMT+02:00' }, // 1730985897
+        ],
+      },
+      mockEvent: {
+        breadcrumbs: [
+          { message: 'event-breadcrumb-4', timestamp: 1730985999 },
+          { message: 'event-breadcrumb-2', timestamp: 1730985898 },
+        ],
+      },
     });
     expect(processedEvent).toStrictEqual({
       breadcrumbs: [
-        { message: 'native-breadcrumb-1' },
-        { message: 'native-breadcrumb-2' },
-        { message: 'event-breadcrumb-1' },
+        { message: 'event-breadcrumb-2', timestamp: 1730985898 },
+        { message: 'native-breadcrumb-3', timestamp: 1730985899 },
+        { message: 'event-breadcrumb-4', timestamp: 1730985999 },
       ],
     });
   });
 
-  it('do not use any breadcrumbs if the maxBreadcrumbs limit is set to zero', async () => {
-    getClient().getOptions().maxBreadcrumbs = 0;
-    const { processedEvent } = await processEventWith({
-      nativeContexts: { breadcrumbs: [{ message: 'native-breadcrumb' }] },
-      mockEvent: { breadcrumbs: [{ message: 'event-breadcrumb' }] },
-    });
-    expect(processedEvent).toStrictEqual({
-      breadcrumbs: [],
-    });
-  });
-
   it('adds in_foreground false to native app contexts', async () => {
     mockCurrentAppState = 'background';
     const { processedEvent } = await processEventWith({