もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

SentryでUser情報を送る

はじめに

Sentryを使用していて、フロントからユーザー情報を送るようにしてみました。

ちなみに送らない場合は、ユーザー情報にはIPアドレスしか送られません。

f:id:kojirooooocks:20200305194835p:plain

ちなみに、フロントはVueを使っているので、Vuexで保存しているユーザー情報を送る想定です。

docs.sentry.io

本題

import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
Sentry.init({
  enabled: process.env.VUE_APP_ENVIRONMENT === 'production',
  dsn: process.env.VUE_APP_SENTRY_DNS,
  environment: process.env.VUE_APP_ENVIRONMENT,
  integrations: [new Integrations.Vue({ Vue, attachProps: true })]
});


import Vue from 'vue';
import App from '@/App.vue';
import router from '@/router';
import store from '@/store';

try {
  if (store.getters['AUTH/LOGGED_IN']) {
    const user = store.getters['AUTH/USER_DATA'];
    Sentry.setUser({
      id: user.id,
      email: user.email,
      username: user.username
    });
  }
}catch (error) {
  Sentry.captureException(error);
}

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
});

これでSentryにユーザー情報を送れるようになりました。

f:id:kojirooooocks:20200305195737p:plain

終わりに

簡単でした。バックエンドの方ももっと簡単なのかな? 今度やってみます。