1

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.

izzo
  • 11
  • 1

0 Answers0