Observability is essential for debugging and understanding user behavior in
collaborative applications, and the Liveblocks [dashboard](/dashboard) is
designed specifically for this purpose, forming a crucial part of our complete
collaboration infrastructure.

In recent months, we’ve made significant strides in enhancing our dashboard even
further, adding new features, improving developer experience, and enabling
faster debugging and development. We’re excited to share our progress.

## Overview

- [Search, sort, and filter rooms](#search-sort-and-filter-rooms) - Find and
  debug your rooms more easily.
- [Room detail improvements](#room-detail-improvements) - Delete rooms and added
  information.
- [New Comments view](#new-comments-view) - Sort & delete threads and comments
  visually.
- [Text Editor preview](#text-editor-preview) - Preview editor content,
  annotations, threads.
- [Broadcast events](#broadcast-events) - Send custom events directly to your
  rooms.
- [API snippets](#api-snippet) - Pre-filled code for modifying and retrieving
  rooms.
- [Webhook error tracking](#webhook-error-tracking) - View failed webhook
  responses from your back end.

---

### Sign up for free

To try these dashboard improvements for yourself, create a Liveblocks account
and get started for free.

<ButtonLink className="mb-6" appearance="primary" href="/dashboard">
  Get started for free
</ButtonLink>

## Search, sort, and filter rooms [#search-sort-and-filter-rooms]

It’s now possible to debug your application more easily thanks to the new
filtering and sorting options in your project’s rooms listing page. This makes
it easier to find the exact room you’re looking for, whether you’re looking for
a particular room ID, last connection date, thread count, or more.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/search-sort-rooms.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

A small touch you may notice is that we’ve also improved dates across the
dashboard. Each date now shows more a human-readable format, and you can see the
exact time/timezone when you hover over each.

## Room detail improvements [#room-detail-improvements]

A number of improvements have been made to each room’s detail page in the
dashboard, for example you can delete rooms directly from the dashboard, saving
you time using our APIs, and see how many users are currently connected.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/online-users-and-delete-rooms.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

The tabs under each room have also been revamped to reflect our new product
offering launched in [Liveblocks 2.0](/blog/introducing-liveblocks-2-0), and
include many new features, which we’ve detailed below.

<Figure>
  <Image
    src="/images/blog/dashboard-enhancements-2024/room-detail-page-navigation.jpg"
    alt="New room detail page navigation in the Liveblocks dashboard"
    width={672}
    height={378}
    quality={95}
  />
</Figure>

## New Comments view [#new-comments-view]

When using [Liveblocks Comments](/comments), each room’s thread can be viewed
directly from the dashboard with our new visual display. Along with being able
to view & sort your threads, replies, metadata, and reactions, you can also make
deletions directly from the UI.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/comments-view.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

If you’d prefer dive directly into the code, we’ve also retained the previous
JSON data views as an option, allowing to read implementation details such as
the comment body.

## Text Editor preview [#text-editor-preview]

Each room using [Liveblocks Text Editor](/text-editor) also now features a
visual way to explore your documents from the dashboard. Because Comments deeply
integrates into Text Editor, we can display each annotation and thread that’s
attached to the document. The display even handles overlapping annotations for
you.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/text-editor-view.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Text Editor relies on [Lexical](https://lexical.dev) editor, and if you add a
custom component to the editor, it will be inlined into the preview, showing its
JSON state. We’ve also added a JSON view for the whole document, displaying
Lexical’s internal state, should you wish to debug more deeply.

## Broadcast events [#broadcast-events]

You can now broadcast custom events directly from the dashboard, a feature that
is particularly helpful for testing
[`useEventListener`](/docs/api-reference/liveblocks-react#useEventListener) in
your application.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/broadcast-events.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Events are particularly helpful for notifying users to revalidate their data in
realtime, or to send toast messages to other users. Learn more in our
interactive tutorial page on
[broadcasting events](/docs/tutorial/react/getting-started/broadcasting-events#/liveblocks.config.ts).

## API snippets [#api-snippet]

Should you wish to quickly fetch or modify your room, you can now press the
“API” button to find cURL and Node.js snippets in the rom detail page. Each
snippet is pre-filled with the correct secret key and room ID, meaning you can
paste them directly into your terminal or code.

<Figure>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/dashboard-enhancements-2024/rest-api-snippets.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

## Webhook error tracking [#webhook-error-tracking]

We’ve added a new way to debug webhooks—if a webhook were to fail for any
reason, you can now check the response returned from your application. This
makes it easier to diagnose problems caused by your back end not responding
correctly.

<Figure>
  <Image
    src="/images/blog/dashboard-enhancements-2024/webhook-error-tracking.jpg"
    alt="Show response body option of a webhook attempt in the webhook event details dialog"
    width={672}
    height={378}
    quality={95}
  />
</Figure>

To find the new feature, open a webhook event in the dashboard, click a dropdown
under the “Webhook events” section, and look for “Show response body”.

## Improvements in May

These aren’t the only improvements we’ve made to our dashboard, in May we shared
updates on a number of new features.

- [Events](/blog/whats-new-in-liveblocks-may-edition-2024#events): Learn more
  about your users and their activities.
- [Better analytics](/blog/whats-new-in-liveblocks-may-edition-2024#better-analytics):
  Improved insights into billing and usage.
- [New onboarding](/blog/whats-new-in-liveblocks-may-edition-2024#new-onboarding):
  Start your project from within the dashboard.

Learn more in our blog post:
[What's new in Liveblocks: May edition](/blog/whats-new-in-liveblocks-may-edition-2024).

## Contributors

<Contributors
  gitHubUsernames={["pierrelevaillant", "sugardarius", "nimeshnayaju"]}
/>