Add automatic source maps notifier command

[Exelord]

Description

This PR will add ember cli command: notify-rollbar-sourcemaps It will automatically notify Rollbar about new source maps.

Trigger a download for each of your minified files. Doing this will reduce the number of errors that the source map isn't applied to (since we'll have a greater chance of downloading the source map before the first error after a deploy occurs).

REF: https://rollbar.com/docs/source-maps/

TODO

• [ ] Readme
• [ ] Tests

API

Command

ember notify-rollbar-sourcemaps

Required options

token [alias: t] - Your rollbar access token. Should be a post_server_item token (the same one that you use for sending deploy notifications). host [alias: h] - Your app host url eg: https://exelord.github.io/ember-rollbar-client

Example

ember notify-rollbar-sourcemaps -t MY123SUPER877TOKEN -h https://exelord.github.io/ember-rollbar-client

Using Source Maps On Many Domains

If you'd like to use source maps with the same code that is deployed on many domains, use the following code:

var _rollbarConfig = {
  // ...
  transform: function(payload) {
    var trace = payload.body.trace;
    // Change 'yourdomainhere' to your domain.
    var locRegex = /^(https?):\/\/[a-zA-Z0-9._-]+\.yourdomainhere\.com(.*)/;
    if (trace && trace.frames) {
      for (var i = 0; i < trace.frames.length; i++) {
        var filename = trace.frames[i].filename;
        if (filename) {
          var m = filename.match(locRegex);
          // Be sure that the minified_url when uploading includes 'dynamichost'
          trace.frames[i].filename = m[1] + '://dynamichost' + m[2];          
        }
      }
    }
  }
}

[Exelord]

Would someone be able to confirm if is it working properly?

[viniciussbs]

I'll give it a try

[viniciussbs]

Hi, @Exelord. I'm going to give this version a try today, but it is outdated. It seems like the code version thing is already done in master now. Could you update it, please?

[Exelord]

YEAH, I will update it in a while, thanks! :)

[Exelord]

@viniciussbs updated, have fun :)

[vladucu]

@Exelord can we rebase this on latest release...I can give it a test too

[Exelord]

It would be awesome :) Done!

[vladucu]

thx @Exelord

[xn]

#31 you need to change your travisCI node js version to 6

[xn]

Oh, and here is the same thing for uploads:

/* eslint-env node */
const fs = require('fs');
const gitRepoVersion = require('git-repo-version');
const fetch = require('node-fetch');
const RSVP = require('rsvp');
const FormData = require('form-data');

const rollbarUrl = 'https://api.rollbar.com/api/1/sourcemap';

function codeVersion() {
  return gitRepoVersion({ shaLength: 7 });
}

module.exports = {
  name: 'upload-rollbar-sourcemaps',
  description: 'Upload sourcemaps to rollbar.',
  works: 'insideProject',

  availableOptions: [
    { name: 'token', type: String, aliases: ['t'], required: true },
    { name: 'host', type: String, aliases: ['h'], required: true },
    { name: 'version', type: String, aliases: ['v'], default: codeVersion() },
    { name: 'assets-dir', type: String, default: 'dist/assets', aliases: ['d'] },
    { name: 'assets-url', type: String, default: 'assets', aliases: ['p'] },
  ],

  run(options) {
    let host = options.host;
    let token = options.token;
    let version = options.version;
    let assetsDir = options.assetsDir;
    let assetsUrl = options.assetsUrl;

    let assetsPath = `${this.project.root}/${assetsDir}`;
    let assets = fs.readdirSync(assetsPath);
    let jsFiles = assets.filter((path) => /\.js$/.test(path));
    let mapFiles = jsFiles.map((jsFile) => jsFile.replace(/(js)$/, "map"))

    this.ui.writeLine('Uploading to Rollbar...');

    let promises = jsFiles.map((jsFile) => {
      const idx = jsFiles.indexOf(jsFile);
      return this._uploadToRollbar(host, version, token, assetsUrl, assetsPath, jsFile, mapFiles[idx]);
    });

    return RSVP.all(promises).then(() => this.ui.writeLine('Uploading completed successfully!'));
  },

  _uploadToRollbar(host, version, token, assetsUrl, assetsPath, jsFile, mapFile) {
    const formData = new FormData();
    const jsFilePath = `${host}/${assetsUrl}/${jsFile}`;
    const mapFilePath = `${assetsPath}/${mapFile}`;
    const fileSize = fs.statSync(mapFilePath)['size'];

    formData.append('version', version);
    formData.append('access_token', token);
    formData.append('minified_url', jsFilePath);
    formData.append('source_map', fs.createReadStream(mapFilePath), { knownLength: fileSize });

    return fetch(rollbarUrl, { method: 'POST', body: formData })
      .then((res) => res.json())
      .then((json) => {
        if (json.err) {
          this.ui.writeLine('Notifying error!');
          throw `Rollbar status: '${json.message}'`;
        } else {
          this.ui.writeLine(`Reported file: '${jsFilePath}'`);
        }
      });
  }
}

