React with Application Insights

Question

I am completely new to Application Insights and want to evaluate application insights within javascript and react. I kind of want to get a feeling for what application insights is capable of with a small demo but i don't really know on where to start really.

I've read through the official documentation, which is quite ellaborative, but does not really provide an easy to start guide with examples to get your hands dirty.

Are there any ressources/demos/tutorials online covering that topic in regards with react?

Most of those topics should be covered (happy for other suggestions as well...):

• Error Tracking of an React App
• Gathering Telemetry-Data of a React app
• Typescript desymbolization

I'm thankful for any hints!

Answer 1

Adding application insights in React you can follow the below steps:

Create your Basic react app

In react app to add application insights you need to add the Instrumentation key in app.jsx

< BrowserRouter>
    < TelemetryProvider instrumentationKey="INSTRUMENTATION_KEY" after={() => { appInsights = getAppInsights() }}>
        < div >
            < Header />
            < Route exact path="/" component={Home} />
            < Route path="/about" component={About} />
        < /div>
        < div className="App">
            < button onClick={trackException}>Track Exception</button>
            < button onClick={trackEvent}>Track Event</button>
            < button onClick={trackTrace}>Track Trace</button>
            < button onClick={throwError}>Autocollect an Error</button>
            < button onClick={ajaxRequest}>Autocollect a Dependency (XMLHttpRequest)</button>
            < button onClick={fetchRequest}>Autocollect a dependency (Fetch)< /button>
        < /div>
    < /TelemetryProvider>
< /BrowserRouter>

In default react app we changed only app.jsx was modified for adding Application Insights

Install the necessary packages using npm Install

Runs the app in the development mode. Npm start

Check your app insights data in azure portal

Refer here for Github project.

Refer here for adding the Instrumentation key in env file