feat: integrate new bubbles (#10550)

To test this, set the `useNextBubble` value to `true` in the
localstorage. Here's a quick command to run in the console

```js
localStorage.setItem('useNextBubble', true)
```

```js
localStorage.setItem('useNextBubble', false)
```

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/composables/useTransformKeys.js

@@ -3,6 +3,7 @@
 import { unref } from 'vue';
 import camelcaseKeys from 'camelcase-keys';
 import snakecaseKeys from 'snakecase-keys';
+import * as Sentry from '@sentry/vue';
 
 /**
  * Vue composable that converts object keys to camelCase
@@ -12,8 +13,18 @@ import snakecaseKeys from 'snakecase-keys';
  * @returns {Object|Array} Converted payload with camelCase keys
  */
 export function useCamelCase(payload, options) {
-  const unrefPayload = unref(payload);
-  return camelcaseKeys(unrefPayload, options);
+  try {
+    const unrefPayload = unref(payload);
+    return camelcaseKeys(unrefPayload, options);
+  } catch (e) {
+    Sentry.setContext('transform-keys-error', {
+      payload,
+      options,
+      op: 'camelCase',
+    });
+    Sentry.captureException(e);
+    return payload;
+  }
 }
 
 /**
@@ -24,6 +35,16 @@ export function useCamelCase(payload, options) {
  * @returns {Object|Array} Converted payload with snake_case keys
  */
 export function useSnakeCase(payload, options) {
-  const unrefPayload = unref(payload);
-  return snakecaseKeys(unrefPayload, options);
+  try {
+    const unrefPayload = unref(payload);
+    return snakecaseKeys(unrefPayload, options);
+  } catch (e) {
+    Sentry.setContext('transform-keys-error', {
+      payload,
+      options,
+      op: 'snakeCase',
+    });
+    Sentry.captureException(e);
+    return payload;
+  }
 }