[svvitale]

Really looking forward to having this integrated - anything I can do to help push it across the line?

[Exelord]

Any PR's with fixes are welcome :)

[svvitale]

The new command works well for me. I think a follow-on integration with ember-cli-deploy would be useful, but otherwise all is good. Anything else you want to test before this gets merged?

[Exelord]

Thanks for your help. :) I don't need this feature anymore, if you want it there are still few things missing:

• Fixing Tests
• Add readme
• Add tests

Feel free to open PRs to this one. I would be more than happy to merge it.

[viniciussbs]

@svvitale there is ember-cli-deploy-rollbar but it does too much thing. It would be nice if was splitted into to parts: one for integrating Rollbar into the app and another one for the source maps uploading. Then we could still use this addon here for the integration and use the ember-cli-deploy plugging just for the source maps uploading.

[st-h]

@viniciussbs I think it might be a good idea to get in touch with the ember-cli-deploy-rollbar maintainers. Unless there is a good reason to have two addons doing the same thing (maybe in totally different ways), the community has no need for redundancy. We probably would be much better off if we had an addon which takes care of the source maps and deploy workflow (ember-cli-deploy integration) and one which adds rollbar to your application and takes care of handling all the errors. According to their readme they seem to be very willing to adapt their addon to users needs. So maybe we could get them to join forces? @Exelord , What do you think about this?

[Exelord]

That would be perfect!

[xn]

I just want to put it out there that not all ember apps are going to use ember-cli-deploy. For example, ember-electron apps.

[viniciussbs]

"Unless there is a good reason to have two addons doing the same thing (maybe in totally different ways), the community has no need for redundancy. "

@st-h Indeed. @xn has a good point. I maybe ember-cli-deploy-rollbar could have both options: deploy using ember-cli-deploy and a ember-cli commands - it would be a matter of extract the common logic into a module and use it in both solutions, I guess.

I'll open an issue on ember-cli-deploy-rollbar to ask them to participate.

[viniciussbs]

About the solution proposed by this PR in the section "Using Source Maps On Many Domains", it won't work as suggested because of the issue with functions in environment config JSON. I could get it working doing what I've said there - I'm using curl though.

[xn]

@viniciussbs you can roll your own transform by dropping this in app/services/rollbar.js

import config from 'your-app-name/config/environment';
import { get, computed } from '@ember/object';
import { assign } from '@ember/polyfills';
import { isPresent } from '@ember/utils';
import ENV from '../config/environment';

export default RollbarService.extend({
  config: computed(function() {
    let transform = this.transform.bind(this);
    let { emberRollbarClient } = config;

    return assign({ transform }, emberRollbarClient);
  }).readOnly(),

  transform(payload) {
    // your code goes here

  }
});

[viniciussbs]

@xn Yep. That's exactly what I did. I've posted a code snippet similar to this one in the issue months ago. I've mentioned this here in case someone give this PR a try, since the proposed solution won't work.

If this PR get merged, it would be nice to put the instructions in the README.

[st-h]

Have you seen this fork - ember-cli-deploy-rollbar-sourcemap from ember-cli-deploy-rollbar? Seems to be an addon solely dedicated to just upload source maps to rollbar. I haven't tried it yet, though.

But yeah, we seem to have 8 rollbar addons by now. I hope that trend does not continue. But maybe we should think about a better approach to community addons anyways..

[viniciussbs]

@st-h I didn't know it. It's maintained by @bgentry, the maintainer of ember-apollo-client. He does a good job on ember-apollo-client. I'm sure he will be open to contribute some way.

