Show error message on Snackbar from GlobalErrorHandler

[Navaneetha Krishnan S]

I have a requirement where I need to show the error messages (if it occurs) in a snackbar using angular material. I have written a GlobalErrorhandler which works fine i.e. gets triggered whenever any errors occurred inside the application.

Inside the GlobalErrorHandler I am trying to log the exception and also I need to display the Error message to the user using Snackbar. But when i add the snackbar reference to the GlobalErrorHandler, I am getting the exception as below

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (compiler.es5.js:11805)
    at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (compiler.es5.js:18657)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (compiler.es5.js:26988)
    at compiler.es5.js:26933
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

I am not understanding what is the cyclic dependency here? why I am not able to instantiate snackbar in the globalerrorhandler?

If it is not a correct approach of showing snackbar in a error handler, then what is the alternate solution for the problem i.e. to display the error message in a snackbar?

Note: any exception occurs inside the application should be displayed in snackbar

my globalerrorhandler code looks like below

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import * as StackTrace from 'stacktrace-js';
import { SessionService } from '../Services/SessionService';
import { MdSnackBar } from '@angular/material';

//import { Constants } from './Constants';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private injector: Injector,
    public snackBar: MdSnackBar,
    private _SessionService: SessionService)
  { }

  handleError(error) {
    debugger;
    const location = this.injector.get(LocationStrategy);
    const message = error.message ? error.message : error.toString();
    const url = location instanceof PathLocationStrategy
      ? location.path() : '';
    // get the stack trace, lets grab the last 10 stacks only
    StackTrace.fromError(error).then(stackframes => {
      debugger;
      const stackString = stackframes
        .splice(0, 20)
        .map(function (sf) {
          return sf.toString();
        }).join('\n');
      // log on the server
      console.log("_SessionService.loggedinuser " + this._SessionService.LoggedInUser);
      console.log("this._SessionService.LAST_API_URL : " + this._SessionService.LAST_API_URL);
      console.log("message : " + message);
      console.log("url : " + url);
      console.log("stack : " + stackString);

      this.snackBar.open("Error Occurred : " + message, "OK", {
        duration: this._SessionService.SnackbarTimer,
      });

    });
    throw error;
  }

}