@diwala/logger

This module has two sub-modules. error-logging and analytics. Services in both must implement the interface defined in AbstractLoggerService.

Note: In micro-frontend architecture, error logging should be managed inside each app separately. Two apps should not share the same instance of a error logger. Fex we need to have separate Sentry projects for each micro-frontend. Analytics on the other hand should be platform-wide. Meaning we have singleton services for analytics throughout the whole platform.

Error logging

error-logging sub-module exposes,

• Classes for different error logging services. Ex: SentryErrorLogger.
• DiwalaWebError class which can be used to construct errors.

How to use

import { ErrorLogging } from '@diwala/logger';

export const errorLogger = new ErrorLogging.SentryErrorLogger(initData); //Use this instance of error logger anywhere in the micro-app.

const error = new DiwalaWebError('ErrorName', 'Message', 'FunctionError'); // We can use DiwalaWebError.fromError(error: Error | string) to create errors with type 'General'
errorLogger.push(error); //.push() accepts Error and string types as well.

single-spa-react provides a built-in react error boundary. We can make use of it to handle all errors thrown anywhere in the app. So in the entry file of the single-spa react micro app,

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err) {
    if (err) errorLogger.push(err);
    return (
      <ErrorFallback
        image={Avatars.AVATAR_2}
        title="Oops!"
        description="Something went wrong at our end. It’s not you, it’s us. Sorry about that."
      />
    );
  },
});

Analytics

analytics sub-module exposes,

• Classes for different analytics services: MixpanelAnalyticsService