[svvitale]

I vote to drop this PR and recommend @bgentry's addon for ember-cli-deploy integration. As much as I'd like all this functionality to be under one addon "roof", I think the requirements of the individual users are varied and keeping deployments separate from usage may be a good choice (at least for now).

[bgentry]

👍 I also use this addon and I agree that it makes sense to keep ember-cli-deploy integration separate.

I would welcome the additional usage of ember-cli-deploy-rollbar-sourcemap along with any feedback about how it works for others. I can't guarantee it works 100% correctly yet but if not it shouldn't be too far off.

[svvitale]

Worked great for me, @bgentry. Thanks for putting it together!

[xn]

I'm working on an electron app, so ember-cli-deploy doesn't work for me. I guess, I'll keep cobbling something together....

[viniciussbs]

@xn How do you deploy your app? Why ember notify-rollbar-sourcemaps would work but ember deploy production would not? I have never created an Electron app.

[xn]

@viniciussbs https://github.com/electron-userland/electron-packager

There is no deploy to a server. Electron is a local chromium app.

[xn]

I just added ember notify-rollbar-sourcemaps to my build script.

[viniciussbs]

There is no deploy to a server. Electron is a local chromium app.

@xn As far as I know, ember-cli-deploy itself does nothing; you need to rely on plugins to do everything. You could use just ember-cli-deploy-build to build your app and ember-cli-deploy-rollbar-sourcemap to upload its source maps to Rollbar. You don't need to install a plugin to actually deploy your build to a server, though.

[viniciussbs]

@xn Have you tried https://ember-electron.js.org/? There's an issue on their repo aiming to support ember-cli-deploy hooks. Maybe with that Electron devs could use ember-cli-deploy-rollbar-sourcemap without ember-cli-deploy.

[viniciussbs]

UPDATE: using this addon sending the version as "version + commit hash" and using ember-cli-deploy-rollbar-sourcemap with the same version format does not work. That happens because ember-cli-deploy-revision-data uses 8 chars for the hash instead of 7 chars. I've updated an existing issue on their repo about this.

[bgentry]

@viniciussbs just to confirm, you're saying this is an issue with ember-cli-deploy-rollbar? If so can you open an issue there?

[viniciussbs]

@bgentry the issue is on ember-cli-deploy-revision-data. I'll put the link again: https://github.com/ember-cli-deploy/ember-cli-deploy-revision-data/issues/22

[svvitale]

Getting the revisions to match took me a few attempts as well.

In deploy.js, make sure to choose git-commit as the revision-data type:

    'revision-data': {
      type: 'git-commit'
    }

Then in environment.js set the code_version to a 7-character slice of the hash:

    emberRollbarClient: {
      accessToken: process.env.ROLLBAR_CLIENT_ACCESS_TOKEN,
      enabled: environment !== 'local',
      payload: {
        environment: process.env.DEPLOY_TARGET,
        client: {
          javascript: {
            code_version: (process.env.CI_COMMIT_ID || '').substr(0, 7)
          }
        }
      }
    },

@Exelord, can we close out this PR? It seems we all agree that @bgentry's approach should be the recommended solution - I think avoiding additional issues and discussion being raised in this thread will help.

[Exelord]

What if someone would like to use his own flow without ember-cli-deploy and be able to execute it eg on ci?

[svvitale]

I guess I was leaning towards the perspective that ember-cli-deploy is really just a build pipeline. It doesn't have to include a true deploy step if that's not desired. So you could install ember-cli-deploy, ember-cli-deploy-revision-data, and ember-cli-deploy-rollbar and get just sourcemap uploads with no other deployment steps.

Alternatively, if someone was truly adverse to using the ember-cli-deploy pipeline, Rollbar's docs include an upload example using plain-old curl: https://docs.rollbar.com/docs/source-maps/#section-recommended-method-upload-pre-deploy

With these two paths, it feels like a dedicated upload command is unnecessary. These are just my opinions of course. Feel free to take what you like and leave the rest :).

[Exelord]

Basically, the idea of this addon was to cover the whole integration with Rollbar in one place and just expose the api. So all commands should be covered here, and all integrations like for ember-cli-deploy should just depend on it. That way, they would be just adapters and won't be responsible for integrating with the platform.

But it looks like you guys move the "idea" into other direction 😅