Salesforce - subscribe to platform events - LWC

platformeventViewer.html

<template>
  <lightning-card title="PLATFORM EVENT TABLE" icon-name="standard:customer_portal_users">
    <lightning-button slot="actions" variant={buttonVariant} label={buttonLabel} onclick={handleToggleSubscribe}></lightning-button>

    <div class="slds-m-around_medium">
      <p>
        View platform events.
      </p>

      <div class="slds-m-top_medium">
        <lightning-datatable data={logs} columns={columns} key-field="replayId" show-row-number-column hide-checkbox-column>
        </lightning-datatable>
      </div>
    </div>
  </lightning-card>
</template>

platformeventViewer.js

import { LightningElement } from 'lwc';
import { subscribe, unsubscribe, onError, isEmpEnabled } from 'lightning/empApi';

/**
 * @typedef {Object} DebugLog
 * @property {DebugLogData} data
 * @property {string} channel
 */

/**
 * @typedef {Object} DebugLogData
 * @property {string} schema
 * @property {DebugLogPayload} payload
 * @property {{ "replayId": number }} event
 */

/**
 * @typedef {Object} DebugLogPayload
 * @property {string} CreatedById
 * @property {string} CreatedDate
 * @property {string} Message__c
 * @property {string} Stack__c
 */

const columns = [
  {
    type: 'date',
    fieldName: 'CreatedDate',
    label: 'Created',
    initialWidth: 175,
    typeAttributes: {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }
  },
  // TODO: make a column for each field based on your metadata
  {
    type: 'text',
    fieldName: 'TODO1', // TODO
    label: 'label 1' // TODO
  },
  {
    type: 'text',
    fieldName: 'TODO2',// TODO
    label: 'label 2' // TODO
  }
];

export default class DebugLogViewer extends LightningElement {
  channelName = '/event/event_name__e'; // TODO
  isSubscribeEnabled = false;
  isUnsubscribeEnabled = !this.isSubscribeEnabled;

  subscription = {};
  empEnabled = true;

  logs = [];
  columns = columns;

  get buttonVariant() {
    return this.isSubscribeEnabled ? 'neutral' : 'brand';
  }

  get buttonLabel() {
    return this.isSubscribeEnabled ? 'Unsubscribe' : 'Subscribe';
  }

  // Tracks changes to channelName text field
  handleChannelName(event) {
    this.channelName = event.target.value;
  }

  // Initializes the component
  connectedCallback() {
    // Register error listener
    this.registerErrorListener();
    isEmpEnabled().then((empEnabled) => {
      this.empEnabled = empEnabled;
    });
  }

  disconnectedCallback() {
    this.handleUnsubscribe();
  }

  handleToggleSubscribe() {
    if (!this.isSubscribeEnabled) {
      this.handleSubscribe();
    } else {
      this.handleUnsubscribe();
    }
  }

  // Handles subscribe button click
  handleSubscribe() {
    // Invoke subscribe method of empApi. Pass reference to messageCallback
    subscribe(this.channelName, -2, (/** @type {DebugLog} */ response) => {
      try {
        this.logs = [{ ...response.data.payload, replayId: response.data.event.replayId }, ...this.logs];
      } catch (ex) {
        console.log('Error parsing response: ', JSON.stringify(response));
      }
    }).then((response) => {
      // Response contains the subscription information on subscribe call
      console.log('Subscription request sent to: ', JSON.stringify(response.channel));
      this.subscription = response;
      this.toggleSubscribeButton(true);
    });
  }

  // Handles unsubscribe button click
  handleUnsubscribe() {
    this.toggleSubscribeButton(false);

    // Invoke unsubscribe method of empApi
    unsubscribe(this.subscription, (response) => {
      console.log('unsubscribe() response: ', JSON.stringify(response));
      // Response is true for successful unsubscribe
      this.logs = [];
    });
  }

  toggleSubscribeButton(enableSubscribe) {
    this.isSubscribeEnabled = enableSubscribe;
    this.isUnsubscribeEnabled = !enableSubscribe;
  }

  registerErrorListener() {
    // Invoke onError empApi method
    onError((error) => {
      console.log('Received error from server: ', JSON.stringify(error));
      // Error contains the server-side error
    });
  }
}

platformeventViewer.js-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Platform event viewer</masterLabel>
    <description>Platform event viewer</description>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>