Merge pull request #32 from getmentor/faro

Introduce Grafana Faro

package.json

@@ -19,6 +19,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@grafana/faro-web-sdk": "^1.4.2",
+    "@grafana/faro-web-tracing": "^1.4.2",
     "@headlessui/react": "^1.6.6",
     "@microsoft/applicationinsights-react-js": "^3.4.0",
     "@microsoft/applicationinsights-web": "^2.8.7",

src/lib/faro.js

@@ -0,0 +1,22 @@
+import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk'
+//import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+
+export const initFaro = () => {
+  var faro = initializeFaro({
+    url: process.env.NEXT_PUBLIC_FARO_ENDPOINT + process.env.NEXT_PUBLIC_FARO_INSTRUMENTATION_KEY,
+    app: {
+      name: 'getmentor_dev',
+      version: '1.0.0',
+      environment: 'production',
+    },
+
+    instrumentations: [
+      // Mandatory, overwriting the instrumentations array would cause the default instrumentations to be omitted
+      ...getWebInstrumentations(),
+
+      // Initialization of the tracing package.
+      // This packages is optional because it increases the bundle size noticeably. Only add it if you want tracing data.
+      //new TracingInstrumentation(),
+    ],
+  })
+}

src/pages/index.js

@@ -17,6 +17,7 @@ import analytics from '../lib/analytics'
 import MetaHeader from '../components/MetaHeader'
 import seo from '../config/seo'
 import VisibilitySensor from 'react-visibility-sensor'
+import { initFaro } from '../lib/faro'
 
 export async function getServerSideProps(context) {
   const pageMentors = await getAllMentors({ onlyVisible: true })
@@ -50,6 +51,10 @@ function onSponsorsShown(isVisible) {
 }
 
 export default function Home({ pageMentors }) {
+  useEffect(() => {
+    initFaro()
+  })
+
   const [mentors, searchInput, hasMoreMentors, setSearchInput, showMoreMentors, appliedFilters] =
     useMentors(pageMentors)
 

src/pages/mentor/[slug]/contact.js

@@ -13,6 +13,7 @@ import Image from 'next/image'
 import { InlineWidget } from 'react-calendly'
 import Koalendar from '../../../components/Koalendar'
 import { imageLoader } from '../../../lib/azure-image-loader'
+import { initFaro } from '../../../lib/faro'
 
 export async function getServerSideProps(context) {
   const mentor = await getOneMentorBySlug(context.params.slug)
@@ -31,6 +32,10 @@ export async function getServerSideProps(context) {
 }
 
 export default function OrderMentor({ mentor }) {
+  useEffect(() => {
+    initFaro()
+  })
+
   const [readyStatus, setReadyStatus] = useState('')
   const [formData, setFormData] = useState()
 

src/pages/mentor/[slug]/index.js

@@ -15,6 +15,7 @@ import { htmlContent } from '../../../lib/html-content'
 import { polyfill } from 'interweave-ssr'
 import pluralize from '../../../lib/pluralize'
 import { imageLoader } from '../../../lib/azure-image-loader'
+import { initFaro } from '../../../lib/faro'
 
 // This enables rendering profile HTML on server
 polyfill()
@@ -39,6 +40,10 @@ export default function Mentor(props) {
   const mentor = props.mentor
   const title = mentor.name + ' | ' + seo.title
 
+  useEffect(() => {
+    initFaro()
+  })
+
   useEffect(() => {
     analytics.event('View Mentor Page', {
       'Mentor Id': mentor.id,

src/pages/ontico.js

@@ -14,6 +14,7 @@ import MentorsSearch from '../components/MentorsSearch'
 import MetaHeader from '../components/MetaHeader'
 import analytics from '../lib/analytics'
 import { useEffect } from 'react'
+import { initFaro } from '../lib/faro'
 
 export async function getServerSideProps(context) {
   const allMentors = await getAllMentors({ onlyVisible: true })
@@ -66,6 +67,10 @@ function Feature({ title, text, imageUrl }) {
 }
 
 export default function Ontico({ pageMentors }) {
+  useEffect(() => {
+    initFaro()
+  })
+
   const [mentors, searchInput, hasMoreMentors, setSearchInput, showMoreMentors, appliedFilters] =
     useMentors(pageMentors)
 

src/pages/profile.js

@@ -12,6 +12,7 @@ import Notification from '../components/Notification'
 import Error from 'next/error'
 import analytics from '../lib/analytics'
 import Link from 'next/link'
+import { initFaro } from '../lib/faro'
 
 export async function getServerSideProps(context) {
   context.query.id = parseInt(context.query.id, 10)
@@ -37,6 +38,10 @@ export async function getServerSideProps(context) {
 }
 
 export default function Profile({ errorCode, mentor }) {
+  useEffect(() => {
+    initFaro()
+  })
+
   useEffect(() => {
     if (mentor) {
       analytics.event('Open Profile', {