I have followed the instructions on the github documentation (https://github.com/MiniProfiler/rack-mini-profiler)
The speed badge is showing on the rails generated FE (localhost:3000 that is not public facing) but I'm not sure how to implement it for the React app (localhost:3001).
I am trying to get it to work with a react frontend, and have used the example of how they do this in a React useEffect but have tried to alter it to fit my application.
app/hooks/useMiniProfiler.tsx
import { useEffect } from "react";
const useMiniProfiler = () => {
useEffect(() => {
const script = document.createElement('script')
script.async = true
script.src =
'/mini-profiler-resources/includes.js?v=12b4b45a3c42e6e15503d7a03810ff33'
script.type = 'text/javascript'
script.id = 'mini-profiler'
script.setAttribute(
'data-css-url',
'/mini-profiler-resources/includes.css?v=12b4b45a3c42e6e15503d7a03810ff33'
)
script.setAttribute('data-version', '12b4b45a3c42e6e15503d7a03810ff33')
script.setAttribute('data-path', '/mini-profiler-resources/')
script.setAttribute('data-horizontal-position', 'left')
script.setAttribute('data-vertical-position', 'top')
script.setAttribute('data-ids', '')
script.setAttribute('data-trivial', 'false')
script.setAttribute('data-children', 'false')
script.setAttribute('data-max-traces', '20')
script.setAttribute('data-controls', 'false')
script.setAttribute('data-total-sql-count', 'false')
script.setAttribute('data-authorized', 'true')
script.setAttribute('data-toggle-shortcut', 'Alt+P')
script.setAttribute('data-start-hidden', 'false')
script.setAttribute('data-collapse-results', 'true')
script.setAttribute('data-hidden-custom-fields', '')
script.setAttribute('data-html-container', 'body')
document.head.appendChild(script)
})
}
export default useMiniProfiler
I am not sure where I should be implementing this, as I want it to sit on top of the application and have the speed badge show on every page.