fix(webplayer): CORE-13314 - update example repo (#15)

* fix(webplayer): CORE-13314 - fix handling requests

* fix(webplayer): CORE-13314 - added http agent

* fix(webplayer): CORE-13314 - clean up

---------

Co-authored-by: Bamdad Erfanian <[email protected]>

Author: bamerf

webplayer-example-vanilla-js/public/app.js

@@ -1,10 +1,9 @@
 import { apiToken } from './token.js';
-
 const CorelliumWebplayer = window.CorelliumWebplayer.default;
 
-const instanceId = 'Your device ID';
+const instanceId = 'The device ID goes here';
 const corelliumDomain = 'https://app.corellium.co';
-const projectId = 'Your project ID';
+const projectId = 'the project ID goes here';
 const features = {
   apps: true,
   console: true,
@@ -35,21 +34,40 @@ const containerId = 'container';
   document.addEventListener('DOMContentLoaded', async function (event) {
     try {
       // get JWT using token
-      const res = await fetch('http://localhost:8000/api/auth', {
+      console.log('Starting fetch request...');
+
+      const response = await fetch('http://localhost:8000/api/auth', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
+          Accept: 'application/json',
         },
         body: JSON.stringify({
           token: apiToken,
           instanceId,
           projectId,
           features,
         }),
+        signal: AbortSignal.timeout(10000), // 10 second timeout
       });
 
-      const { token, ...data } = await res.json();
-      console.log('token', token, data);
+      console.log('Fetch completed, status:', response.status);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('Server responded with error:', {
+          status: response.status,
+          statusText: response.statusText,
+          body: errorText,
+        });
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const responseData = await response.json();
+      console.log('Response data received:', responseData);
+
+      const { token, ...data } = responseData;
+      console.log('Token extracted:', token ? 'Token exists' : 'No token');
 
       // now that we have a JWT, set up the webplayer
       // pass the id for the div that will hold the iframe as `containerId`
@@ -61,14 +79,18 @@ const containerId = 'container';
       });
 
       webplayer.on('success', (data) => {
-        console.log('data', data);
+        console.log('Webplayer success:', data);
       });
 
       webplayer.on('error', (data) => {
-        console.error('err', data);
+        console.error('Webplayer error:', data);
       });
-    } catch (err) {
-      console.log('server err :>> ', err);
+    } catch (error) {
+      console.error('Request failed:', error);
+      if (error.name === 'AbortError') {
+        console.error('Request timed out');
+      }
+      throw error;
     }
   });
 })();

webplayer-example-vanilla-js/server.js

@@ -1,5 +1,6 @@
 const express = require('express');
-const fetch = require('node-fetch');
+const fetch = (...args) =>
+  import('node-fetch').then(({ default: fetch }) => fetch(...args));
 const app = express();
 const https = require('https');
 const cors = require('cors');
@@ -14,42 +15,92 @@ app.use(
   cors({
     origin: '*',
     methods: ['GET', 'POST'],
+    allowedHeaders: ['Content-Type', 'Authorization', 'Accept'],
+    credentials: true,
+    exposedHeaders: ['Content-Type', 'Authorization'],
   })
 );
 
 app.use(express.static('public'));
 
 app.post('/api/auth', jsonParser, async (req, res) => {
-  const loginUrl = 'https://ci-1.corellium.co/api/v1/webplayer'; // this domain would be https://app.corellium.co/api/v1/webplayer in production
+  console.log('Received auth request at:', new Date().toISOString());
+  console.log('Request headers:', req.headers);
 
-  const httpsAgent = new https.Agent({
-    rejectUnauthorized: false,
+  // Change this URL to your domain URL
+  const baseUrl = ''; // example - https://app.corellium.co in production
+
+  const loginUrl = `${baseUrl}/api/v1/webplayer`;
+
+  console.log('Incoming request data:', {
+    projectId: req.body?.projectId,
+    instanceId: req.body?.instanceId,
+    features: req.body?.features,
+    hasToken: !!req.body?.token,
   });
 
+  const options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: req.body.token,
+      Accept: 'application/json',
+    },
+    body: JSON.stringify({
+      projectId: req.body.projectId,
+      instanceId: req.body.instanceId,
+      expiresIn: 60 * 60 * 5,
+      features: req.body.features,
+    }),
+    agent: new https.Agent({
+      rejectUnauthorized: false,
+    }),
+  };
+
   try {
-    const response = await fetch(loginUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: req.body.token, // your API token
-      },
-      body: JSON.stringify({
-        projectId: req.body.projectId,
-        instanceId: req.body.instanceId,
-        expiresIn: 60 * 60 * 5, // value is in seconds
-        features: req.body.features,
-      }),
-      agent: httpsAgent,
+    console.log('Making request to:', loginUrl);
+    console.log('Request options:', {
+      method: options.method,
+      headers: options.headers,
+      body: JSON.parse(options.body),
     });
 
+    const response = await fetch(loginUrl, options);
+
+    console.log('Response status:', response.status);
+    console.log('Response headers:', response.headers.raw());
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Error response body:', errorText);
+      throw new Error(
+        `HTTP error! status: ${response.status}, body: ${errorText}`
+      );
+    }
+
     const data = await response.json();
+    console.log('Success response:', data);
 
-    res.send(data);
+    // Set explicit headers for the response
+    res.setHeader('Content-Type', 'application/json');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
+    res.setHeader(
+      'Access-Control-Allow-Headers',
+      'Content-Type, Authorization, Accept'
+    );
 
-    return;
+    console.log('Sending response to client');
+    res.send(data);
+    console.log('Response sent successfully');
   } catch (err) {
-    console.log('webplayer ERROR: ', err);
-    throw new Error(err);
+    console.error('Webplayer Error:', err.message);
+    console.error('Error stack:', err.stack);
+    res.status(500).json({
+      error: 'Failed to connect to webplayer service',
+      details: err.message,
+      status: err.status || 500,
+    });
   }
 });