Micro Frontend Error Tracking

Overview

If your app employs micro frontends, it's crucial to identify which micro frontend an error originates from. With Coralogix, you can achieve this tracking, capturing, and reporting errors within a micro frontend architecture. The error detection mechanism is based on the stack trace. When an error occurs, the RUM browser SDK automatically links it to the relevant micro frontend and labels the error event with the associated app and version, making it easier to identify the source of the issue.

Centralized error logging: Although each micro frontend is independent, you are able to aggregate error logs from all parts of the system into a central service.
Stack trace propagation: If an error originates in a micro frontend but affects others, you can capture detailed stack traces and context for the entire call stack.

Prerequisites

Before enabling micro frontend error tracking, install the Webpack or Esbuild plugin that generates the necessary metadata assets for micro frontend integration.

Webpack plugin

Install the Webpack plugin as follows: npm i -D @coralogix/webpack-plugin

Example

// webpack.config.js
const { CoralogixWebpackPlugin } = require("@coralogix/webpack-plugin");

module.exports = {
  // ... other config above ...

  plugins: [
    new CoralogixWebpackPlugin({
      app:'test-app',
      version:'1.0.0'
    }),
  ],
};

Esbuild plugin

Install the Esbuild plugin as follows: npm i -D @coralogix/esbuild-plugin

Example

// esbuild.config.js
const esbuild = require('esbuild');
const { coralogixEsbuildPlugin } = require("@coralogix/esbuild-plugin");

await esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
  plugins: [
    coralogixEsbuildPlugin({
        app:'test-app',
        version:'1.0.0'
      })
  ],
})

Enabling support for micro frontend

Activate support for error tracking in the micro frontend.

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

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to reach out to us via our in-app chat or by sending us an email to [email protected].

Analyzing Header and Payload Data

Next Measuring Memory Usage