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 Coralogix build plugin for your bundler. These plugins generate the metadata assets required to associate runtime errors with the originating micro frontend.

Supported build plugins:

• Webpack
• Esbuild
• Vite

Metadata output directory

By default, Coralogix build plugins generate the cx-metadata.json file in the root of the build output. In micro frontend architectures, assets are often emitted to nested or non-root directories.

Use the outputDir option to control where this metadata file is written. This ensures the RUM browser SDK can correctly associate runtime errors with the originating micro frontend when assets are served from custom paths.

The outputDir value should match the directory from which the micro frontend’s build artifacts are served.

You only need to configure outputDir if your micro frontend assets are served from a non-root directory.

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'
      })
  ],
})

Vite plugin

// vite.config.js
import { defineConfig } from 'vite';
import { coralogixVitePlugin } from '@coralogix/vite-plugin';

export default defineConfig({
  plugins: [
    coralogixVitePlugin({
      app: 'test-app',
      version: '1.0.0',
      outputDir: 'dist/build/mfe', // directory where cx-metadata.json is generated
    })
  ]
});

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 support@coralogix.com.