Microfrontend support

Open in ChatGPTOpen in Claude

Microfrontend support

This feature allows you to track multiple applications on the same page.
Only errors with stacktrace are supported.

Prerequisites

To support microfrontend, you need to install one of these plugins: webpack, esbuild, vite and include them in your build process.

CoralogixRum.init({
  // ...
  supportMfe: true,
});

When an error occurs, the SDK looks up the microfrontend of each frame in the stack trace and adds these labels to the error event:

• mfeApp and mfeVersion name the microfrontend of the topmost frame, where the error was created. They are omitted when that frame belongs to the host application.
• mfes lists every microfrontend in the stack trace, nearest the topmost frame first, each as an object with its own mfeApp, mfeVersion and frameIndexes. frameIndexes lists every row of the error's original_stacktrace that belongs to that microfrontend, topmost first, where 0 is the topmost frame; mfeVersion is the version of the topmost of them. Rows are the frames the SDK reports, so they can differ from the lines the browser prints: native frames without a file, such as Array.forEach (<anonymous>), are not rows. Use mfes to find errors that passed through a microfrontend even when the host application reported them, for example through a shared error handler, a fetch wrapper, or console.error. Available from version 4.1.0; frameIndexes from version 4.1.1.

For an error that the host application reports on behalf of a checkout microfrontend, which called into a cart microfrontend and back, the topmost frame belongs to the host, so the event carries only mfes:

{
  "mfes": [
    { "mfeApp": "checkout", "mfeVersion": "1.4.0", "frameIndexes": [1, 3] },
    { "mfeApp": "cart", "mfeVersion": "2.0.3", "frameIndexes": [2] }
  ]
}

On error events, these labels replace any labels of the same name that you set with the labels option or setLabels. Labels you pass to captureError take precedence over them.