diff --git a/src/content/docs/browser/new-relic-browser/lab/debug-errors.mdx b/src/content/docs/browser/new-relic-browser/lab/debug-errors.mdx
new file mode 100644
index 00000000000..5252554e2f9
--- /dev/null
+++ b/src/content/docs/browser/new-relic-browser/lab/debug-errors.mdx
@@ -0,0 +1,607 @@
+---
+title: 'Lab part 3: Debug errors in your application'
+metaDescription: 'Part 3 of a multi-part lab on using New Relic browser monitoring to troubleshoot your site: Debug errors in your application'
+---
+
+import browserErrors from 'images/browser-lab-screenshot-relicstaurants-browser-errors.webp'
+
+import viewRelicstraunts from 'images/browser-lab-screenshot-view-relicstaurants.webp'
+
+import viewRelicstrauntsBrowser from 'images/browser-lab-screenshot-relicstaurants-browser-app.webp'
+
+import pageWithJSErrors from 'images/browser-lab-screenshot-page-with-js-errors.webp'
+
+import navigateToErrors from 'images/browser-lab-screenshot-navigate-to-js-errors.webp'
+
+import jsErrors from 'images/browser-lab-screenshot-js-errors.webp'
+
+import cartError from 'images/browser-lab-screenshot-cart-error.webp'
+
+import cartErrorDetails from 'images/browser-lab-screenshot-cart-error-details.webp'
+
+import errorInstances from 'images/browser-lab-screenshot-error-instances.webp'
+
+import stackTrace from 'images/browser-lab-screenshot-stack-trace.webp'
+
+import expandStackTrace from 'images/browser-lab-screenshot-expand-stack-trace.webp'
+
+import findFile from 'images/browser-lab-screenshot-find-file.webp'
+
+import unminifedTrace from 'images/browser-lab-screenshot-un-minified.webp'
+
+import noErrors from 'images/browser-lab-screenshot-no-errors.webp'
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser.
+
+Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, [_Instrument your application with our browser agent_](/docs/browser/new-relic-browser/lab/install-browser-agent/), before starting this one.
+
+
+
+Until now, your application has been working fine. Users were able to place their orders and were satisfied with your service. But now that you have some insights in your application, you notice that it's showing some JavaScript errors.
+
+
+
+
+In this procedure, you use New Relic browser to find out what's causing these errors and debug your application timely.
+
+
+
+In order to see your data in New Relic, you need to enable browser monitoring for this procedure.
+
+If you haven't already, [instrument your app with our browser agent](/docs/browser/new-relic-browser/lab/install-browser-agent).
+
+
+
+## Debug frontend errors
+
+The bad news is that you've confirmed there are some errors in your application. The good news is that you recently instrumented your application with our browser agent! Go to New Relic and sign into your account, if you haven't already.
+
+
+
+
+
+From the New Relic homepage, navigate to **Browser** and choose your **Relicstaurants** application.
+
+
+
+
+
+
+
+Here, you see all the data related to your browser application including **Page views with JavaScript errors**, **Core web vitals**, **User time on the site**, **Initial page load and route changes**, and others.
+
+
+
+
+
+
+
+Not seeing your data? Make sure you enabled browser monitoring and your load generator is running.
+
+
+
+
+
+Notice **Page views with javascript errors**.
+
+
+
+Here, you see spikes showing that your application has some Javascript errors.
+
+
+
+
+
+Click on **Page views with javascript errors**.
+
+
+
+This takes you to **JS errors** page where you see all the JS errors along with Total error instances.
+
+
+
+
+
+
+
+Click on the **Cart cannot be empty** error for details.
+
+
+
+Here, you see **errorMessage**, **INSTANCES**, **INTERACTIONS AFFECTED** and other details related to your error.
+
+
+
+
+
+
+
+Next, navigate to **Error Instances** tab.
+
+
+
+
+
+Here, you see more details related to your particular error including **Event Log**, **Stack trace**, and other.
+
+
+
+
+
+Scroll down on the **Error Instances** page to view the **Stack trace**.
+
+
+
+Here, you see the stack trace of your error.
+
+
+
+
+
+Looking at the error details above, you now know the particular error affecting your services. However, the stack trace shown here is minified and it's hard to understand what's causing this error. To understand that, we need to upload the source map to un-minify the error.
+
+## Upload source map to un-minify JS error
+
+Minified JavaScript mostly results in hard-to-understand, useless stack traces on browser's errors page. Uploading source maps converts these errors to understandable stack traces. It also provides a useful reference to code lines and makes it easier to debug.
+You can upload your soucre map to New Relic via UI, API or npm module.
+
+Here, we use New Relic UI to upload source map and un-minify the JS error.
+
+
+
+
+
+From JS errors page, navigate to Stack trace of the error and expand it.
+
+
+
+Here, you see an option to upload source map.
+
+
+
+
+
+Click on **find file**.
+
+
+
+This opens a file explorer window for you to upload source map from your local storage. Find and upload your source map from _build/static/js_ directory of your project.
+
+
+
+Source map files have a file extension of `.js.map`. Relicstaurants is set to generate source maps and you find it under _build/static/js_ directory.
+If you're having trouble generating source maps for your project, follow [our documentation](https://docs.newrelic.com/docs/browser/browser-monitoring/browser-pro-features/upload-source-maps-un-minify-js-errors#generate-maps) to learn how to generate one.
+
+
+
+
+
+
+
+Once your source map is uploaded successfully, you see your error un-minified.
+
+
+
+Here, you see the particular file and the line of code that's generating this error. Notice that at line 119, the **Cart cannot be empty!** is associated with **onClick** event in _components/layouts/app/app-container/header/app-container-header.js_ file and is also triggering an alert for the user. Let's take a closer look at this file!
+
+
+
+
+
+Open the application in the IDE of your choice and navigate to _src/components/layouts/app/app-container/header/app-container-header.js_ file. Take a closer look at the shown code.
+
+<>
+
+```js fileName=src/components/layouts/app/app-container/header/app-container-header.js lineHighlight=113-130
+import { Button, Drawer, Table } from 'antd';
+import Text from 'antd/lib/typography/Text';
+import { orderList } from 'atoms/order-list.atom';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import { Logo, StyledHeader } from './app-header-styled';
+import Navi from './navi-items';
+import { useNavigate } from 'react-router';
+
+const Header = () => {
+ const [isSidebarVisible, setIsSidebarVisible] = useState(false);
+ const [orderListState, setOrderList] = useRecoilState(orderList);
+ const navigate = useNavigate();
+
+ const onClose = () => {
+ setIsSidebarVisible(false);
+ };
+ const handleSidebarOpen = () => {
+ setIsSidebarVisible(true);
+ };
+
+ const itemQuantity = (list) => {
+ let totalItemQuantity = 0;
+ list.forEach((item) => (totalItemQuantity += item.count));
+
+ return totalItemQuantity;
+ };
+
+ const handleDeleteItem = (clickedRow) => {
+ const reducedData = orderListState.filter((item) =>
+ item.name === clickedRow.name ? false : true
+ );
+ setOrderList(reducedData);
+ };
+
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Count',
+ dataIndex: 'count',
+ key: 'count',
+ },
+ {
+ title: 'Price',
+ dataIndex: 'price',
+ key: 'price',
+ },
+ {
+ title: 'Delete',
+ render: (clickedRow) => (
+
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
Relicstaurants
+
by New Relic
+
+
+
+
+
{
+ let totalPrice = 0;
+
+ pageData.forEach(
+ ({ price, count }) => (totalPrice += price * count)
+ );
+
+ return (
+ <>
+
+ Total
+
+ {totalPrice.toFixed(2)}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }}
+ />
+
+
+ );
+};
+
+export default Header;
+
+```
+
+
+Here, notice that the error **Cart cannot be empty!** only occurs whenever the user accidently tries to checkout with an empty cart. The function is coded to alert the end user that they can't proceed to checkout with an empty cart. You now know that this error will not affect your services. However, there are better ways to handle this edge case and avoid the error.
+
+
+
+
+
+Press `Ctrl+C` in the terminal that's running your application to stop serving it. Update the _src/components/layouts/app/app-container/header/app-container-header.js_ as follows.
+
+<>
+
+```js fileName=src/components/layouts/app/app-container/header/app-container-header.js lineHighlight=4,81-134
+import { Button, Drawer, Table } from 'antd';
+import Text from 'antd/lib/typography/Text';
+import { orderList } from 'atoms/order-list.atom';
+import { Message } from 'components/common';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import { Logo, StyledHeader } from './app-header-styled';
+import Navi from './navi-items';
+import { useNavigate } from 'react-router';
+
+const Header = () => {
+ const [isSidebarVisible, setIsSidebarVisible] = useState(false);
+ const [orderListState, setOrderList] = useRecoilState(orderList);
+ const navigate = useNavigate();
+
+ const onClose = () => {
+ setIsSidebarVisible(false);
+ };
+ const handleSidebarOpen = () => {
+ setIsSidebarVisible(true);
+ };
+
+ const itemQuantity = (list) => {
+ let totalItemQuantity = 0;
+ list.forEach((item) => (totalItemQuantity += item.count));
+
+ return totalItemQuantity;
+ };
+
+ const handleDeleteItem = (clickedRow) => {
+ const reducedData = orderListState.filter((item) =>
+ item.name === clickedRow.name ? false : true
+ );
+ setOrderList(reducedData);
+ };
+
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Count',
+ dataIndex: 'count',
+ key: 'count',
+ },
+ {
+ title: 'Price',
+ dataIndex: 'price',
+ key: 'price',
+ },
+ {
+ title: 'Delete',
+ render: (clickedRow) => (
+
+ ),
+ },
+ ];
+
+ return (
+
+
+
+
Relicstaurants
+
by New Relic
+
+
+
+
+ {orderListState.length > 0 ? (
+
{
+ let totalPrice = 0;
+
+ pageData.forEach(
+ ({ price, count }) => (totalPrice += price * count)
+ );
+
+ return (
+ <>
+
+ Total
+
+ {totalPrice.toFixed(2)}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }}
+ />
+ ) : (
+ Nothing in cart
+ )}
+
+
+ );
+};
+
+export default Header;
+
+```
+
+
+
+
+
+
+
+Here, you modified the file show a message **Nothing in cart** instead of an error when the cart is empty. The **PAY** button remains disabled until the end users has items in their cart.
+
+## Restart your application
+
+Now that you've fixed your application, it's time to restart your local server.
+
+<>
+
+```bash
+npm run build
+npm run newstart
+```
+
+
+
+Restart your load generator, as well.
+
+<>
+
+```bash
+python3 simulator.py
+```
+
+
+
+
+
+Make sure you're running these commands in the correct terminal windows. If you no longer have those windows, follow the steps in the [setup procedure](/docs/browser/new-relic-browser/lab/set-up-env).
+
+
+
+Once the load generator starts sending data to New Relic, notice that the application is no longer reporting JavaScript errors.
+
+
+
+## Summary
+
+To recap, you observed an error in your application and used New Relic browser to:
+1. Review the error percentage
+2. Analyze the JS errors in your application
+3. Understand the error instance
+4. Debug the JS error by uploading source map
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser. Next, try to [debug frontend slowness in your application](/docs/browser/new-relic-browser/lab/debug-slowness/).
+
+
diff --git a/src/content/docs/browser/new-relic-browser/lab/debug-slowness.mdx b/src/content/docs/browser/new-relic-browser/lab/debug-slowness.mdx
new file mode 100644
index 00000000000..1062872229b
--- /dev/null
+++ b/src/content/docs/browser/new-relic-browser/lab/debug-slowness.mdx
@@ -0,0 +1,353 @@
+---
+title: 'Lab part 4: Debug frontend slowness in your application'
+metaDescription: 'Part 4 of a multi-part lab on using New Relic browser monitoring to troubleshoot your site: Debug your frontend'
+---
+
+import tweet from 'images/browser-lab-screenshot-tweet.webp'
+
+import viewRelicstraunts from 'images/browser-lab-screenshot-view-relicstaurants.webp'
+
+import viewRelicstrauntsBrowser from 'images/browser-lab-screenshot-relicstaurants-browser-app.webp'
+
+import LCP from 'images/browser-lab-screenshot-LCP.webp'
+
+import frontendVsBackend from 'images/browser-lab-screenshot-frontend-vs-backend.webp'
+
+import backend from 'images/browser-lab-screenshot-backend.webp'
+
+import frontend from 'images/browser-lab-screenshot-frontend.webp'
+
+import pageLoadGraph from 'images/browser-lab-screenshot-page-load-graph.webp'
+
+import initialPageLoad from 'images/browser-lab-screenshot-initial-page-load.webp'
+
+import pageLoadDetail from 'images/browser-lab-screenshot-page-load-detail.webp'
+
+import pageViews from 'images/browser-lab-screenshot-page-views.webp'
+
+import sortPages from 'images/browser-lab-screenshot-sort-pages.webp'
+
+import mostTimeConsumingPage from 'images/browser-lab-screenshot-most-time-consuming-page.webp'
+
+import mostTimeConsumingPageDetail from 'images/browser-lab-screenshot-most-time-consuming-page-detail.webp'
+
+import pageRendering from 'images/browser-lab-screenshot-page-rendering.webp'
+
+import sessionTraces from 'images/browser-lab-screenshot-session-traces.webp'
+
+import sortedSessionTraces from 'images/browser-lab-screenshot-sorted-session-traces.webp'
+
+import navigatetoTraceDetail from 'images/browser-lab-screenshot-navigate-to-trace-detail.webp'
+
+import trace from 'images/browser-lab-screenshot-trace.webp'
+
+import adjustTimeline from 'images/browser-lab-screenshot-adjust-timeline.webp'
+
+import traceTimeWindow from 'images/browser-lab-screenshot-trace-time-window-detail.webp'
+
+import imageTrace from 'images/browser-lab-screenshot-image-trace.webp'
+
+import imageTraceDetail from 'images/browser-lab-screenshot-image-trace-detail.webp'
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser monitoring.
+
+Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, [_Debug errors in your application_](/docs/browser/new-relic-browser/lab/debug-errors), before starting this one.
+
+
+
+After fixing JavaScript errors in your application, you and your team are feeling confident. Ready for your down time, you head over to social media but you check Twitter and see some confused customers:
+
+
+
+Uh oh! You customers don't look happy. It's time to use New Relic browser monitoring to discover the source of delay.
+
+
+
+In order to see your data in New Relic, you need to enable browser monitoring for this procedure.
+
+If you haven't already, [instrument your app with our browser agent](/docs/browser/new-relic-browser/lab/install-browser-agent).
+
+
+
+## Debug slowness in your application
+
+
+
+
+
+From the New Relic homepage, navigate to **Browser** and choose your **Relicstaurants** application.
+
+
+
+
+
+
+
+Here, you see all the data related to your browser application including **Page views with JavaScript errors**, **Core web vitals**, **User time on the site**, **Initial page load and route changes**, and others.
+
+
+
+
+
+Notice the **Largest Contentful Paint (LCP)**.
+
+
+
+Largest Contentful Paint (LCP) represents how quickly the main content of a web page is loaded. Ideally, the content should not take more than a second or two to load.
+Here, you see that your site is loading in more than 5 seconds. No wonder your users are complaining!
+
+But what's causing this delay? back end?
+
+
+
+Scroll down and notice the **Front end vs. back end** graph.
+
+
+
+Click on **Back end (time to first byte) (50%)** to filter the graph and see how long backend takes to load.
+
+
+
+The graph indicates that the back end took maximum 140 mili seconds to process the request in worst case. Does this mean your front end is causing delay?
+
+Click on **Front end (Window load + AJAX) (50%)**.
+
+
+
+There's the problem! The graph indicates that the delay is happening on front end.
+
+
+
+
+
+To narrow down what might be causing the delat on front end, take a closer look at **Initial page load and route change** graph.
+
+
+
+
+
+
+
+Click on **Initial page load (Window load + AJAX)**.
+
+
+
+The graph indicates that **Initial page load (Window load + AJAX)** is taking 5-6 seconds which is alarming.
+
+
+
+
+
+Click **Initial page load and route change** to see more details.
+
+
+
+This takes you to **Page views**.
+
+
+
+
+
+
+
+Sort the pages by **Most time-consuming**.
+
+
+
+Notice that the initial page is taking almost 90% of time to load.
+
+
+
+Click on it to view it's details.
+
+
+
+This page shows you **Page view breakdown**, **Median initial page load time**, and other important details. **Page view breakdown** graph is especially important here since it helps you narrow down why and where your page is taking longer.
+Upon taking a closer look into this graph, you see that **Page rendering** is taking as long as 5000 miliseconds.
+
+
+
+
+
+You now know that initial page is taking quite long to render making your application slow. Next, we observe the **Session traces** to figure out what is slowing down the rendering process.
+
+Exit this view by clicking the **X** in the top right hand corner.
+
+
+
+From left hand navigation, navigate to **Session traces** and sort them in the decending order of **Page load**.
+
+
+
+
+
+
+
+Here, you see the session traces sorted in the order of **Page load** time.
+
+
+
+
+
+
+
+From the list, click the first one.
+
+
+
+
+
+This takes you to **Session traces** detail page.
+
+Here, you see the complete trace for that particular session. This page also shows you **Backend**, **Dom Processing**, **Page Load**, and other trace related information.
+
+
+
+
+
+
+
+Note that **Page load** is taking longer than expected. You're need a detailed timeline of the load. Scroll the pointer on the left and right to adjust the timeline.
+
+
+
+
+
+
+
+Scroll through the trace to move through the time window and see the details of individual events during this session.
+
+
+
+
+
+
+
+Notice that a particular event is taking more than 5 seconds.
+
+
+
+
+
+
+
+Click on the event to see its details.
+
+
+
+Notice that it's an image. Particularly, it's the background image of your application which is taking 5 - 6 seconds to load and causing the delay.
+
+
+
+
+
+Based on these findings, you hypothesize that the background image is the culprit here. High-resolution, unoptimized images are the most common reason behind the website slowness.
+Good news! now that you know the reason, you can fix the problem.
+
+## Summary
+
+To recap, you observed slowness in your application and used New Relic browser monitoring to:
+
+1. Observe Core web vitals of your site
+2. Narrow down the sources of slowness
+
+## Homework
+
+Well done! Now that you've gotten a jump start with our monitoring, here are some docs that will help you take the next steps on your journey.
+
+- [Introduction to browser monitoring](/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/)
+- [Browser monitoring features](/docs/browser/new-relic-browser/browser-pro-features/intro-to-browser-pro-features)
diff --git a/src/content/docs/browser/new-relic-browser/lab/install-browser-agent.mdx b/src/content/docs/browser/new-relic-browser/lab/install-browser-agent.mdx
new file mode 100644
index 00000000000..378f9c275b2
--- /dev/null
+++ b/src/content/docs/browser/new-relic-browser/lab/install-browser-agent.mdx
@@ -0,0 +1,218 @@
+---
+title: 'Lab part 2: Instrument your application'
+description: 'Part 2 of a multi-part lab on using New Relic browser monitoring to improve your site: Instrument your React application'
+---
+
+import addData from 'images/browser-lab-screenshot-add-data.webp'
+
+import browser from 'images/browser-lab-screenshot-newrelic-browser.webp'
+
+import selectDeploymentMethod from 'images/browser-lab-screenshot-select-deployment-method.webp'
+
+import enableBrowser from 'images/browser-lab-screenshot-enable-browser.webp'
+
+import browserCodeSnippet from 'images/browser-lab-screenshot-browser-code-snippet.webp'
+
+import viewRelicstraunts from 'images/browser-lab-screenshot-view-relicstaurants.webp'
+
+import viewRelicstrauntsBrowser from 'images/browser-lab-screenshot-relicstaurants-browser-app.webp'
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser monitoring.
+
+Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, [Set up your lab environment](/docs/browser/new-relic-browser/lab/set-up-env/), before starting this one.
+
+
+
+Your React app is now up and running in the browser. You want to make sure your users always have the best experience on your site. For that, you need insights into your users' experiences, such as their page load times.
+
+To achieve this goal, you need to install our browser agent.
+
+## Install browser agent
+
+
+
+
+
+Navigate to [New Relic](https://one.newrelic.com/), and sign in with your account.
+
+
+
+
+
+On the right side of the upper navigation bar, click **Add data**.
+
+
+
+
+
+
+
+Scroll down to **Browser & mobile** and select **Browser monitoring**.
+
+
+
+The UI will guide you through installing our browser agent.
+
+
+
+
+
+Select **Copy/paste JavaScript code** for your deployment method.
+
+
+
+
+
+
+
+Scroll down to **Name your app**. Name your app **Relicstaurants**, and click **Enable**.
+
+
+
+This gives you a JavaScript code snippet to enable browser monitoring. Copy it to your clipboard.
+
+
+
+
+
+
+
+Open your app in the IDE of your choice.
+
+In _public/index.html_ file of your app, paste the copied JavaScript snippet inside the ``.
+
+<>
+
+```html lineHighlight=22-23 fileName=public/index.html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Relicstaurants
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Your application is now instrumented with our browser agent.
+
+
+
+
+
+## Restart your application
+
+Now that you've instrumented your application, it's time to restart your local server.
+
+<>
+
+```bash
+npm run build
+npm run newstart
+```
+
+
+
+Restart your load generator, as well.
+
+<>
+
+```bash
+python3 simulator.py
+```
+
+
+
+
+
+Make sure you're running these commands in the correct terminal windows. If you no longer have those windows, follow the steps in the [setup procedure](/docs/browser/new-relic-browser/lab/set-up-env).
+
+
+
+
+## View your data
+
+Your app is now sending browser data to New Relic. View this data in New Relic, under **Browser**.
+
+
+
+
+
+Navigate to [New Relic](https://one.newrelic.com/) and sign in with your account.
+
+
+
+
+
+From the left hand navigation bar, navigate to **Browser** and select **Relicstaurants**.
+
+
+
+Here, you see **Page views with JavaScript errors**, **Core web vitals**, **User time on the site**, **Initial page load and route changes**, and other performance data from your app.
+
+
+
+
+
+
+
+You've instrumented your application to send browser data to New Relic using our browser agent. You also see your performance data in New Relic. Next, you use this data to troubleshoot front-end errors with your site.
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser monitoring. Now that you've instrumented your application with our browser agent, [debug errors](/docs/browser/new-relic-browser/lab/debug-errors/).
+
+
diff --git a/src/content/docs/browser/new-relic-browser/lab/over-view.mdx b/src/content/docs/browser/new-relic-browser/lab/over-view.mdx
new file mode 100644
index 00000000000..243f0feccab
--- /dev/null
+++ b/src/content/docs/browser/new-relic-browser/lab/over-view.mdx
@@ -0,0 +1,46 @@
+---
+title: 'Lab: Troubleshoot your website with New Relic browser monitoring'
+metaDescription: 'Introduction to a lab on using New Relic browser monitoring to improve your website'
+---
+
+You're the developer of Relicstaurants, a [React](https://reactjs.org//) app that lets users order food from their favorite restaurants. Your app is really popular among the users and you want to make sure your users always have the best experience with your site. To achieve this goal, you use New Relic browser monitoring to achieve better performance for your site and troubleshoot any issues as needed.
+
+In this lab, you'll instrument your web-application with New Relic browser monitoring, monitor its metrics, and troubleshoot frontend issues.
+
+
+
+
+
+## Objectives
+
+- Spin up an React demo application.
+- Install New Relic browser agent.
+- Troubleshoot frontend errors.
+- Upload source map to New Relic.
+- Troubleshoot frontend slowness.
+
+
+
+
+
+## Requirements
+
+- A free [New Relic account](https://newrelic.com/signup?utm_source=developer-site)
+- [Node](https://nodejs.org/en/)
+- [Python3](https://www.python.org/)
+- [Git](https://git-scm.com/)
+- [pip3](https://pip.pypa.io/en/stable/installation/)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/content/docs/browser/new-relic-browser/lab/set-up-env.mdx b/src/content/docs/browser/new-relic-browser/lab/set-up-env.mdx
new file mode 100644
index 00000000000..734f6ca79a5
--- /dev/null
+++ b/src/content/docs/browser/new-relic-browser/lab/set-up-env.mdx
@@ -0,0 +1,195 @@
+---
+title: 'Lab part 1: Set up your lab environment'
+metaDescription: 'Part 1 of a multi-part lab on troubleshooting your website: Spin up your test app and simulator'
+---
+
+import homepage from 'images/browser-lab-screenshot-homepage.webp'
+
+import restaurantList from 'images/browser-lab-screenshot-restaurant-list.webp'
+
+import chooseRestaurant from 'images/browser-lab-screenshot-choose-restaurant.webp'
+
+import selectFood from 'images/browser-lab-screenshot-select-food.webp'
+
+import checkout from 'images/browser-lab-screenshot-checkout.webp'
+
+import placeOrder from 'images/browser-lab-screenshot-place-order.webp'
+
+import thankYou from 'images/browser-lab-screenshot-thank-you.webp'
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser. If you haven't already, check out the [lab introduction](/docs/browser/new-relic-browser/lab/over-view/).
+
+
+
+Before you can walk through the lab proper, you need to spin up your React application. Here, you:
+
+- Spin up your React application
+- Send traffic to your app with a simple load generator
+
+
+
+
+
+Open a terminal window and clone the lab repository.
+
+<>
+
+```bash
+git clone https://github.com/newrelic-experimental/relicstaurants.git
+```
+
+
+
+
+
+
+
+Navigate to the root directory of your application and switch to the lab directory.
+
+
+
+<>
+
+```bash
+cd relicstaurants
+git switch browser-pro-lab-material
+```
+
+
+
+
+
+
+Next, install dependencies, and run the application.
+
+<>
+
+```bash
+npm install
+npm run build
+npm run newstart
+```
+
+
+
+This opens your Relicstaurants application in your browser.
+
+
+
+Enter your delivery address, and search for restaurants to get started.
+
+
+
+Here, you see a list of restaurants where you can order food.
+
+
+
+
+
+Choose a restaurant.
+
+
+
+
+
+
+
+Select an item or two and click on cart.
+
+
+
+
+
+
+
+Click **PAY**.
+
+
+
+
+
+
+
+Enter the following fake card information and click **Finish payment** to place your order.
+
+
+
+Your order is successfully placed.
+
+
+
+Next, you use a simulator to generate more traffic to your application.
+
+
+
+
+
+In another terminal window, navigate to the root directory of your application, and run the load generator.
+
+<>
+
+```bash
+# Navigate to the root directiory of your simulator
+cd relicstaurants/simulator
+# Switch to lab branch
+git switch browser-pro-lab-material
+[output]
+# Install the simulator's dependencies
+pip3 install -r requirements.txt
+[output]
+# Run the simulator
+python3 simulator.py
+[output] ====== WebDriver manager ======
+[output] Current google-chrome version is 99.0.4844
+[output] Get LATEST chromedriver version for 99.0.4844 google-chrome
+```
+
+
+
+
+
+This load generator assumes you have Google Chrome installed on your computer. If you're using a different browser, either skip this step and generate traffic manually, or [install Google Chrome](https://www.google.com/chrome/downloads/).
+
+
+
+
+
+
+
+Now, that you know how to run your application, it's time to instrument it. In the terminal windows that are running your application and simulator, press `` to shut them down. With your app shut down, you'll be able to update your code to introduce monitoring tools.
+
+
+
+This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser. Now that you've set up your environment, [instrument your application with browser agent](/docs/browser/new-relic-browser/lab/install-browser-agent/).
+
+
diff --git a/src/images/browser-lab-screenshot-LCP.webp b/src/images/browser-lab-screenshot-LCP.webp
new file mode 100644
index 00000000000..427dcb22e13
Binary files /dev/null and b/src/images/browser-lab-screenshot-LCP.webp differ
diff --git a/src/images/browser-lab-screenshot-add-data.webp b/src/images/browser-lab-screenshot-add-data.webp
new file mode 100644
index 00000000000..47888604509
Binary files /dev/null and b/src/images/browser-lab-screenshot-add-data.webp differ
diff --git a/src/images/browser-lab-screenshot-adjust-timeline.webp b/src/images/browser-lab-screenshot-adjust-timeline.webp
new file mode 100644
index 00000000000..8c9415d3886
Binary files /dev/null and b/src/images/browser-lab-screenshot-adjust-timeline.webp differ
diff --git a/src/images/browser-lab-screenshot-backend.webp b/src/images/browser-lab-screenshot-backend.webp
new file mode 100644
index 00000000000..c0311a995e1
Binary files /dev/null and b/src/images/browser-lab-screenshot-backend.webp differ
diff --git a/src/images/browser-lab-screenshot-browser-code-snippet.webp b/src/images/browser-lab-screenshot-browser-code-snippet.webp
new file mode 100644
index 00000000000..3632d276144
Binary files /dev/null and b/src/images/browser-lab-screenshot-browser-code-snippet.webp differ
diff --git a/src/images/browser-lab-screenshot-cart-error-details.webp b/src/images/browser-lab-screenshot-cart-error-details.webp
new file mode 100644
index 00000000000..449f1680bc5
Binary files /dev/null and b/src/images/browser-lab-screenshot-cart-error-details.webp differ
diff --git a/src/images/browser-lab-screenshot-cart-error.webp b/src/images/browser-lab-screenshot-cart-error.webp
new file mode 100644
index 00000000000..b14707c5453
Binary files /dev/null and b/src/images/browser-lab-screenshot-cart-error.webp differ
diff --git a/src/images/browser-lab-screenshot-checkout.webp b/src/images/browser-lab-screenshot-checkout.webp
new file mode 100644
index 00000000000..a147094d611
Binary files /dev/null and b/src/images/browser-lab-screenshot-checkout.webp differ
diff --git a/src/images/browser-lab-screenshot-choose-restaurant.webp b/src/images/browser-lab-screenshot-choose-restaurant.webp
new file mode 100644
index 00000000000..d432f51d68b
Binary files /dev/null and b/src/images/browser-lab-screenshot-choose-restaurant.webp differ
diff --git a/src/images/browser-lab-screenshot-enable-browser.webp b/src/images/browser-lab-screenshot-enable-browser.webp
new file mode 100644
index 00000000000..5433468c9ac
Binary files /dev/null and b/src/images/browser-lab-screenshot-enable-browser.webp differ
diff --git a/src/images/browser-lab-screenshot-error-instances.webp b/src/images/browser-lab-screenshot-error-instances.webp
new file mode 100644
index 00000000000..93d87678339
Binary files /dev/null and b/src/images/browser-lab-screenshot-error-instances.webp differ
diff --git a/src/images/browser-lab-screenshot-expand-stack-trace.webp b/src/images/browser-lab-screenshot-expand-stack-trace.webp
new file mode 100644
index 00000000000..5d4b22456ac
Binary files /dev/null and b/src/images/browser-lab-screenshot-expand-stack-trace.webp differ
diff --git a/src/images/browser-lab-screenshot-find-file.webp b/src/images/browser-lab-screenshot-find-file.webp
new file mode 100644
index 00000000000..808a2e1446f
Binary files /dev/null and b/src/images/browser-lab-screenshot-find-file.webp differ
diff --git a/src/images/browser-lab-screenshot-frontend-vs-backend.webp b/src/images/browser-lab-screenshot-frontend-vs-backend.webp
new file mode 100644
index 00000000000..789721a63e2
Binary files /dev/null and b/src/images/browser-lab-screenshot-frontend-vs-backend.webp differ
diff --git a/src/images/browser-lab-screenshot-frontend.webp b/src/images/browser-lab-screenshot-frontend.webp
new file mode 100644
index 00000000000..cacd5bb1a7f
Binary files /dev/null and b/src/images/browser-lab-screenshot-frontend.webp differ
diff --git a/src/images/browser-lab-screenshot-homepage.webp b/src/images/browser-lab-screenshot-homepage.webp
new file mode 100644
index 00000000000..ea1dd2157ea
Binary files /dev/null and b/src/images/browser-lab-screenshot-homepage.webp differ
diff --git a/src/images/browser-lab-screenshot-image-trace-detail.webp b/src/images/browser-lab-screenshot-image-trace-detail.webp
new file mode 100644
index 00000000000..a3b23297e9f
Binary files /dev/null and b/src/images/browser-lab-screenshot-image-trace-detail.webp differ
diff --git a/src/images/browser-lab-screenshot-image-trace.webp b/src/images/browser-lab-screenshot-image-trace.webp
new file mode 100644
index 00000000000..c80fa2cc522
Binary files /dev/null and b/src/images/browser-lab-screenshot-image-trace.webp differ
diff --git a/src/images/browser-lab-screenshot-initial-page-load.webp b/src/images/browser-lab-screenshot-initial-page-load.webp
new file mode 100644
index 00000000000..e33fff42549
Binary files /dev/null and b/src/images/browser-lab-screenshot-initial-page-load.webp differ
diff --git a/src/images/browser-lab-screenshot-js-errors.webp b/src/images/browser-lab-screenshot-js-errors.webp
new file mode 100644
index 00000000000..6e5d1c924e4
Binary files /dev/null and b/src/images/browser-lab-screenshot-js-errors.webp differ
diff --git a/src/images/browser-lab-screenshot-most-time-consuming-page-detail.webp b/src/images/browser-lab-screenshot-most-time-consuming-page-detail.webp
new file mode 100644
index 00000000000..2ff2df390a2
Binary files /dev/null and b/src/images/browser-lab-screenshot-most-time-consuming-page-detail.webp differ
diff --git a/src/images/browser-lab-screenshot-most-time-consuming-page.webp b/src/images/browser-lab-screenshot-most-time-consuming-page.webp
new file mode 100644
index 00000000000..d9d49f31580
Binary files /dev/null and b/src/images/browser-lab-screenshot-most-time-consuming-page.webp differ
diff --git a/src/images/browser-lab-screenshot-navigate-to-js-errors.webp b/src/images/browser-lab-screenshot-navigate-to-js-errors.webp
new file mode 100644
index 00000000000..16133b2f666
Binary files /dev/null and b/src/images/browser-lab-screenshot-navigate-to-js-errors.webp differ
diff --git a/src/images/browser-lab-screenshot-navigate-to-trace-detail.webp b/src/images/browser-lab-screenshot-navigate-to-trace-detail.webp
new file mode 100644
index 00000000000..623be39904c
Binary files /dev/null and b/src/images/browser-lab-screenshot-navigate-to-trace-detail.webp differ
diff --git a/src/images/browser-lab-screenshot-newrelic-browser.webp b/src/images/browser-lab-screenshot-newrelic-browser.webp
new file mode 100644
index 00000000000..54eede6bc65
Binary files /dev/null and b/src/images/browser-lab-screenshot-newrelic-browser.webp differ
diff --git a/src/images/browser-lab-screenshot-no-errors.webp b/src/images/browser-lab-screenshot-no-errors.webp
new file mode 100644
index 00000000000..c2975cb9bad
Binary files /dev/null and b/src/images/browser-lab-screenshot-no-errors.webp differ
diff --git a/src/images/browser-lab-screenshot-page-load-detail.webp b/src/images/browser-lab-screenshot-page-load-detail.webp
new file mode 100644
index 00000000000..9fd94faa3f8
Binary files /dev/null and b/src/images/browser-lab-screenshot-page-load-detail.webp differ
diff --git a/src/images/browser-lab-screenshot-page-load-graph.webp b/src/images/browser-lab-screenshot-page-load-graph.webp
new file mode 100644
index 00000000000..1afaaa437d4
Binary files /dev/null and b/src/images/browser-lab-screenshot-page-load-graph.webp differ
diff --git a/src/images/browser-lab-screenshot-page-rendering.webp b/src/images/browser-lab-screenshot-page-rendering.webp
new file mode 100644
index 00000000000..fc4bcd23657
Binary files /dev/null and b/src/images/browser-lab-screenshot-page-rendering.webp differ
diff --git a/src/images/browser-lab-screenshot-page-views.webp b/src/images/browser-lab-screenshot-page-views.webp
new file mode 100644
index 00000000000..7c4b38b7c8d
Binary files /dev/null and b/src/images/browser-lab-screenshot-page-views.webp differ
diff --git a/src/images/browser-lab-screenshot-page-with-js-errors.webp b/src/images/browser-lab-screenshot-page-with-js-errors.webp
new file mode 100644
index 00000000000..8a30908c43c
Binary files /dev/null and b/src/images/browser-lab-screenshot-page-with-js-errors.webp differ
diff --git a/src/images/browser-lab-screenshot-place-order.webp b/src/images/browser-lab-screenshot-place-order.webp
new file mode 100644
index 00000000000..f1fb596ef0b
Binary files /dev/null and b/src/images/browser-lab-screenshot-place-order.webp differ
diff --git a/src/images/browser-lab-screenshot-relicstaurants-browser-app.webp b/src/images/browser-lab-screenshot-relicstaurants-browser-app.webp
new file mode 100644
index 00000000000..a8adf76ee48
Binary files /dev/null and b/src/images/browser-lab-screenshot-relicstaurants-browser-app.webp differ
diff --git a/src/images/browser-lab-screenshot-relicstaurants-browser-errors.webp b/src/images/browser-lab-screenshot-relicstaurants-browser-errors.webp
new file mode 100644
index 00000000000..a590d5f4c85
Binary files /dev/null and b/src/images/browser-lab-screenshot-relicstaurants-browser-errors.webp differ
diff --git a/src/images/browser-lab-screenshot-restaurant-list.webp b/src/images/browser-lab-screenshot-restaurant-list.webp
new file mode 100644
index 00000000000..fdbac2daa90
Binary files /dev/null and b/src/images/browser-lab-screenshot-restaurant-list.webp differ
diff --git a/src/images/browser-lab-screenshot-select-deployment-method.webp b/src/images/browser-lab-screenshot-select-deployment-method.webp
new file mode 100644
index 00000000000..c44302fdf77
Binary files /dev/null and b/src/images/browser-lab-screenshot-select-deployment-method.webp differ
diff --git a/src/images/browser-lab-screenshot-select-food.webp b/src/images/browser-lab-screenshot-select-food.webp
new file mode 100644
index 00000000000..712b5c5f6a8
Binary files /dev/null and b/src/images/browser-lab-screenshot-select-food.webp differ
diff --git a/src/images/browser-lab-screenshot-session-traces.webp b/src/images/browser-lab-screenshot-session-traces.webp
new file mode 100644
index 00000000000..cba17c0e138
Binary files /dev/null and b/src/images/browser-lab-screenshot-session-traces.webp differ
diff --git a/src/images/browser-lab-screenshot-sort-pages.webp b/src/images/browser-lab-screenshot-sort-pages.webp
new file mode 100644
index 00000000000..bee6924c12f
Binary files /dev/null and b/src/images/browser-lab-screenshot-sort-pages.webp differ
diff --git a/src/images/browser-lab-screenshot-sorted-session-traces.webp b/src/images/browser-lab-screenshot-sorted-session-traces.webp
new file mode 100644
index 00000000000..0fbf7ea910d
Binary files /dev/null and b/src/images/browser-lab-screenshot-sorted-session-traces.webp differ
diff --git a/src/images/browser-lab-screenshot-stack-trace.webp b/src/images/browser-lab-screenshot-stack-trace.webp
new file mode 100644
index 00000000000..3112b971733
Binary files /dev/null and b/src/images/browser-lab-screenshot-stack-trace.webp differ
diff --git a/src/images/browser-lab-screenshot-thank-you.webp b/src/images/browser-lab-screenshot-thank-you.webp
new file mode 100644
index 00000000000..69d01f4df26
Binary files /dev/null and b/src/images/browser-lab-screenshot-thank-you.webp differ
diff --git a/src/images/browser-lab-screenshot-trace-time-window-detail.webp b/src/images/browser-lab-screenshot-trace-time-window-detail.webp
new file mode 100644
index 00000000000..585a31f4571
Binary files /dev/null and b/src/images/browser-lab-screenshot-trace-time-window-detail.webp differ
diff --git a/src/images/browser-lab-screenshot-trace.webp b/src/images/browser-lab-screenshot-trace.webp
new file mode 100644
index 00000000000..df35fb3ce98
Binary files /dev/null and b/src/images/browser-lab-screenshot-trace.webp differ
diff --git a/src/images/browser-lab-screenshot-tweet.webp b/src/images/browser-lab-screenshot-tweet.webp
new file mode 100644
index 00000000000..d60caa33c6b
Binary files /dev/null and b/src/images/browser-lab-screenshot-tweet.webp differ
diff --git a/src/images/browser-lab-screenshot-un-minified.webp b/src/images/browser-lab-screenshot-un-minified.webp
new file mode 100644
index 00000000000..df5ca3b8994
Binary files /dev/null and b/src/images/browser-lab-screenshot-un-minified.webp differ
diff --git a/src/images/browser-lab-screenshot-view-relicstaurants.webp b/src/images/browser-lab-screenshot-view-relicstaurants.webp
new file mode 100644
index 00000000000..06c1e6cc96e
Binary files /dev/null and b/src/images/browser-lab-screenshot-view-relicstaurants.webp differ
diff --git a/src/nav/browser.yml b/src/nav/browser.yml
index 13bfa459cdf..aa77c73f3b3 100644
--- a/src/nav/browser.yml
+++ b/src/nav/browser.yml
@@ -201,3 +201,16 @@ pages:
path: /docs/browser/browser-integrations/mexn-integration
- title: Nuxt.js integration
path: /docs/browser/browser-integrations/nuxt-js-integration
+ - title: "Lab: Troubleshoot your site"
+ label: Lab
+ pages:
+ - title: Lab overview
+ path: /docs/browser/new-relic-browser/lab/over-view
+ - title: "Lab part 1: Set up your test web app"
+ path: /docs/browser/new-relic-browser/lab/set-up-env
+ - title: "Lab part 2: Instrument your application"
+ path: /docs/browser/new-relic-browser/lab/install-browser-agent
+ - title: "Lab part 3: Debug errors"
+ path: /docs/browser/new-relic-browser/lab/debug-errors
+ - title: "Lab part 4: Debug frontend slowness"
+ path: /docs/browser/new-relic-browser/lab/debug-slowness