Karma: Missing error handler on `socket`. TypeError: (msg || "").replace is not a function Error

[whelanp]

I'm getting the above error when I try to run jenkins jobs using karma. Any ideas what could be causing this?

Expected behavior

karma runs angular2 tests on jenkins, they run fine on desktop.

Actual behavior

`Missing error handler on `socket`.
TypeError: (msg || "").replace is not a function
    at /home/hudson/.hudson/jobs/workspace/example/node_modules/karma/lib/reporter.js:45:23
    at onBrowserError (/home/hudson/.hudson/jobs/workspace/example/node_modules/karma/lib/reporters/base.js:58:60)
    at null.<anonymous> (/home/hudson/.hudson/jobs/workspace/example/node_modules/karma/lib/events.js:13:22)
    at emitTwo (events.js:100:13)
    at emit (events.js:185:7)
    at onKarmaError (/home/hudson/.hudson/jobs/workspace/example/node_modules/karma/lib/browser.js:95:13)
    at Socket.<anonymous> (/home/hudson/.hudson/jobs/workspace/example/node_modules/karma/lib/events.js:13:22)
    at emitOne (events.js:95:20)
    at Socket.emit (events.js:182:7)
    at Socket.onevent (/home/hudson/.hudson/jobs/workspace/example/node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/home/hudson/.hudson/jobs/workspace/example/node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/home/hudson/.hudson/jobs/workspace/example/node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.emit (/home/hudson/.hudson/jobs/workspace/example/node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/home/hudson/.hudson/jobs/workspace/example/node_modules/socket.io-parser/index.js:247:12)
    at Client.ondata (/home/hudson/.hudson/jobs/workspace/example/node_modules/socket.io/lib/client.js:175:18)
    at emitOne (events.js:90:13)`

Enviroment Details

• Karma version (output of karma --version):
• Relevant part of your karma.config.js file
• node --version
  v5.7.0
• npm --version
  3.6.0
  karma version
  0.13.21
  

  Steps to reproduce the behaviour

1. run tests in jenkins, (independent of the tests running) the above stacktrace is displayed

[whelanp]

Just giving an update on this issue, I eventually got console access to the build server and found the root cause of this issue.

In my files section I had the following entry

{ pattern: 'node_modules/rxjs/bundles/rx.js', included: true, watched: true }

The file name is actually Rx.js and not rx.js, this was not a problem with case insensitive windows. Fixing the filename case and everything is now consistent.

{ pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true }

I appreciate any time anyone spent on this issue till now. Turns out the exception I focused in on was a symptom of the file not being found.

Thanks
Paul

[dignifiedquire]

Thanks for the update, and happy to hear you were able to fix it.

[tlefevre]

@dignifiedquire there's still a problem to be fixed and that is the error message. It is very unhelpful and it would be very much appreciated by the community, I'm guessing, if the quality of that was improved. As shown here, the problem was a missing file. A missing file error would be much more appropriate and helpful to users.

Update: My problem was IntelliJ messing up imports in a spec. It couldn't handle angular2 dependencies properly and gave the wrong path. Build worked fine, but testing failed.

[klinki]

