How Can I use "window.navigator.userAgent" to define browser

Developer help
1

Hello
I’m using Ghost Pro and Gatsby “TryGhost/gatsby-starter-ghost”

I would like to define which web browser is being used to access to my website.

So I would like to use “window.navigator.userAgent” but I don’t know where I should put it.
Finally, I found out that I have to use “componentDidMount()”.
But I cannot know where can I set “componentDidMount()”.
Could you tell me where can I use “componentDidMount()” in “gatsby-starter-ghost”?

componentDidMount() {
    const userAgent = window.navigator.userAgent;
    let bw_message = "This browser is not recommended \n"
    bw_message += "Recommend : Chrome、safari";

    if(userAgent.indexOf('Chrome') == -1 && userAgent.indexOf('Safari') == -1) {
        alert(bw_message);
    }
}