Improve stack trace instructions for Next.js (#11967)

Co-authored-by: Edwin Lim <[email protected]>
Co-authored-by: Ian Vanagas <[email protected]>

Author: 3 people

contents/docs/error-tracking/_snippets/cli/authenticate.mdx

@@ -4,9 +4,12 @@ To authenticate the CLI, you can call the `login` command and follow the instruc
 posthog-cli login
 ```
 
-If you are using the CLI in a CI/CD environment such as GitHub Actions, you can set environment variables to authenticate. [`POSTHOG_CLI_ENV_ID`](https://app.posthog.com/settings/environment#variables) and [`POSTHOG_CLI_TOKEN`](https://app.posthog.com/settings/user-api-keys#variables) should be the number in your PostHog homepage URL and a [personal API key](/docs/api#private-endpoint-authentication) respectively.
+If you are using the CLI in a CI/CD environment such as GitHub Actions, you can set environment variables to authenticate:
 
-Uploading source maps requires the **error tracking write** scope when creating a [personal API key](https://us.posthog.com/settings/user-api-keys).
+| Environment Variable | Description | Source |
+| --- | --- | --- |
+| `POSTHOG_CLI_ENV_ID` | PostHog project ID | [Environment settings](https://app.posthog.com/settings/environment#variables) |
+| `POSTHOG_CLI_TOKEN` | **Personal API key** with `error tracking write` scope | [API key settings](https://app.posthog.com/settings/user-api-keys#variables) |
 
 Use the `--host` option in subsequent commands to specify a different PostHog instance / or region. For EU users:
 

contents/docs/error-tracking/_snippets/cli/download.mdx

@@ -1,4 +1,4 @@
-Install posthog-cli
+Install `posthog-cli`:
 
 <MultiLanguage>
 

contents/docs/error-tracking/_snippets/nextjs-install-error-tracking.mdx

@@ -111,8 +111,7 @@ export const onRequestError = async (err, request, context) => {
 
 You can find a full example of both this and client-side error tracking in our [Next.js error monitoring tutorial](/tutorials/nextjs-error-monitoring).
 
-## Uploading source maps
+## Stack traces
+PostHog needs access to source maps to properly display stack traces. Use the `posthog-cli` to inject and upload your source maps to PostHog.
 
-If your source maps are not publicly hosted, you will need to upload them during your build process to see unminified code in your stack traces.
-
-<NextJsUploadSourceMaps/>
+<NextJsUploadSourceMaps/>

contents/docs/error-tracking/_snippets/nextjs-upload-source-maps.mdx

@@ -30,9 +30,13 @@ export default withPostHogConfig(nextConfig, {
 
 ```
 
-Where:
-- [`POSTHOG_API_KEY`](https://app.posthog.com/settings/user-api-keys#variables): Personal API Key with at least `write` access on `error tracking`.
-- [`POSTHOG_ENV_ID`](https://app.posthog.com/settings/environment#variables): Project ID you can find in your project settings or in the URL of your PostHog instance (54321 in `http://us.posthog.com/project/54321`).
+Where you should set the following environment variables:
+
+| Environment Variable | Description |
+| --- | --- |
+| `POSTHOG_API_KEY` | [Personal API key]((https://app.posthog.com/settings/user-api-keys#variables)) with at least `write` access on `error tracking` |
+| `POSTHOG_ENV_ID` | Project ID you can find in your [project settings](https://app.posthog.com/settings/environment#variables) |
+| `NEXT_PUBLIC_POSTHOG_HOST` | Your PostHog instance URL. Defaults to `https://us.posthog.com` |
 
 ### That's it!