smartlook / smartlook-client

Official Smartlook client for easy frontend integration.
https://smartlook.com
MIT License
28 stars 9 forks source link

Is there any way to get sessionId or recordingId in react? #18

Closed jp112233 closed 2 years ago

jp112233 commented 2 years ago

I am using smartlook client in my react application. It is working totally perfectly.

Now, I have a use case where I need to log currently on joining session or recording id in my database when some specific error occurs so that I can monitor it from smartlook.

Is there any way to get a custom identifier to get those details?

Thanks a lot in advance!

Joozty commented 2 years ago

Hey @jp112233!

Surely there is a way to obtain this kind of information. Have you seen this doc page?

Basically, you just need to call smartlook object and you get the info you need.

  smartlook(
    function () {
      console.log(smartlook.sessionId);
      console.log(smartlook.recordId);
    }
  );
jp112233 commented 2 years ago

@Joozty Thanks a lot for your reply!

Here is how I am initializing smartlook client.

import smartlookClient from "smartlook-client";
...
...
useEffect(() => {
    smartlookClient.init(process.env.NEXT_PUBLIC_SMARTLOOK_CLIENT);
  }, []);

Now, could you please suggest to me where I need to write this? I already tried the above things But I might be doing it the incorrect way.

Could you please help me out?

I really appreciate all your help. Thanks again!!

Joozty commented 2 years ago

I guess you are looking for the componentDidCatch method. Note that there is no hooks equivalent yet.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // if it is undefined it means smartlook hasn't started recording yet.
    // You might want to use callback as shown in my previous reply. 
    // The callback is executed when smartlook starts recording. 
    // Hovewer bear in mind that logging can be delayed for that reason. 
    const sessionId = window.smartlook.sessionId 
    logErrorToMyService(error, errorInfo, sessionId);
  }

  render() {
     ....
  }
}

...

<ErrorBoundary>
    <App/>
</ErrorBoundary>

...

Does that make sense?

PS: We do not have sessionId, recordId and other properties on smartlookClient object. I will add it there. In the meantime please use window.smatlook.sessionId instead (as shown in the example). Thanks 🙂

jp112233 commented 2 years ago

@Joozty Thanks a lot. Able to get those data.

I really appreciate your help.

We can close this question.