I have the same problem, but I already have Rx.js file with capital R. (And I'm using my desktop computer with Windows).

What else could cause this problem?

[JohnMunsch]

I can answer that question: traceur-runtime.js

Or rather, the lack of it. For some bizarre reason, without the traceur-runtime.js in the mix PhantomJS blows up badly while trying to run Angular2 unit tests. This doesn't seem to be a Karma thing at all, but I thought I'd mention it here so some people could fix their problem. I installed it via bower ("bower install traceur-runtime") and included it in my karma.conf.js ("{pattern: 'bower_components/traceur-runtime/traceur-runtime.js', included: true, watched: true}") and magically PhantomJS suddenly worked just as well as Chrome had.

[JoostvdB94]

I had this problem a few times. I managed to fix this by checking the files: [] section in the karma.conf.js. Make sure all the sources that are needed for your application (in my case Angular2) are in that array. Just as you would add them to index.html

[Cuel]

I can answer that question: traceur-runtime.js
Or rather, the lack of it. For some bizarre reason, without the traceur-runtime.js in the mix PhantomJS blows up badly while trying to run Angular2 unit tests. This doesn't seem to be a Karma thing at all, but I thought I'd mention it here so some people could fix their problem. I installed it via bower ("bower install traceur-runtime") and included it in my karma.conf.js ("{pattern: 'bower_components/traceur-runtime/traceur-runtime.js', included: true, watched: true}") and magically PhantomJS suddenly worked just as well as Chrome had.

@JohnMunsch shouldn't es6-shim make up for that? I'm also just getting "module is not defined" if I include it in the karma.conf.js files

[yfain]

I'm getting this error if I run my Karma tests from the console opened inside WebStorm IDE. The same configuration runs fine from the Terminal window on my Mac OS.

[JohnMunsch]

@Cuel I agree, you would think that es6-shim would cover everything. But I'm not the first to find that traceur-runtime had to be added back to the mix in order for PhantomJS to work.

[dignifiedquire]

If you don't want to use traceur-runtime you could try core.js which karma uses itself.

[drew-moore]

@yfain same story here, but on Windows with IntelliJ: I get this error when I try to run the command from IntelliJ console, but it runs just fine when executed from Powershell. I'm opening a ticket with Jetbrains now,

[shaikhspear16]

I get this error when i add 'browserify' to preprocessors.

 preprocessors: {
            'unit-test/linkers/**/!(*spec).js': ['coverage','browserify']
        }

I was getting require not found when running karma, that made me add browserify, now i get this error.

[gabor-farkas]

I think this is really a bug somewhere, though I'm not sure where.
The actual excepion occurs because the karma reporter assumes that only strings come as error messages from the browser, but that's apparently not the case.
To have a guess what causes the actual error for you, you can just open up node_modules/karma/lib/reporter.js and change the method around line 42:

  return function (msg, indentation) {
    // remove domain and timestamp from source files
    // and resolve base path / absolute path urls into absolute path
    // ---
    if (msg && typeof(msg) !== 'string') {
      console.error('msg', msg);
    }
    // ---
    msg = (msg || '').replace(URL_REGEXP, function (_, prefix, path, __, ___, line, ____, column) {

For my particular case it tells me that some error occured in SystemJS, though It doesn't tell more.

The actual fix would be either not to assume here that msg is a string, or maybe the browsers should send objects as error messages.

[randyaa]

i fixed this locally by adding the following lines to karma/lib/reporter.js @ line 45:

      if ( typeof msg !== "string") {
          msg = JSON.stringify(msg);
      }

so at least there's output

[dileepkeeppalli]

I faced this issue when I use node-forge with my angular 2 application.
Resolved this issue by adding in the dependency file in

system.config.js
'node-forge': 'node_modules/node-forge/js/forge.bundle',

karma.config.js
{pattern: 'node_modules/node-forge/js/forge.bundle.js', included: false, watched: false},

This issue happened for me because the dependency path has not set properly

[nonmanifold]

thats probably because msg became an array of strings, I'll look up into it later today

[dileepkeeppalli]

@nonmanifold Issue has fixed for me

[saranyapm]

I am also getting the same issue..Tried many options but everything failed :( :(

---------------karma-test-shim ----------------------
/_global jasmine, karma, window_/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

karma.loaded = function () {
};

function isJsFile(path) {
return path.slice(-3) == '.js';
}

function isSpecFile(path) {
return path.slice(-8) == '.spec.js';
}

function isBuiltFile(path) {
var builtPath = '/base/build/';
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

function excludeLibFile(path) {
// var builtPath = '/base/build/lib';
var builtPath = '/base/build/lib';
return (path.substr(0, builtPath.length) != builtPath);
}

var allSpecFiles = Object.keys(window.karma.files)
.filter(excludeLibFile)
.filter(isSpecFile)
.filter(isBuiltFile);

// Load our SystemJS configuration.
System.config({
baseURL: '/base'
});
System.config(
{
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
map: {
'app': 'built',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

// angular testing umd bundles
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',

// other libraries
'rxjs': 'npm:rxjs',

},
packages: {
'app': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
}
}
});

Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
var testing = providers[0];
var testingBrowser = providers[1];

testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule,
testingBrowser.platformBrowserDynamicTesting());

}).then(function() {
// Finally, load all spec files.
// This will run the tests directly.
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
}));

}).then(karma.start, karma.error);

module.exports = function(config) {
config.set({

basePath: '',

frameworks: ['jasmine'],

files: [
// Polyfills.
  'node_modules/es6-shim/es6-shim.js',

  'node_modules/reflect-metadata/Reflect.js',

  // System.js for module loading
  'node_modules/systemjs/dist/system-polyfills.js',
  'node_modules/systemjs/dist/system.src.js',

  // Zone.js dependencies

  'node_modules/zone.js/dist/zone.js',
  'node_modules/zone.js/dist/proxy.js',
  'node_modules/zone.js/dist/sync-test.js',
  'node_modules/zone.js/dist/jasmine-patch.js',
  'node_modules/zone.js/dist/async-test.js',
  'node_modules/zone.js/dist/fake-async-test.js',




 // RxJs.
  { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
  { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },



  {pattern: 'karma-test-shim.js', included: true, watched: true},

  // paths loaded via module imports
  // Angular itself
 // paths loaded via module imports
  // Angular itself
  {pattern: 'node_modules/@angular/**/*.js', included: false, watched: true},
  {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true},

  // Our built application code
  {pattern: 'build/**/*.js', included: false, watched: true},

  // paths loaded via Angular's component compiler
  // (these paths need to be rewritten, see proxies section)
  {pattern: 'build/**/*.html', included: false, watched: true},
  {pattern: 'build/**/*.css', included: false, watched: true},

  // paths to support debugging with source maps in dev tools
  {pattern: 'src/**/*.ts', included: false, watched: false},
  {pattern: 'build/**/*.js.map', included: false, watched: false}
],

// proxied base paths
proxies: {
  // required for component assests fetched by Angular's compiler
  "/app/": "/base/build/app/"
},

plugins: [
    "karma-jasmine",
    "karma-coverage",
    "karma-chrome-launcher",
    "karma-htmlfile-reporter"
],


preprocessors: {
  // source files, that you wanna generate coverage for
  // do not include tests or libraries
  // (these files will be instrumented by Istanbul)
  '/base/build/app/**/!(*.spec).js': ['coverage']
},

htmlReporter: {
  outputFile: 'reports/coverage/index.html'
},

// optionally, configure the reporter
coverageReporter: {
  type: 'json',
  dir: 'reports/',
  subdir: '.',
  file: 'coverage.json'
},

reporters: ['progress', 'html', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false

})
}

Can anyone correct me......
Thanks

[dileepkeeppalli]

@saranyapm Hey
Did you add any new node module and that dependency in any of your angular2 application component?
If so you have to set the path in system.config.js and karma.config.js then probably you will come out from this issue.
Sample code
system.config.js
`'node-xyz': 'node_modules/node-xyz/xyz'

karma.config.js
{pattern: 'node_modules/node-xyz/xyz.js', included: false, watched: false},

please try this

[saranyapm]

@dileepkeeppalli No..No such module. Now I am trying only with app component. Still I am facing the same issue.