update logging docs (#451)

* error monitoring setup should link language logging setup
* logging setup docs should explain the SDK setup and log enablement
options

closes #4660

Author: Vadman97

components/QuickstartContent/backend/js/express.tsx

@@ -19,20 +19,42 @@ export const JSExpressContent: QuickStartContent = {
 
 const app = express()
 
-const highlightErrorHandler = Handlers.errorHandler({ projectID: 'YOUR_PROJECT_ID' })
-
 app.get('/', (req, res) => {
   res.send(\`Hello World! ${Math.random()}\`)
 })
 
 // This should be before any other error middleware and after all controllers (route definitions)
-app.use(highlightErrorHandler)
+app.use(Handlers.errorHandler({ projectID: 'YOUR_PROJECT_ID' }))
 app.listen(8080, () => {
   console.log(\`Example app listening on port 8080\`)
 })`,
         language: `js`,
       },
     },
+    {
+      title: `Try/catch an error manually (without middleware).`,
+      content:
+        'If you are using express.js async handlers, you will need your own try/catch block that directly calls the highlight SDK to report an error. ' +
+        'This is because express.js async handlers do not invoke error middleware.',
+      code: {
+        text: `app.get('/async', async (req: Request, res: Response) => {
+  try {
+    // do something dangerous...
+    throw new Error('oh no!');
+  } catch (error) {
+    const parsedHeaders = H.parseHeaders(req.headers);
+    H.consumeError(
+      error as Error,
+      parsedHeaders?.secureSessionId,
+      parsedHeaders?.requestId
+    );
+  } finally {
+    res.status(200).json({hello: 'world'});
+  }
+});`,
+        language: `js`,
+      },
+    },
     verifyError(
       'express.js',
       `app.get('/', (req, res) => {

components/QuickstartContent/backend/js/shared-snippets.tsx

@@ -54,9 +54,10 @@ H.consumeError(error, parsed?.secureSessionId, parsed?.requestId)`,
 }
 
 export const setupLogging: (slug: string) => QuickStartStep = (slug) => ({
-  title: 'Verify your backend logs are being recorded.',
-  content:
-    'With the JS SDKs, your logs are reported automatically from console methods. Visit the [highlight logs portal](http://app.highlight.io/logs) and check that backend logs are coming in.',
+  title: 'Set up logging.',
+  content: `With the JS SDKs, your logs are reported automatically from console methods. See the JS [logging setup guide](${siteUrl(
+    '/docs/getting-started/backend-logging/js/overview',
+  )}) for more details.`,
 })
 
 export const addIntegrationContent = (name: string, slug: string) =>

components/QuickstartContent/backend/python/shared-snippets.tsx

@@ -1,3 +1,4 @@
+import { siteUrl } from '../../../../utils/urls'
 import { fullstackMappingLink } from '../../frontend/shared-snippets'
 import { QuickStartStep } from '../../QuickstartContent'
 
@@ -33,7 +34,8 @@ pip install highlight-io${variant ? '[' + variant + ']' : ''}`,
 }
 
 export const setupLogging: (slug: string) => QuickStartStep = (slug) => ({
-  title: 'Verify your backend logs are being recorded.',
-  content:
-    'With the Python SDK, your logs are reported automatically from the builtin logging methods (as long as `record_logs=True` is provided to the `highlight_io.H` constructor). Visit the [highlight logs portal](http://app.highlight.io/logs) and check that backend logs are coming in.',
+  title: 'Set up logging.',
+  content: `With the Python SDK, your logs are reported automatically from builtin logging methods. See the Python [logging setup guide](${siteUrl(
+    '/docs/getting-started/backend-logging/python/overview',
+  )}) for more details.`,
 })

components/QuickstartContent/logging/js/other.tsx

@@ -1,3 +1,4 @@
+import { initializeNodeSDK, jsGetSnippet } from '../../backend/js/shared-snippets'
 import { QuickStartContent } from '../../QuickstartContent'
 import { previousInstallSnippet, verifyLogs } from '../shared-snippets'
 
@@ -6,6 +7,8 @@ export const JSOtherLogContent: QuickStartContent = {
   subtitle: 'Learn how to set up highlight.io JS log ingestion without a logging library.',
   entries: [
     previousInstallSnippet('js'),
+    jsGetSnippet('node'),
+    initializeNodeSDK('node'),
     {
       title: 'Call built-in console methods.',
       content:

components/QuickstartContent/logging/python/other.tsx

@@ -1,3 +1,4 @@
+import { downloadSnippet } from '../../backend/python/shared-snippets'
 import { QuickStartContent } from '../../QuickstartContent'
 import { previousInstallSnippet, verifyLogs } from '../shared-snippets'
 
@@ -6,10 +7,23 @@ export const PythonOtherLogContent: QuickStartContent = {
   subtitle: 'Learn how to set up highlight.io Python log ingestion without a logging library.',
   entries: [
     previousInstallSnippet('python'),
+    downloadSnippet('Flask'),
+    {
+      title: 'Initialize the Highlight SDK.',
+      content: 'Setup the SDK with `record_logs` enabled.',
+      code: {
+        text: `import highlight_io
+
+H = highlight_io.H("YOUR_PROJECT_ID", record_logs=True)`,
+        language: 'python',
+      },
+    },
     {
       title: 'Call the built-in Python logging library.',
       content:
-        'Logs are automatically recorded by the highlight SDK. Arguments passed as a dictionary as the second parameter will be interpreted as structured key-value pairs that logs can be easily searched by.',
+        'Logs are reported automatically from the builtin logging methods (as long as `record_logs=True` is provided to the `highlight_io.H` constructor). ' +
+        'Visit the [highlight logs portal](http://app.highlight.io/logs) and check that backend logs are coming in. ' +
+        'Arguments passed as a dictionary as the second parameter will be interpreted as structured key-value pairs that logs can be easily searched by.',
       code: {
         text: `import logging
 

components/QuickstartContent/logging/shared-snippets.tsx

@@ -2,10 +2,10 @@ import { siteUrl } from '../../../utils/urls'
 import { QuickStartStep } from '../QuickstartContent'
 
 export const previousInstallSnippet: (slug: string) => QuickStartStep = (slug) => ({
-  title: 'Set up your frontend and backend highlight.io integration.',
+  title: 'Set up your frontend highlight.io integration.',
   content: `First, make sure you've followed the [frontend getting started](${siteUrl(
     '/docs/getting-started/overview',
-  )}) and [backend getting started](${siteUrl(`/docs/getting-started/backend-sdk/${slug}/overview`)}) guides.`,
+  )}) guide.`,
 })
 
 export const verifyLogs: QuickStartStep = {

docs-content/getting-started/3_client-sdk/6_sveltekit.md

@@ -1,5 +1,5 @@
 ---
-title: Svelte Kit
+title: SvelteKit
 heading: Using highlight.io with SvelteKit
 slug: svelte-kit
 quickstart: true

package.json

@@ -17,7 +17,7 @@
     "@graphcms/rich-text-react-renderer": "^0.6.1",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
-    "@highlight-run/next": "^2.2.1",
+    "@highlight-run/next": "^2.2.3",
     "@radix-ui/react-slider": "^1.1.0",
     "@types/js-cookie": "^3.0.2",
     "@vercel/og": "^0.0.27",
@@ -30,7 +30,7 @@
     "graphql": "^16.6.0",
     "graphql-request": "^5.1.0",
     "gray-matter": "^4.0.3",
-    "highlight.run": "^5.3.1",
+    "highlight.run": "^5.4.1",
     "js-cookie": "^3.0.1",
     "js-yaml": "^4.1.0",
     "lodash.debounce": "^4.0.8",