JavaScript: Rollbarのエラー通知をSnippetではなくRollbar.jsを使って行う

JavaScriptのエラー検知にRollbarを使用しているのですが、最近npmで公開されているRollbar.jsを利用するとSnipetを使わなくて済むことがわかったので利用方法をメモしておきます📝

公式ドキュメント記載のSnipetを利用する方法

公式ドキュメントのBrowserJSのQuick Startは、

docs.rollbar.com

以下のような形で記載されておあり、エラー通知用のSnipetを活用してエラーを通知するようになっています。

var _rollbarConfig = {
    accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
    captureUncaught: true,
    captureUnhandledRejections: true,
    payload: {
        environment: "production"
    }
};
// Rollbar Snippet
!function(r){var e={};f...
// End Rollbar Snippet

しかし、Snipetはminifiedされており、eslint等のチェックをいちいち無効化するのがめんどくさいのとバージョンアップも手動で行わないといけません。。。

npmに公開されているRollbar.jsを利用するとバージョンアップとかそのあたりをpackage.jsonで管理できそうです。

Rollbar.jsを使ったSnipetを使わずに通知を有効化する

www.npmjs.com

まずは以下のような形でRollbar.jsをinstallします。

$ yarn add rollbar
# or 
$ npm i rollbar

あとは以下のような形で利用するだけです✨

import Rollbar from "rollbar";

new Rollbar({
  accessToken: 'POST_CLIENT_ITEM_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
      environment: "production"
  }
});

Rollbarに明示的に通知を送りたいときには以下のような感じでexportして、

import Rollbar from "rollbar";

export default new Rollbar({
  accessToken: 'POST_CLIENT_ITEM_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
      environment: "production"
  }
}); 

以下のような形で利用できます。

import Rollbar from '@/my_exported_rollbar_path'

Rollbar.info('test rollbar post!')

やはり外部サービス系のmoduleは公式に管理されているものを利用できると便利ですね！