Integrate with Logrocket

All example in below,
when you all set up, should wait a minute for response, it can work

react example

.html approach

project name: <project-name>
app/id: <app-id>
reference: guide setting

/public/index.html

<script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script>
<script>
    window.LogRocket && window.LogRocket.init('<app-id>/<project-name>');
    
    LogRocket.identify('barrystone', {
        name: 'Barry Stone',
        email: 'barrystone@gmail.com',

        // Add your own custom user variables here, ie:
        subscriptionType: 'pro',
    });  
</script>

app.js approach (hide sensitive data for .gitignore)

src/index.html

 <!-- LogRocket  -->
  <script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script>

src/logrocket.js

window.LogRocket && window.LogRocket.init('<your-id>/<project-name>');

LogRocket.identify('barrystone', {
    name: 'Barry Stone',
    email: 'barrystone@gmail.com',

    // Add your own custom user variables here, ie:
    subscriptionType: 'pro',
});

.gitignore

client/src/logrocket.js

If you want to don't show ./logrocket.js (hide some sensitive data)
can .gitignore it.
but if you want to pull this repo should remember comment
```
  // import "./logrocket.js"
```
Because is react app, we can't add external script in index.html

src/App.js

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";

import LandingScreen from "./screens/LandingScreen";

// Custom debugging setting, if show error just comment it (in .gitignore).
import "./logrocket";

const App = () => <LandingScreen />;

ReactDOM.render(<App />, document.getElementById("app"));

nextjs example

npm i logrocket logrocket-react

project name: <project-name>
app/id: <app-id>/<project-name>
reference: https://docs.logrocket.com/docs/using-logrocket-with-server-side-rendering

apply in internal

/pages/_app.js

function MyApp({ Component, pageProps }) {
  
  //Integrate with LogRocket
  // you can import these packages anywhere
  const LogRocket = require('logrocket');
  const setupLogRocketReact = require('logrocket-react');
  
  // only initialize when in the browser
  if (typeof window !== 'undefined') {
    LogRocket.init('<app-id>/<project-name>');
    // plugins should also only be initialized when in the browser
    setupLogRocketReact(LogRocket);
  }
  
  LogRocket.identify('barrystone', {
    name: 'Barry Stone',
    email: 'barrystone@gmail.com',

    // Add your own custom user variables here, ie:
    subscriptionType: 'pro',
  });


  return <Component {...pageProps} />;
}

export default MyApp

apply with external file

/pages/_app.js

function MyApp({ Component, pageProps }) {
  //Integrate with LogRocket
  require('../devTools/logrocket');
  

  return <Component {...pageProps} />;
}
export default MyApp

/devtools/logrocket.js

//Integrate with LogRocket

// you can import these packages anywhere
const LogRocket = require('logrocket');
const setupLogRocketReact = require('logrocket-react');

// only initialize when in the browser
if (typeof window !== 'undefined') {
  LogRocket.init(`${process.env.NEXT_PUBLIC_LOGROCKET_APP_ID}`);

  // plugins should also only be initialized when in the browser
  // setupLogRocketReact(LogRocket);
}

LogRocket.identify(`${process.env.NEXT_PUBLIC_LOGROCKET_USER_ID}`, {
  name: process.env.NEXT_PUBLIC_LOGROCKET_USER_NAME,
  email: process.env.NEXT_PUBLIC_LOGROCKET_USER_EMAIL,

  // Add your own custom user variables here, ie:
  subscriptionType: 'pro',
});

/.env

NEXT_PUBLIC_LOGROCKET_APP_ID = <app-id>/<project-name>
NEXT_PUBLIC_LOGROCKET_USER_ID = barrystone
NEXT_PUBLIC_LOGROCKET_USER_NAME = 'Barry Stone'
NEXT_PUBLIC_LOGROCKET_USER_EMAIL = 'barrystone@gmail.com'

setupLogRocketReact(LogRocket);
will error (happen in my second project to apply it) in below:

Error: EventPluginRegistry: Cannot inject two different event plugins using the same name, ResponderEventPlugin.

with @reduxjs/toolkit

Will show redux actions in console part for recoding.

store/configureStore.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import LogRocket from 'logrocket';

import reducer from './reducer';

export default function () {
  return configureStore({
    reducer,
    middleware: [...getDefaultMiddleware(), LogRocket.reduxMiddleware()],
  });
}

Add webhook with slack

in slack workspace channel click more(inside in i icon) on right top
press add apps and searching for incoming WebHooks
install and add to slack choose channel,setting it
in logrocket Error setting
connect to slack workspace channel with webhook url

Integrate with Logrocket

react example

.html approach

app.js approach (hide sensitive data for .gitignore)

nextjs example

apply in internal

apply with external file

with @reduxjs/toolkit

Add webhook with slack

Read more

hackMD_public-notes

Barry Shi(barrystone)'s Tech skill

git cmd

VS code Snippets