Can we use firebase crashlytics for our web application?

Question

I have a web application and I want to track its crashing reports. Can I use Firebase crashlytics or Fabric for this purpose. In their site its mentioned its only for Android or ios.

Regards, Makrand

Answer 1

While there is still no Firebase Crashlytics for web, google offers Google Cloud's operations suite (formerly Stackdriver) with error reporting functionality - it keeps track of all errors with ability to mark them as resolved (it can also send email notifications about new errors):

You can access it using the below url (make sure to put your firebase {project_id} in the link before clicking it):

https://console.cloud.google.com/errors?project={project_id}

There are two ways on how to use it:

1. Easy way, limited flexibility.

Every console.error(new Error(...)) reported from your firebase function is automatically tracked in the Stackdriver error logging platform. So you just need to send an error report from your web app to your firebase function and log it using console.error inside that function.

Note, only an instances of Error object will be sent to the Stackdriver platform. For example console.error("{field1: 'text'}") won't be sent to Stackdriver. More info on that in this doc

2. More comprehensive way that provides an additional control (you can also report userId, your custom platform name, it's version, user agent, etc):

Here is a quick snippet on how it can be used (in our case we first send the error log from web app to our server and then report the error to Stackdriver):

in firebase nodejs:

    const {ErrorReporting} = require('@google-cloud/error-reporting');

    let serviceAccount = {...} //service account is your firebase credetials that holds your secret keys etc. See below for more details.
    let config = {
        projectId: serviceAccount.project_id,
        reportMode: "always",
        credentials: serviceAccount
    }
    let errors = new ErrorReporting(config);

Report error to Stackdriver from nodejs:

async function reportError(message){

//message is a string that contains the error name with an optional
//stacktrace as a string representing each stack frame separated using "\n". 
//For example:
//message = "Error: Oh-hoh\n at MyClass.myMethod (filename.js:12:23)\n etc.etc." 

    const errorEvent = this.errors.event()
        .setMessage(message)
        .setUser(userId)
        .setServiceContext("web-app", "1.0.0")

   await errors.report(errorEvent)
}

More info about the Stackdriver library is available in this doc. And more info about the stacktrace and it's format can be found in the docs here

A few notes on setting it up:

You need to enable two things:

1. Enable Stackdrive api for your project using the link below (make sure to set your firebase {project_id} in the url below before clicking it)

https://console.developers.google.com/apis/library/clouderrorreporting.googleapis.com?project={project_id}

2. Make sure to also grant "Error writer" permission to the firebase service account so Stackdriver can receive the error logs (service account is a sort of representation of a "user" for your firebase project who accesses the services)

To grant the premission, follow the below steps:

1. first locate the "Firebase service account" using your firebase dashboard link (you can find it below) and remember it's value - it looks something like firebase-adminsdk-{random_symbols}@{project_id}.iam.gserviceaccount.com

2. Then open gcloud console under "Access"->"IAM". Or use the following link:

https://console.cloud.google.com/access/iam?project={project_id} <- put your firebase project id here

3. Locate your Firebase service account from the step 1.

4. Press edit for that account and add "Errors writer" permission:

Where to find the serviceAccount.json:

Regarding the serviceAccount - this is a universal credentials that can be used to authenticate many google services including the Stackdriver. You can obtain yours from your firebase dashboard using the url below (just put your firebase project_id in the link before using it):

https://console.firebase.google.com/u/0/project/{project_id}/settings/serviceaccounts/adminsdk

Open it and click "generate new credentials". This will generate a new service account and download the serviceAccount.json that you need to keep safe (you won't be able to get it again unless you generate a new one).

Answer 2

There is feature request: https://github.com/firebase/firebase-js-sdk/issues/710

Looks like it's not supported at all, fabric didn't supported crashlytics on web either so it looks like there are maybe some alternatives like https://www.bugsnag.com but I would like to have it too in one place. Don't see difference between web, android or iOS clients at all, don't know why this is not supported.

But for some possible solution for Vue framework is to catch errors and send it to google analytics where you can connect also your firebase mobile apps. I think to try it this way for now. I didnt tested it yet so don't know if I have to catch window errors too.

Vue.config.errorHandler = function (error) {
  //Toast.error(error.message)
  console.warn(error.message)
  //send error as event to google analytcs... 
  if (error) message = error.stack;
  ga('send', 'event', 'Vue.config.errorHandler', message, navigator.userAgent);
}

window.onerror = function(message, source, lineno, colno, error) {
  // maybe we need to also catch errors here and send to GA
}

But I found something like this too for typescript https://github.com/enkot/catch-decorator

Answer 3

Apparently Sentry now supports several web frameworks out of the box. I have recently integrated Sentry crashlytics for Django App.

see here: https://sentry.io/platforms/