How to implement Rollbar SDK using Vue 3?

Question

I am trying to figure out the right way to implement the rollbar SDK in Vue 3 using the composition API and typescript. According to the docs they are implementing it with Vue.prototype.$rollbar (as seen in the rollbar docs here). I found the method they use to replace Vue.prototype in the vue3 docs but it seems to be only for the options API. Any thoughts?

Answer 1

Was just looking for this myself. Heres what I did.

In main.js

import { createApp } from "vue";
import App from "./App.vue";
import Rollbar from "rollbar";

const rollbar = new Rollbar({
  accessToken: process.env.POST_CLIENT_ITEM_ACCESS_TOKEN,
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
    environment: process.env.NODE_ENV,
  },
});

const app = createApp(App);
app.config.errorHandler = (err, vm, info) => {
  rollbar.error(err);
  throw err; // rethrow
};
app.config.globalProperties.$rollbar = rollbar;
app.mount("#app");