Skip to content

React higher-order component for using Azure Application Insights inside Next.js

License

Notifications You must be signed in to change notification settings

drewjs/next-applicationinsights

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

next-applicationinsights

Automatically track page views, dependency calls and exceptions on you Next.js applications by using Azure Application Insights.

How to use

Install the package with npm

npm install next-applicationinsights

Wrap Next's App in pages/_app.js with a call to withApplicationInsights.

import App, { Container } from 'next/app'
import { withApplicationInsights } from 'next-applicationinsights';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default withApplicationInsights({ 
  instrumentationKey: 'YOUR_KEY_GOES_HERE',
  isEnabled: true //process.env.NODE_ENV === 'production'
})(MyApp)

That's it! 🎉

Configuration

This package uses @microsoft/applicationinsights-web, so all configuration options from this package are supported by withApplicationInsights.

isEnabled is a custom property that can be used to enable/disable AI tracking. We recommend the usage of process.env.NODE_ENV === 'production' if you want to enable tracking in production builds only.

About

React higher-order component for using Azure Application Insights inside Next.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%