feat(toolbar): Add setup instructions for the Sentry Toolbar using the react hook useSentryToolbar (#12845)

* feat(toolbar): Add setup instructions for the Dev Toolbar using the react hook useSentryToolbar

* deeplink directly to the FAQ entries

* rename to Sentry Toolbar

* grammar fixes from code review

* add redirects for page path changes

* more grammar

* Apply suggestions from code review

Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>

* more renames

* create a sub-heading for react-hook options

---------

Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>

Author: ryan953

docs/product/dev-toolbar/faq.mdx

@@ -0,0 +1,66 @@
+---
+title: FAQ
+sidebar_order: 30
+description: "Frequently asked questions about the Sentry Toolbar."
+---
+
+<Expandable permalink title="In what environments should I enable the Toolbar?">
+
+Since the Sentry Toolbar will be visible to users within your app, it's important to consider which environments should render it.
+
+If your web application requires authentication to access:
+- In development and staging, always initialize the Sentry Toolbar.
+- In production, conditionally initialize the Sentry Toolbar when an employee is logged in.
+
+If you web application does not require authenticaion:
+- In development and staging environments, initialize the Toolbar at all times.
+- In production environments, do not initialize the Toolbar.
+
+Initializing the Sentry Toolbar allows all developers and testers to quickly go from the page they're looking at, back to Sentry for further debugging.
+In production it can make it easier for developers to reproduce issues, but it should not be initialized for all users of the site -- only when an employee/engineer/etc visits.
+
+Once you decide where and when you want the Toolbar to appear, you'll write those conditions into your codebase. The specific implementation is something you'll need to write based on how your app works and how your team is set up.
+
+</Expandable>
+
+<Expandable permalink title="How can I conditionally initialize the Toolbar?">
+
+Implementing the specific conditions for initializing the Toolbar will vary from app to app and whichever framework or template library is in use.
+
+For example, the conditions to show the Toolbar in development and staging might look like this, if written in JavaScript:
+
+```html {tabTitle:CDN}
+<script>
+const env = process.env.ENVIRONMENT || 'development';
+const isDev = env === 'development' || env === 'staging';
+
+if (isDev) {
+  window.SentryToolbar.init({ ... });
+}
+</script>
+```
+```javascript {tabTitle:React}
+const env = process.env.ENVIRONMENT || 'development';
+const isDev = env === 'development' || env === 'staging';
+
+useSentryToolbar({
+  enabled: isDev,
+  initProps: {
+    ...
+  },
+})
+```
+
+</Expandable>
+
+<Expandable permalink title="Are there plans to include the Toolbar in the JavaScript SDK?">
+
+The [Sentry Toolbar](https://github.com/getsentry/sentry-toolbar) and the [JavaScript SDK](https://github.com/getsentry/sentry-javascript) are distinct features that we intentionally keep separated.
+
+Some of the differences between the two include:
+  - The Toolbar is a UI product focused on making it easier to find and take action on existing data, while the SDK functions as infrastructure to collect and send data to the server.
+  - The Toolbar has a different set of [dependencies](https://github.com/getsentry/sentry-toolbar/blob/main/package.json) and uses different browser APIs that the JavaScript SDK does not use. For example: the Toolbar will interact with things like cookies and local storage. By keeping these pieces of code separate, it's easier to audit the [SDK code on GitHub](https://github.com/getsentry/sentry-javascript) to verify that it is not persisting information inside end-users' browsers.
+  - The setup and deploy instruction are very different. The SDK is best deployed on staging and production environments, and can be configured easily with environment variables. The Sentry Toolbar requires special considerations to deploy it into production, usually by creating a condition so that it's only included for members of your own Sentry organization.
+
+</Expandable>
+