How to send a Slack notification when there's a recording to watch

Oct 25, 2024

Sometimes it's important to watch recordings as soon as they are available. You can take advantage of a little custom code and our new Hog powered functions to receive a Slack notification every time there's a new recording.

Prerequisites

You'll need:

  • The data pipelines add-on in PostHog Cloud
  • A little custom code when you start posthog-js
  • A destination sending to Slack

The data pipelines add-on

We'll be using PostHog's CDP data pipelines add-on. This enables you to react to events in realtime, sending messages to destinations like Slack, Airtable, and many more.

This enables us to send an event to PostHog from a user's browser when we detect a recording that we want to act on and have that converted to a message to a Slack channel.

A little custom code

When you start posthog-js, we can add code once the library is loaded to watch for the condition that for your app means the recording is ready to watch.

Here we'll wait until a recording has been idle for 5 minutes, but you might wait for some time after starting or use the onCapture hook to send a Slack message when a user experiences a $exception event.

JavaScript
posthog.init('<ph_project_api_key>', {
api_host: 'https://us.i.posthog.com',
loaded: (ph) => {
let checkInterval
// this will be called every time a new sesson starts
ph.onSessionId((sessionId) => {
clearInterval(checkInterval)
// setup a check for the condition that means the recording is interesting enough to be watched
checkInterval = setInterval(() => {
// we want to read the session data, but not change it, so we pass `true`
const {
lastActivityTimestamp,
// or maybe sessionStartTimestamp,
sessionId
} = ph.sessionManager.checkAndGetSessionAndWindowId(true)
const sinceLastActivity = Math.abs(new Date().getTime() - lastActivityTimestamp)
const fiveMinutesInMillis = 5 * 60 * 1000
if (sinceLastActivity > fiveMinutesInMillis) {
// capture an event that will be used to trigger the posthog destination
ph.capture('session_idle_for_five_minutes', {
sessionURL: ph.get_session_replay_url({ withTimestamp: true }),
idleSessionId: sessionId,
})
// clear the interval so we only send the event once
clearInterval(checkInterval)
}
}, 5000)
})
}
})

Now, for every session this instance of PostHog starts, whenever it first sees 5 minutes of inactivity, it sends an event with the session ID and URL for the recording.

A CDP destination

You can see how to setup a Slack destination in our docs here

In this case, we want to set the event trigger to the event emitted above:

  • Set the event trigger to the event session_idle_for_five_minutes.
  • If you use our replay ingestion controls, not all sessions are recorded. You can add a filter for session_recording_start_reason is set to only react to sessions where recording is running.

Finally, you can change the templated message we send to Slack. Here we add a button to jump to the person or straight to the recording:

Hog
[
{
"text": {
"text": "*{person.name}* has a recording available to watch",
"type": "mrkdwn"
},
"type": "section"
},
{
"type": "actions",
"elements": [
{
"url": "{person.url}",
"text": {
"text": "View Person in PostHog",
"type": "plain_text"
},
"type": "button"
},
{
"url": "{event.properties.sessionURL}",
"text": {
"text": "Replay URL",
"type": "plain_text"
},
"type": "button"
}
]
}
]

Subscribe to our newsletter

Product for Engineers

Read by 25,000+ founders and builders.

We'll share your email with Substack

Comments