フロントエンドフレームワークプラグインの導入¶

import { datafluxRum } from "@cloudcare/browser-rum-slim"

npm install @cloudcare/browser-rum @cloudcare/browser-rum-react

import { RouterProvider } from "react-router-dom"
import { datafluxRum } from "@cloudcare/browser-rum"
import { reactPlugin } from "@cloudcare/browser-rum-react"
import {
  createBrowserRouter,
} from "@cloudcare/browser-rum-react/react-router-v6"

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/users/:id", element: <UserDetail /> },
])

datafluxRum.init({
  applicationId: "<APPLICATION_ID>",
  site: "<PUBLIC_OPENWAY_URL>",
  clientToken: "<CLIENT_TOKEN>",
  service: "web-react",
  env: "production",
  version: "1.0.0",
  sessionSampleRate: 100,
  plugins: [reactPlugin({ router: true })],
})

root.render(<RouterProvider router={router} />)

import { ErrorBoundary } from "@cloudcare/browser-rum-react"

root.render(
  <ErrorBoundary
    fallback={({ resetError }) => (
      <button type="button" onClick={resetError}>リトライ</button>
    )}
    context={{ module: "checkout" }}
  >
    <App />
  </ErrorBoundary>
)

npm install @cloudcare/browser-rum @cloudcare/browser-rum-vue

import { createApp } from "vue"
import { createWebHistory } from "vue-router"
import { datafluxRum } from "@cloudcare/browser-rum"
import { vuePlugin } from "@cloudcare/browser-rum-vue"
import {
  createRouter,
} from "@cloudcare/browser-rum-vue/vue-router-v4"

const app = createApp(App)
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/users/:id", component: UserDetail },
  ],
})

datafluxRum.init({
  applicationId: "<APPLICATION_ID>",
  site: "<PUBLIC_OPENWAY_URL>",
  clientToken: "<CLIENT_TOKEN>",
  service: "web-vue",
  env: "production",
  version: "1.0.0",
  sessionSampleRate: 100,
  plugins: [vuePlugin({ app, router: true })],
})

app.use(router)
app.mount("#app")

import Vue from "vue"
import { datafluxRum } from "@cloudcare/browser-rum"
import { vuePlugin } from "@cloudcare/browser-rum-vue"
import VueRouter from "@cloudcare/browser-rum-vue/vue-router-v3"

Vue.use(VueRouter)
const router = new VueRouter({ routes })

datafluxRum.init({
  applicationId: "<APPLICATION_ID>",
  site: "<PUBLIC_OPENWAY_URL>",
  clientToken: "<CLIENT_TOKEN>",
  plugins: [vuePlugin({ app: Vue, router: true })],
})

new Vue({ router, render: (h) => h(App) }).$mount("#app")

npm install @cloudcare/browser-rum @cloudcare/browser-rum-angular

import { bootstrapApplication } from "@angular/platform-browser"
import { provideRouter } from "@angular/router"
import { datafluxRum } from "@cloudcare/browser-rum"
import { angularPlugin } from "@cloudcare/browser-rum-angular"
import {
  provideRumErrorHandler,
  provideRumRouter,
} from "@cloudcare/browser-rum-angular/providers"

datafluxRum.init({
  applicationId: "<APPLICATION_ID>",
  site: "<PUBLIC_OPENWAY_URL>",
  clientToken: "<CLIENT_TOKEN>",
  service: "web-angular",
  env: "production",
  version: "1.0.0",
  sessionSampleRate: 100,
  plugins: [angularPlugin({ router: true })],
})

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideRumRouter(),
    provideRumErrorHandler(),
  ],
})