Introducing GraphQL logging in LogRocket

Today we’re excited to announce official support for GraphQL in LogRocket!

Now, when facing bugs or user-reported issues, you can see all the GraphQL requests your app made to quickly understand what went wrong.

What is LogRocket?

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong.

LogRocket works in any app regardless of framework. It instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

In addition, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also has deep integrations with React, Redux, and Angular to log actions and application state.

GraphQL Logging

LogRocket captures both network requests and responses with headers and full bodies. The waterfall chart shows timings, making it easy to see which requests were slow, or if a potential race condition occurred. For GraphQL requests, LogRocket parses the query name so you can quickly see which requests correspond with particular queries. You can also search for queries both within a session, and across all sessions.

For each request, you can dig in and view the parsed request and response body. There’s also a button which generates a link to GraphQL with the query and variables pre-filled, so you can re-run the same query on your server and see the new results.

Since network requests sometimes contain secure tokens or sensitive user data, LogRocket makes it easy to redact any information from the logs, while still leaving important context to help with debugging.

Use with apollo-client

LogRocket logs Redux actions and state, so if you’re using apollo-client (which uses Redux internally), you’ll see request lifecycle logs in the LogRocket log viewer. This lets you quickly find query errors and dig in to understand the root cause.

Why it helps

GraphQL logs often hold the key to solving errors and user-reported issues.

Support

LogRocket integrates with Intercom and other support tools so when a user writes-in needing help, you can watch exactly what they’re seeing and guide them to a solution.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Sometimes, it’s unclear if a user is just confused, or actually experiencing a bug. By looking at the console and network/GraphQL logs from their session, you can easily make this distinction.

Error Reporting

LogRocket integrates with error reporting tools like Sentry and Bugsnag to let you see GraphQL logs and video for every error. Not only does this help quickly understand bugs, but also lets you see the impact the error had on the user’s experience.

Getting Started

To get started with LogRocket, create a free account at https://logrocket.com

Monitor failed and slow GraphQL requests in production

While GraphQL has some features for debugging requests and responses, making sure GraphQL reliably serves resources to your production app is where things get tougher. If you’re interested in ensuring network requests to the backend or third party services are successful, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.