Skip to content
This repository was archived by the owner on Apr 25, 2023. It is now read-only.

Commit 2d5488b

Browse files
authored
add backend getting started guides for js (#397)
1 parent f323933 commit 2d5488b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+641
-781
lines changed

components/Products/products.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export const PRODUCTS: { [k: string]: iProduct } = {
240240
},
241241
express: {
242242
type: 'backend',
243-
docsLink: '/docs/getting-started/backend-sdk/express',
243+
docsLink: '/docs/getting-started/4_backend-sdk/express',
244244
slug: 'express',
245245
title: 'Express',
246246
types: ['Backend', 'Frontend'],
@@ -249,7 +249,7 @@ export const PRODUCTS: { [k: string]: iProduct } = {
249249

250250
go: {
251251
type: 'backend',
252-
docsLink: '/docs/getting-started/backend-sdk/go',
252+
docsLink: '/docs/getting-started/4_backend-sdk/go',
253253
slug: 'go',
254254
title: 'Golang',
255255
types: ['Backend', 'Frontend'],
@@ -267,7 +267,7 @@ export const PRODUCTS: { [k: string]: iProduct } = {
267267

268268
node: {
269269
type: 'backend',
270-
docsLink: '/docs/getting-started/backend-sdk/nodejs',
270+
docsLink: '/docs/getting-started/4_backend-sdk/nodejs',
271271
slug: 'node',
272272
title: 'Node.js',
273273
types: ['Backend', 'Frontend'],

components/QuickstartContent/QuickstartContent.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@ import { GoFiberContent } from './backend/go/fiber'
33
import { GoGinContent } from './backend/go/gin'
44
import { GoGqlgenContent } from './backend/go/go-gqlgen'
55
import { GoMuxContent } from './backend/go/mux'
6+
import { JSApolloContent } from './backend/js/apollo'
7+
import { JSCloudflareContent } from './backend/js/cloudflare'
8+
import { JSExpressContent } from './backend/js/express'
9+
import { JSFirebaseContent } from './backend/js/firebase'
10+
import { JSNodeContent } from './backend/js/nodejs'
11+
import { JStRPCContent } from './backend/js/trpc'
12+
import { PythonAWSContext } from './backend/python/aws'
13+
import { PythonAzureContext } from './backend/python/azure'
14+
import { PythonDjangoContext } from './backend/python/django'
15+
import { PythonFastAPIContext } from './backend/python/fastapi'
16+
import { PythonFlaskContext } from './backend/python/flask'
17+
import { PythonGCPContext } from './backend/python/gcp'
18+
import { PythonOtherContext } from './backend/python/other'
619
import { AngularContent } from './frontend/angular'
720
import { GatsbyContent } from './frontend/gatsby'
821
import { NextContent } from './frontend/next'
@@ -11,13 +24,6 @@ import { ReactContent } from './frontend/react'
1124
import { VueContent } from './frontend/vue'
1225
import { DevDeploymentContent } from './self-host/dev-deploy'
1326
import { SelfHostContent } from './self-host/self-host'
14-
import { PythonFlaskContext } from './backend/python/flask'
15-
import { PythonDjangoContext } from './backend/python/django'
16-
import { PythonOtherContext } from './backend/python/other'
17-
import { PythonAWSContext } from './backend/python/aws'
18-
import { PythonGCPContext } from './backend/python/gcp'
19-
import { PythonAzureContext } from './backend/python/azure'
20-
import { PythonFastAPIContext } from './backend/python/fastapi'
2127

2228
export type QuickStartContent = {
2329
subtitle: string
@@ -31,6 +37,7 @@ export type QuickStartStep = {
3137
text: string
3238
language: string
3339
}
40+
hidden?: true
3441
}
3542

3643
export enum QuickStartType {
@@ -54,6 +61,12 @@ export enum QuickStartType {
5461
GoChi = 'go/chi',
5562
GoMux = 'go/mux',
5663
GoGin = 'go/gin',
64+
JSApollo = 'js/apollo',
65+
JSCloudflare = 'js/cloudflare',
66+
JSExpress = 'js/express',
67+
JSFirebase = 'js/firebase',
68+
JSNodejs = 'js/nodejs',
69+
JStRPC = 'js/trpc',
5770
}
5871

5972
export const quickStartContent: { [type in QuickStartType]: QuickStartContent } = {
@@ -77,4 +90,10 @@ export const quickStartContent: { [type in QuickStartType]: QuickStartContent }
7790
[QuickStartType.GoChi]: GoChiContent,
7891
[QuickStartType.GoMux]: GoMuxContent,
7992
[QuickStartType.GoGin]: GoGinContent,
93+
[QuickStartType.JSApollo]: JSApolloContent,
94+
[QuickStartType.JSCloudflare]: JSCloudflareContent,
95+
[QuickStartType.JSExpress]: JSExpressContent,
96+
[QuickStartType.JSFirebase]: JSFirebaseContent,
97+
[QuickStartType.JSNodejs]: JSNodeContent,
98+
[QuickStartType.JStRPC]: JStRPCContent,
8099
}

components/QuickstartContent/backend/go/chi.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
import { QuickStartContent } from '../../QuickstartContent'
22
import { frontendInstallSnippet } from '../shared-snippets'
3-
import {
4-
customGoError,
5-
goGetSnippet,
6-
initializeGoSdk,
7-
setUpLogging,
8-
verifyCustomError,
9-
verifyGoErrors,
10-
} from './shared-snippets'
3+
import { customGoError, goGetSnippet, initializeGoSdk, setUpLogging, verifyCustomError } from './shared-snippets'
114

125
export const GoChiContent: QuickStartContent = {
13-
subtitle: 'Learn how to set up highlight.io on your Go gqlgen backend.',
6+
subtitle: 'Learn how to set up highlight.io on your Go chi backend.',
147
entries: [
158
frontendInstallSnippet,
169
goGetSnippet,
1710
initializeGoSdk,
1811
{
1912
title: 'Add the Highlight middleware.',
20-
content: '`highlightChi.Middleware` is a Chi compatible middleware.',
13+
content: '`highlightChi.Middleware` is a [Go Chi](https://github.com/go-chi/chi) compatible middleware.',
2114
code: {
2215
text: `import (
2316
highlightChi "github.com/highlight/highlight/sdk/highlight-go/middleware/chi"

components/QuickstartContent/backend/go/fiber.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const GoFiberContent: QuickStartContent = {
1111
{
1212
title: 'Add the Highlight Fiber error handler.',
1313
content:
14-
'`highlightFiber.Middleware()` provides a Fiber middleware to automatically record and send errors to Highlight.',
14+
'`highlightFiber.Middleware()` provides a [Go Fiber](https://github.com/gofiber/fiber) middleware to automatically record and send errors to Highlight.',
1515
code: {
1616
text: `import (
1717
highlightFiber "github.com/highlight/highlight/sdk/highlight-go/middleware/fiber"

components/QuickstartContent/backend/go/gin.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import { QuickStartContent } from '../../QuickstartContent'
22
import { frontendInstallSnippet } from '../shared-snippets'
3-
import {
4-
customGoError,
5-
goGetSnippet,
6-
initializeGoSdk,
7-
setUpLogging,
8-
verifyCustomError,
9-
verifyGoErrors,
10-
} from './shared-snippets'
3+
import { customGoError, goGetSnippet, initializeGoSdk, setUpLogging, verifyCustomError } from './shared-snippets'
114

125
export const GoGinContent: QuickStartContent = {
136
subtitle: 'Learn how to set up highlight.io on your Go gqlgen backend.',
@@ -17,7 +10,8 @@ export const GoGinContent: QuickStartContent = {
1710
initializeGoSdk,
1811
{
1912
title: 'Add the Highlight middleware.',
20-
content: '`highlightGin.Middleware()` provides is a Gin compatible middleware.',
13+
content:
14+
'`highlightGin.Middleware()` provides is a [Go Gin](https://github.com/gin-gonic/gin) compatible middleware.',
2115
code: {
2216
text: `import (
2317
highlightGin "github.com/highlight/highlight/sdk/highlight-go/middleware/gin"

components/QuickstartContent/backend/go/go-gqlgen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const GoGqlgenContent: QuickStartContent = {
1111
{
1212
title: 'Add the Highlight gqlgen error handler.',
1313
content:
14-
'`H.NewGraphqlTracer` provides a middleware you can add to your GraphQL handler to automatically record and send GraphQL resolver errors to Highlight.',
14+
'`H.NewGraphqlTracer` provides a middleware you can add to your [GraphQL](https://gqlgen.com/getting-started/) handler to automatically record and send GraphQL resolver errors to Highlight.',
1515
code: {
1616
text: `import (
1717
H "github.com/highlight/highlight/sdk/highlight-go"

components/QuickstartContent/backend/go/mux.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import { QuickStartContent } from '../../QuickstartContent'
22
import { frontendInstallSnippet } from '../shared-snippets'
3-
import {
4-
customGoError,
5-
goGetSnippet,
6-
initializeGoSdk,
7-
setUpLogging,
8-
verifyCustomError,
9-
verifyGoErrors,
10-
} from './shared-snippets'
3+
import { customGoError, goGetSnippet, initializeGoSdk, setUpLogging, verifyCustomError } from './shared-snippets'
114

125
export const GoMuxContent: QuickStartContent = {
136
subtitle: 'Learn how to set up highlight.io on your Go gqlgen backend.',
@@ -18,7 +11,7 @@ export const GoMuxContent: QuickStartContent = {
1811
{
1912
title: 'Add the Highlight gqlgen error handler.',
2013
content:
21-
'`H.NewGraphqlTracer` provides a middleware you can add to your GraphQL handler to automatically record and send GraphQL resolver errors to Highlight.',
14+
'`H.NewGraphqlTracer` provides a middleware you can add to your [Golang Mux](https://github.com/gorilla/mux) handler to automatically record and send GraphQL resolver errors to Highlight.',
2215
code: {
2316
text: `import (
2417
highlightGorillaMux "github.com/highlight/highlight/sdk/highlight-go/middleware/gorillamux"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,5 @@ export const verifyCustomError: QuickStartStep = {
5858
export const setUpLogging: (slug: string) => QuickStartStep = (slug) => ({
5959
title: 'Set up logging.',
6060
content: `Start sending logs to Highlight! Follow the [logging setup guide](../../../getting-started/backend-logging/go/${slug}) to get started.`,
61+
hidden: true,
6162
})
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { QuickStartContent } from '../../QuickstartContent'
2+
import { frontendInstallSnippet } from '../shared-snippets'
3+
import { initializeNodeSDK, jsGetSnippet, manualError, setupLogging, verifyError } from './shared-snippets'
4+
5+
export const JSApolloContent: QuickStartContent = {
6+
subtitle: 'Learn how to set up highlight.io on your Apollo Server backend.',
7+
entries: [
8+
frontendInstallSnippet,
9+
jsGetSnippet('node'),
10+
initializeNodeSDK('node'),
11+
{
12+
title: `Add the Apollo Server integration.`,
13+
content:
14+
'`ApolloServerHighlightPlugin` is an [Apollo Server](https://www.apollographql.com/docs/apollo-server/) plugin to capture errors in your graphql handlers.',
15+
code: {
16+
text: `import { ApolloServer } from '@apollo/server'
17+
import { ApolloServerHighlightPlugin } from '@highlight-run/node'
18+
19+
// ...
20+
21+
const server = new ApolloServer({
22+
typeDefs,
23+
resolvers,
24+
plugins: [ApolloServerHighlightPlugin({ projectID: 'YOUR_PROJECT_ID' })],
25+
})`,
26+
language: `js`,
27+
},
28+
},
29+
manualError,
30+
verifyError(
31+
'apollo',
32+
`const server = new ApolloServer({
33+
typeDefs,
34+
resolvers: {
35+
Query: {
36+
books: () => {
37+
throw new Error('a sample error!');
38+
},
39+
},
40+
},
41+
});`,
42+
),
43+
setupLogging('apollo'),
44+
],
45+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { QuickStartContent } from '../../QuickstartContent'
2+
import { frontendInstallSnippet } from '../shared-snippets'
3+
import { addIntegrationContent, jsGetSnippet, setupLogging, verifyError } from './shared-snippets'
4+
5+
export const JSCloudflareContent: QuickStartContent = {
6+
subtitle: 'Learn how to set up highlight.io in Cloudflare Workers.',
7+
entries: [
8+
frontendInstallSnippet,
9+
jsGetSnippet('cloudflare'),
10+
{
11+
title: `Add the Cloudflare Worker Highlight integration.`,
12+
content:
13+
addIntegrationContent('Cloudflare Worker SDK', 'cloudflare') +
14+
' ' +
15+
'The `sendResponse` method traces successful requests while `consumeError` reports exceptions. ' +
16+
'All Highlight data submission uses [waitUntil](https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil) to make sure that we have no impact on request handling performance.',
17+
code: {
18+
text: `import { H } from '@highlight-run/cloudflare'
19+
20+
async function doRequest() {
21+
return new Response('hello!')
22+
}
23+
24+
export default {
25+
async fetch(request: Request, env: {}, ctx: ExecutionContext) {
26+
const hEnv = { HIGHLIGHT_PROJECT_ID: 'YOUR_PROJECT_ID' }
27+
try {
28+
const response = await doRequest()
29+
H.sendResponse(request, hEnv, ctx, response)
30+
return response
31+
} catch (e: any) {
32+
H.consumeError(request, hEnv, ctx, e)
33+
throw e
34+
}
35+
},
36+
}`,
37+
language: `js`,
38+
},
39+
},
40+
verifyError(
41+
'cloudflare',
42+
`export default {
43+
async fetch(request: Request, env: {}, ctx: ExecutionContext) {
44+
H.consumeError(request, { HIGHLIGHT_PROJECT_ID: 'YOUR_PROJECT_ID' }, ctx, new Error('example error!'))
45+
},
46+
}`,
47+
),
48+
setupLogging('cloudflare'),
49+
],
50+
}
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { QuickStartContent } from '../../QuickstartContent'
2+
import { frontendInstallSnippet } from '../shared-snippets'
3+
import { addIntegrationContent, initializeNodeSDK, jsGetSnippet, setupLogging, verifyError } from './shared-snippets'
4+
5+
export const JSExpressContent: QuickStartContent = {
6+
subtitle: 'Learn how to set up highlight.io in Express.js.',
7+
entries: [
8+
frontendInstallSnippet,
9+
jsGetSnippet('node'),
10+
initializeNodeSDK('node'),
11+
{
12+
title: `Add the Express.js Highlight integration.`,
13+
content: addIntegrationContent('Node Highlight SDK', 'nodejs'),
14+
code: {
15+
text: `import * as Highlight from '@highlight-run/node'
16+
// or like this with commonjs
17+
// const Highlight = require('@highlight-run/node')
18+
19+
const app = express()
20+
21+
const highlightErrorHandler = Highlight.Handlers.errorHandler({ projectID: 'YOUR_PROJECT_ID' })
22+
23+
app.get('/', (req, res) => {
24+
res.send(\`Hello World! ${Math.random()}\`)
25+
})
26+
27+
// This should be before any other error middleware and after all controllers (route definitions)
28+
app.use(highlightErrorHandler)
29+
app.listen(8080, () => {
30+
console.log(\`Example app listening on port 8080\`)
31+
})`,
32+
language: `js`,
33+
},
34+
},
35+
verifyError(
36+
'express.js',
37+
`app.get('/', (req, res) => {
38+
throw new Error('sample error!')
39+
res.send(\`Hello World! ${Math.random()}\`)
40+
})`,
41+
),
42+
setupLogging('express'),
43+
],
44+
}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { QuickStartContent } from '../../QuickstartContent'
2+
import { frontendInstallSnippet } from '../shared-snippets'
3+
import { addIntegrationContent, initializeNodeSDK, jsGetSnippet, setupLogging, verifyError } from './shared-snippets'
4+
5+
export const JSFirebaseContent: QuickStartContent = {
6+
subtitle: 'Learn how to set up highlight.io in Firebase Cloud Functions.',
7+
entries: [
8+
frontendInstallSnippet,
9+
jsGetSnippet('node'),
10+
initializeNodeSDK('node'),
11+
{
12+
title: `Add the Firebase Highlight integration.`,
13+
content: addIntegrationContent('Node Highlight SDK', 'nodejs'),
14+
code: {
15+
text: `const highlightNode = require('@highlight-run/node')
16+
17+
// Callable function wrapper
18+
exports.exampleCallable = functions.https.onCall(
19+
highlightNode.Handlers.firebaseCallableFunctionHandler(
20+
(data, context) => {
21+
// ... your handler code here
22+
return { result: 'useful result!' }
23+
},
24+
{ projectID: 'YOUR_PROJECT_ID' },
25+
),
26+
)
27+
28+
// Http function wrapper
29+
exports.exampleHttp = functions.https.onRequest(
30+
highlightNode.Handlers.firebaseHttpFunctionHandler(
31+
(req, res) => {
32+
// ... your handler code here
33+
res.json({ result: 'useful result!' })
34+
},
35+
{ projectID: 'YOUR_PROJECT_ID' },
36+
),
37+
)`,
38+
language: `js`,
39+
},
40+
},
41+
verifyError(
42+
'Firebase',
43+
`exports.exampleCallable = functions.https.onCall(
44+
highlightNode.Handlers.firebaseCallableFunctionHandler(
45+
(data, context) => {
46+
throw new Error('example error!')
47+
return { result: 'useful result!' }
48+
},
49+
{ projectID: 'YOUR_PROJECT_ID' },
50+
),
51+
)`,
52+
),
53+
setupLogging('firebase'),
54+
],
55+
}

0 commit comments

Comments
 (0)