"ReferenceError: StackTrace is not defined" in Vue app with "stackdriver-errors-js"

Question

I am trying to integrate the stackdriver-error-js library into my Vue project as a module.

The code and the setup:

in package.json

    "stackdriver-errors-js": "^0.2.0"

in bootstrap.js

   import errorHandler from './error/error-reporting';

in error-reporting.js

import { StackdriverErrorReporter } from 'stackdriver-errors-js';   

let errorHandler;

errorHandler = new StackdriverErrorReporter();   
errorHandler.start({
    key: "{{.Config.StackDriverApiKey}}",
    projectId: "{{.Config.StackDriverProject}}",
    service: "{{.Config.GoogleCloudProjectID}}",
    version: "{{.Copacknfig.GaeEnv}}",
    disabled: false
});

export default errorHandler;

The actual error

The error I got now is (console output and test)

[vue-devtools] Ready. Detected Vue v2.4.2
(function testErrorReporting() {window.onerror(null, null, null, null, new Error('Test: Something broke!'));})();

stackdriver-errors.js:109 Uncaught ReferenceError: StackTrace is not defined
    at StackdriverErrorReporter.webpackJsonp.556.StackdriverErrorReporter.report (stackdriver-errors.js:109)
    at window.onerror (stackdriver-errors.js:67)
    at testErrorReporting (<anonymous>:1:40)
    at <anonymous>:1:111

and line (stackdriver-errors.js:109)

...    
StackTrace.fromError(err).then(function(stack){
...

Answer 1

If you do not load the stackdriver-errors-concat.min.js file, you also manually need to also the stacktrace-js module.

stackdriver-errors expects a StackTrace object to be present.

Answer 2

Since the library you want to use is experimental, and therefore cannot be used in a production environment, it would be better to use a different library which has been tested and validated for production use.

I suggest using this other library instead, which includes features related to Stackdriver error reporting for Node.js and JavaScript.

First of all, install the dependency by running this command:

  npm install --save @google-cloud/error-reporting

This will add the dependency automatically to package.json.

In error-reporting.js, you can add the dependencyby adding this to your code (All the parameters are optional):

var errors = require('@google-cloud/error-reporting')({
  projectId: 'my-project-id',
  keyFilename: '/path/to/keyfile.json',
  credentials: require('./path/to/keyfile.json'),
  // if true library will attempt to report errors to the service regardless
  // of the value of NODE_ENV
  // defaults to false
  ignoreEnvironmentCheck: false,
  // determines the logging level internal to the library; levels range 0-5
  // where 0 indicates no logs should be reported and 5 indicates all logs
  // should be reported
  // defaults to 2 (warnings)
  logLevel: 2,
  // determines whether or not unhandled rejections are reported to the
  // error-reporting console
  reportUnhandledRejections: true,
      serviceContext: {
      service: 'my-service',
      version: 'my-service-version'
  }
});

After that, use this code to test if the error is properly reported by Stackdriver:

errors.report(new Error('Something broke!'));

Please be aware that this library is currently on a beta stage, so there might be some changes to it in the future.